Angular 2（十）： websocket

概览

  • 服务器端的socket和客户端的服务中的socket保持长连接，进行数据交换；
  • 客户端中的服务（socket）作为”被观察者”，客户端中的组件作为观察者；
  • 被观察者通过依赖注入，被注入到组件中；

组件订阅socket产生的流，当流发生变化时，组件就会产生相应的事务。

websocket.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export class WebSocketService{
    ws: WebSocket;
    
    createObservableSocket(url:string):Observable<any>{
        this.ws = new WebSocket(url);
        
        return new Observable(observer=>{
            //指定什么时候派发数据:当后端返回数据时
            this.ws.onmessage = (event)=>observer.next(event.data);
            
            //指定错误发生时如何处理
            this.ws.onerror = (evevt)=>observer.error(event);
            
            //指定关闭时如何处理
            this.ws.onclose = (event)=>observer.complete();
        })
    };
    
    sendMessage(message:string){
        this.ws.send(message);  //向服务器发送数据
    };
}

component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
constructor(private wsServer: WebSocketService){}
ngOnInit(){
    this.wsServer.createObservableSocket()
        .subscript(
            data=>console.log(data);    //当流发送过来消息时
            err=>console.log(err);
            ()=>console.log('流已经结束');
        )
};
sendMessageToServer(){
    this.wsServer.sendMessage(‘这是从组件向服务器发送的信息!’);
};