之前用的是好不容易找到的一個日本人寫的Angular4的WebSockert組件，名字叫simple-ng-websocket凡涩，但是據(jù)有人說在剛出的Angular5中這個組件不能正常工作昆烁，所以就又調(diào)研其它替代方案，后來發(fā)現(xiàn)Angular4+中可以直接使用Websocket，并不需要另外引入其它組件蛾默。本文幾乎抄自《前端 - Angular2與websocket結(jié)合使用》。
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連接捉貌，調(diào)用websocket.service.ts的a01函數(shù)即可支鸡。
// this.a01 = function() {
// ws.close();
// console.log("websocket01已經(jīng)斷開連接");
// };
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);
}
}
在業(yè)務(wù)類中的構(gòu)造器中將webSocket實例傳入，另外在app.module.ts中將其寫入providers即可趁窃。
