REALTIME trong Angular 5 kết hợp Rails 5 và WEBSOCKETS

Chắc hẳn khá nhiều người đã từng làm việc với realtime, vậy hôm nay mình xin trình bày 1 demo nho nhỏ giới thiệu về realtime trong angular kết hợp với websockets

Hôm nay mình sẽ tạo ra một ứng dụng realtime cung cấp phản hồi ngay lập tức khi một người dùng ấn like một bức ảnh. Để làm được điều này chúng ta sẽ sử dụng Angular 5 và Pusher API. Nếu ai chưa nge qua về Pusher API có thể tìm hiểu ở link này nhé: https://pusher.com/docs

Đây là hình ảnh sau khi hoàn thành demo:

Để bắt đầu làm demo trước hết các bạn phải kiểm tra mình đã cài đặt Node và NPM chưa.

npm --version
node --version

Để chắc chắn máy tính bạn đã cái đặt angular 5 hãy kiểm tra bằng dòng lệnh sau:

 ng --version

Nếu bạn chưa cài đặt hoặc phiên bản nhỏ hơn 1.2 hãy chạy câu lệnh sau:

 npm install -g @angular/cli

Và cuối cùng bạn chạy dòng lệnh dưới đây để tạo ứng dụng nhé:

ng new angular5-pusher

Ứng dụng hôm nay của mình sẽ khá đơn giản, chỉ cần load 1 hình ảnh, thêm một button like là xong. Trong file app.component.html bạn thêm đoạn code như bên dưới:

    <div class="main-app">
      <h1>
        {{ title }}!
      </h1>
      <img awidth="300" alt="Pusher Logo" src="../assets/pusher.svg" />
      <div class="like">
        <div style="margin-right: 1rem">
          <h2>{{ likes }} likes</h2>
        </div>
        <button class="btn btn-lg btn-success" (click)="liked()">Like Image</button>
      </div>
    </div>

Ở đây chúng ta sẽ thấy có sự kiện click, tức là mỗi lần click vào button này, thì lượng like sẽ tăng lên, và việc xử lí đó mình sẽ đặt ở trong app.component.ts

    import { Component, OnInit } from '@angular/core';
    //..

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })

    export class AppComponent implements OnInit {
      title = 'Pusher Liker';
      likes: any =  0;

      constructor() {
        // the pusher service will be injected as part of the constructor later
      }
      ngOnInit() {
        // ..
      }
      // add to the number of likes to the server
      liked() {
        this.likes = parseInt(this.likes) + 1;
        // ..
      }
    }

Hiện tại, khi mà một người dùng click vào button like thì ở phía người dùng sẽ không hiển thị ngay lập tức lượng like mà người khác vừa thực thi. Và Pusher sẽ giải quyết vấn đề này, nó cho phép bạn thêm thời gian thực vào ứng dụng khá là đơn giản. Tất cá việc mình cần làm là phải đăng kí 1 chanel và sau đó listen for event