之前用的是好不容易找到的一個日本人寫的Angular4的WebSockert組件，名字叫simple-ng-websocket，但是據有人說在剛出的Angular5中這個組件不能正常工作，所以就又調研其它替代方案，后來發現Angular4+中可以直接使用Websocket，并不需要另外引入其它組件。本文幾乎抄自《前端 - Angular2與websocket結合使用》。

from chart.service.ts:

import { Injectable } from '@angular/core';
import { WebSocketService } from './websocket.service';
import 'rxjs/add/operator/map';
@Injectable()
export class ChatService{
    public ddd=[]; //收集websocket傳遞過來的值
    constructor(
        private wsService01: WebSocketService) {}
    onAAA(a01):void{
        const URL01 = 'ws://--websocket地址--jsessionid=?id='+a01;
        const NODEID01 = '{id:' + a01 + '}';
        this.wsService01
        .create(URL01,NODEID01)
        .map((response: MessageEvent): string => {        
            let data = response.data;        
            return data;      
        })      
        .subscribe(msg => {        
            let data=eval('('+msg+')');        
            this.ddd.push(data);      
        });  
    }
}

from websocket.service.ts:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { Observer } from "rxjs/Observer";
@Injectable()
export class WebSocketService {
    public a01: any;
    public create(url: string, nodeid: string): Subject<MessageEvent> {
        let ws = new WebSocket(url);
        ws.onopen = function () {
            ws.send(nodeid);
        };
        // 如果想要斷開websocket連接，調用websocket.service.ts的a01函數即可。
        // this.a01 = function() {
        //   ws.close();
        //   console.log("websocket01已經斷開連接");
        // };
        let observable = Observable.create(
            (obs: 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(data);
                }
            }
        };
        return Subject.create(observer, observable);
    }
}

在業務類中的構造器中將webSocket實例傳入，另外在app.module.ts中將其寫入providers即可。

參考資料：

• 前端 - Angular2與websocket結合使用