Angular + Websocket

 

Angular使用RxJS，它本質上是一個反應式擴展的javascript實現。這是一個使用可觀察序列組成異步和基於事件的程序的庫，非常適合使用WebSockets。

簡而言之，RxJS允許我們從websocket連接中偵聽新消息，然后在“X”事件發生時執行操作。這方面的一個例子可以是實時聊天應用程序。假設我們有3個人連接到我們的聊天應用程序，其中一個人發送消息。如果我們想在收到消息時在應用程序中執行某些操作，那么我們可以簡單地訂閱“新消息”事件並在觸發事件時處理該事件。

使用WebSocket

在我們的角度應用程序中實現WebSockets的最佳方法是將我們的WebSockets和事件封裝在服務中，然后在我們希望與websocket交互的任何組件中調用該服務。

創建應用程序

使用Angular CLI，通過在命令行中鍵入以下內容來創建新應用程序：

ng new websocket_tutorial

這應該創建一個新的，功能齊全的Angular應用程序，我們將在其中實現基於websocket的服務。為了確保它的工作類型：

ng serve

您應該希望看到服務器在端口4200上成功啟動。如果您在首選的Web瀏覽器中導航到localhost：4200，您應該會看到'app works！' 在瀏覽器中顯示。現在我們已經啟動並運行了我們的基本應用程序，讓我們繼續創建我們的websocket服務。

創建我們的Websocket服務

為了讓我們開始，我們將創建一個非常簡單的服務，該服務將連接到任何給定的URL並返回我們可以在其他服務/組件中訂閱的RxJS主題，以便偵聽來自連接套接字的任何傳入消息。

ng g service websocket

我們需要從新服務頂部的rxjs庫中導入*。這將使我們能夠創造既能觀察又能觀察的主體。這實際上意味着我們的主題將觀察我們的websocket以獲取任何傳入消息，並將這些消息廣播到恰好訂閱此服務的任何組件。

import { Injectable } from '@angular/core';
import {Subject, Observer, Observable} from 'rxjs';;

@Injectable()
export class WebsocketService {
  constructor() { }

  private subject: Rx.Subject<MessageEvent>;

  public connect(url): Rx.Subject<MessageEvent> {
    if (!this.subject) {
      this.subject = this.create(url);
      console.log("Successfully connected: " + url);
    } 
    return this.subject;
  }

  private create(url): Rx.Subject<MessageEvent> {
    let ws = new WebSocket(url);

    let observable = Rx.Observable.create(
    (obs: Rx.Observer<MessageEvent>) => {
        ws.onmessage = obs.next.bind(obs);
        ws.onerror = obs.error.bind(obs);
        ws.onclose = obs.complete.bind(obs);
        return ws.close.bind(ws);
    })
let observer = {
        next: (data: Object) => {
            if (ws.readyState === WebSocket.OPEN) {
                ws.send(JSON.stringify(data));
            }
        }
    }
    return Rx.Subject.create(observer, observable);
  }

}

 

接下來我們要做的是創建一個與我們的websockets接口的第二個服務，它將作為一種適配器，它將我們的websocket的輸出調整為我們可以在前端輕松使用的形式。再次使用angular-cli創建此服務：

ng g service chat

這應該在根目錄中創建一個chat.service.ts。在這個文件中，我們想要做這樣的事情：

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { WebsocketService } from './websocket.service';

const CHAT_URL = 'ws://echo.websocket.org/';

export interface Message {
    author: string,
    message: string
}

@Injectable()
export class ChatService {
    public messages: Subject<Message>;

    constructor(wsService: WebsocketService) {
        this.messages = <Subject<Message>>wsService
            .connect(CHAT_URL)
            .pipe(map((response: MessageEvent): Message => {
                let data = JSON.parse(response.data);
                return {
                    author: data.author,
                    message: data.message
                }
            }));
    }
}

 

如果是6.0以上的rxjs版本，map函數可以直接使用，代碼如下：

this.messages = <Subject<Message>>wsService
            .connect(CHAT_URL)
            .map((response: MessageEvent): Message => {
                let data = JSON.parse(response.data);
                return {
                    author: data.author,
                    message: data.message
                }
            });

 

更新我們的應用組件

最后，我們要更新我們的app.component.ts文件，以便它導入我們新創建的聊天服務，並允許我們將消息推送到此websocket：

import { Component } from '@angular/core';
import { WebsocketService } from './websocket.service';
import { ChatService } from './chat.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ WebsocketService, ChatService ]
})
export class AppComponent {

    constructor(private chatService: ChatService) {
        chatService.messages.subscribe(msg => {         
            console.log("Response from websocket: " + msg);
        });
    }

    private message = {
        author: 'tutorialedge',
        message: 'this is a test message'
    }

    sendMsg() {
        console.log('new message from client to websocket: ', this.message);
        this.chatService.messages.next(this.message);
        this.message.message = '';
    }

}

 

最后，我們需要更新我們的app組件的html頁面，以便我們可以實際使用我們在組件文件中定義的sendMsg（）函數：

<!-- app.component.html --> 

<h1>
  Angular6 WebSocket 教程
</h1>

<button (click)="sendMsg()">發送消息</button>

 

完成這些更改后，通過轉到根目錄並輸入以下命令來提供應用程序：

ng serve

您應該在瀏覽器中看到 "Angula6 WebSocket 教程" 和 “發送消息” 按鈕。

打開控制台並單擊按鈕幾次，您應該看到您的應用程序向測試websocket服務器發送和接收消息。