在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文件,添加以下内容:

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');
}

}

本文标题:在Angular中使用WebSocket进行通信

文章作者:梅老师

发布时间:2019年06月21日 - 21:06

最后更新:2020年05月28日 - 16:05

原始链接:https://www.mls-tech.info/web/angular/angular-websocket/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。