在Angular中使用WebSocket进行通信

WebSocket是H5中的一个新通讯标准，与传统的HTTP（通讯）模型相比，WebSocket支持长连接，提供双向的数据通讯，为需要支持实时或准实时通讯的应用(如：股票，消息推送等)提供了非常强大的技术手段。本文提供的就是在Angular中使用WebSocket技术的一个简要的指引。

建立一个服务(Service)封装WebSocket

在Angular中，我们可以利用服务(Service)构件来封装对WebSocket的调用，方便复用。
首先，用命令行工具(angular CLI)建立服务(Service), 在项目根目录，运行:

1	ng g service services/WebSocket

系统提示

1 2	CREATE src/app/services/web-socket.service.spec.ts (349 bytes) CREATE src/app/services/web-socket.service.ts (138 bytes)

打开web-socket.service.ts文件，添加以下内容：

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

@Injectable({
  providedIn: 'root'
})
export class WebSocketService {

  ws: WebSocket;

  constructor() { }

  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 = (event) => observer.next(event);
        this.ws.onclose = (event) => observer.complete();
      }
    )
  }

  sendMessage(message: string) {
    this.ws.send(message);
  }

  closeWebSocket() {
    if (this.ws) {
      this.ws.close();
    }
  }
}

从以上代码可以看到，我们在服务类内部声明了一个 WebSocket 类型的变量: ws, 然后我们通过 rxjs 提供的 Observable 类，将 WebSocket 的生命周期方法（onmessage, onerror, onclose)暴露出去。这样，使用服务的代码就可以通过订阅( subscribe )的方式把事件处理函数关联起来。

调用WebSocketService服务类

在（页面）组件中，如果想要使用 WebSocket 服务，只需要注入(DI) WebSocketService 这个服务类，再调用 createObservableSocket 方法就可以和服务端的WebSocket接口进行通讯了。
注意: 在默认情况下，服务注入(DI)时会使用单实例模式，如果你需要产生多个实例避免可能的数据冲突，请参考：如何理解Angular框架依赖注入 )

使用 WebSocketService 的样例代码如下：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { WebSocketService } from '../service/web-socket.service';

@Component({
  selector: 'app-websocket',
  templateUrl: './websocket.component.html',
  styleUrls: ['./websocket.component.css']
})
export class WebsocketComponent implements OnInit, OnDestroy {

  constructor(private wsService: WebSocketService) { }

  ngOnInit() {
    this.wsService.createObservableSocket('ws://<用你的后台WebSocket地址提供>')
      .subscribe(
        data => console.log(data),
        err => console.log(err),
        () => console.log('流已经结束')
      );
  }

  ngOnDestroy() {
    this.wsService.closeWebSocket();
  }
  sendMessageToserver() {
    this.wsService.sendMessage('Hello from client');
  }

}