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文件,添加以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
| 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 的样例代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| 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'); }
}
|