WebSocket 是一种全双工通信协议，它可以在客户端和服务端之间建立起持久化的连接，实现实时的双向通信。在前端开发中，WebSocket 被广泛应用于实时通知、即时聊天、在线游戏等场景。本文将介绍如何在 Angular 中使用 WebSocket。
WebSocket API
在使用 WebSocket 之前，我们需要了解 WebSocket API 的使用方法。WebSocket API 是由浏览器提供的 JavaScript API，它提供了与 WebSocket 相关的一系列接口。以下是常用接口：
- WebSocket：WebSocket 的构造函数，用于创建一个 WebSocket 实例。
- WebSocket.onopen：WebSocket 实例的打开事件处理函数，当连接建立时触发。
- WebSocket.onmessage：WebSocket 实例的消息事件处理函数，当接收到消息时触发。
- WebSocket.onerror：WebSocket 实例的错误事件处理函数，当发生错误时触发。
- WebSocket.onclose：WebSocket 实例的关闭事件处理函数，当连接关闭时触发。
- WebSocket.send：WebSocket 实例的发送数据方法，将数据发送给对方。
创建 WebSocket
通过 WebSocket 构造函数可以创建一个 WebSocket 实例，其参数有两个：
- url：WebSocket 服务器的地址。
- protocols：一个可选的协议列表，用于指定客户端与服务器通信时用到的协议。
let ws = new WebSocket('ws://localhost:8080');监听事件
WebSocket 实例提供了一些事件，可以通过在实例上注册事件处理函数来监听这些事件。例如，我们可以通过监听 onopen 事件来在连接建立成功后向服务器发送一条消息：
ws.onopen = () => {
ws.send('Hello, WebSocket!');
};发送数据
使用 WebSocket 实例的 send 方法可以向对方发送数据。下面的代码示例中，当用户在输入框中按下回车键时，会将输入的消息发送给服务器。
inputHandler(event: KeyboardEvent) {
if (event.code === 'Enter') {
this.ws.send(this.message);
this.message = '';
}
}关闭连接
通过调用 WebSocket 实例的 close 方法可以关闭连接，其参数有两个：
- code：一个数值，表示关闭的状态码。
- reason：一个字符串，表示关闭的原因。
this.ws.close(1000);
在 Angular 中使用 WebSocket
在 Angular 中使用 WebSocket 有两种方法：一种是直接使用浏览器提供的 WebSocket API，另一种是使用第三方库。
使用浏览器提供的 WebSocket API
在 Angular 组件中使用 WebSocket 需要引入浏览器提供的 WebSocket API。下面是一个简单的聊天室示例：
// javascriptcn.com 代码示例
import { Component } from '@angular/core';
@Component({
selector: 'app-chat',
template: `
<div *ngFor="let message of messages">{{message}}</div>
<input [(ngModel)]="message" (keydown.enter)="inputHandler($event)">
`
})
export class ChatComponent {
private ws: WebSocket;
private messages: string[] = [];
private message: string = '';
ngOnInit() {
this.ws = new WebSocket('ws://localhost:8080');
this.ws.onopen = () => {
console.log('Connected to WebSocket server');
};
this.ws.onmessage = (event) => {
console.log('Received message:', event.data);
this.messages.push(event.data);
};
this.ws.onclose = () => {
console.log('Disconnected from WebSocket server');
};
this.ws.onerror = (error) => {
console.log('WebSocket error:', error);
};
}
inputHandler(event: KeyboardEvent) {
if (event.code === 'Enter') {
this.ws.send(this.message);
this.message = '';
}
}
ngOnDestroy() {
this.ws.close();
}
}在这个示例中，我们在组件的 ngOnInit 生命周期钩子中创建了一个 WebSocket 实例，并监听了一些事件。处理器中将消息保存到 messages 数组中，并在组件的模板中显示。当用户在输入框中按下回车键时，会将输入的消息发送给服务器。
使用第三方库
除了使用浏览器提供的 WebSocket API 外，我们还可以使用第三方库来简化 WebSocket 的使用。在 Angular 中，较为流行的 WebSocket 库有 ngx-websocket 和 angular-websocket。
下面是一个使用 ngx-websocket 的示例：
// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { WebSocketSubject } from 'ngx-websocket';
@Component({
selector: 'app-chat',
template: `
<div *ngFor="let message of messages">{{message}}</div>
<input [(ngModel)]="message" (keydown.enter)="inputHandler($event)">
`
})
export class ChatComponent {
private socket$: WebSocketSubject<string>;
private messages: string[] = [];
private message: string = '';
constructor() {
this.socket$ = new WebSocketSubject<string>('ws://localhost:8080');
this.socket$.subscribe(
(message) => {
console.log('Received message:', message);
this.messages.push(message);
},
(error) => {
console.log('WebSocket error:', error);
},
() => {
console.log('WebSocket connection closed');
}
);
}
inputHandler(event: KeyboardEvent) {
if (event.code === 'Enter') {
this.socket$.next(this.message);
this.message = '';
}
}
ngOnDestroy() {
this.socket$.complete();
}
}在这个示例中，我们引入了 ngx-websocket 库并使用 WebSocketSubject 类来封装 WebSocket 实例。订阅器中使用 next 方法来发送消息，这也是该类的特点之一。ngx-websocket 还提供了更多的特性，例如 WebSocketService 和 WebSocketConfig 等，以便更好地控制 WebSocket 实例。
总结
WebSocket 是一种用于实时双向通信的协议，在前端开发中被广泛应用于实时通知、即时聊天、在线游戏等场景。在 Angular 中，我们可以使用浏览器提供的 WebSocket API 或者第三方库来使用 WebSocket。借助于 TypeScript 和 Angular 的优秀特性，我们可以更方便地使用 WebSocket，并且让代码更加可读性强、可维护性高、可扩展性强。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6548ab507d4982a6eb2f093c