前言
在现代 Web 应用中，实时通信已经成为了一个必要的功能。而 WebSocket 技术则是实现实时通信的最佳选择之一。Angular 作为前端框架之一，也提供了丰富的支持来实现 WebSocket。
在本文中，我们将介绍如何使用 Angular 和 WebSocket 实现实时通信，并提供一些示例代码和指导意义。
WebSocket 简介
WebSocket 是一种基于 TCP 的协议，它提供了双向通信的能力。WebSocket 的连接使用 HTTP 协议进行握手，之后就可以使用 WebSocket 协议进行实时通信。
WebSocket 协议的特点包括：
- 双向通信：WebSocket 支持客户端和服务器之间的双向通信，可以实现实时通信。
- 低延迟：WebSocket 的通信延迟非常低，可以实现实时性要求较高的应用。
- 长连接：WebSocket 的连接可以保持长时间打开，可以减少连接的建立和关闭带来的开销。
- 跨域支持：WebSocket 支持跨域通信，可以在不同域名下进行通信。
Angular 中的 WebSocket
Angular 中提供了 WebSocketSubject 类来支持 WebSocket。使用 WebSocketSubject 可以方便地处理 WebSocket 的连接和消息收发。
下面是一个使用 WebSocketSubject 的示例：
// javascriptcn.com 代码示例
import { WebSocketSubject } from 'rxjs/webSocket';
const url = 'ws://localhost:8080'; // WebSocket 服务器地址
const ws = new WebSocketSubject(url);
ws.subscribe(
// 处理接收到的消息
(message) => console.log('Received: ' + message),
// 处理连接错误
(error) => console.error(error),
// 处理连接关闭
() => console.log('Connection closed')
);
// 发送消息
ws.next('Hello, WebSocket!');在上面的示例中，我们创建了一个 WebSocketSubject 对象，并使用 subscribe 方法来处理接收到的消息、连接错误和连接关闭事件。使用 next 方法可以发送消息。
Angular 中的实时通信应用
下面是一个使用 Angular 和 WebSocket 实现实时通信的示例应用。
后端实现
首先，我们需要实现一个 WebSocket 服务器来处理客户端的连接和消息收发。在本示例中，我们使用 Node.js 和 ws 库来实现 WebSocket 服务器。
// javascriptcn.com 代码示例
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('Client connected');
// 处理接收到的消息
ws.on('message', (message) => {
console.log('Received: ' + message);
// 广播消息给所有客户端
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
// 处理连接关闭
ws.on('close', () => {
console.log('Client disconnected');
});
});在上面的代码中，我们创建了一个 WebSocket 服务器，并使用 on 方法来处理客户端的连接、接收到的消息和连接关闭事件。在接收到消息后，我们使用 wss.clients 来获取所有连接的客户端，并使用 send 方法广播消息给所有客户端。
前端实现
接下来，我们使用 Angular 来实现前端应用。在本示例中，我们将创建一个简单的聊天室应用，用户可以在其中发送消息并接收其他用户的消息。
首先，我们需要创建一个 Angular 应用，并添加 rxjs 和 @types/ws 依赖。
ng new websocket-chat cd websocket-chat npm install rxjs @types/ws --save
接下来，我们创建一个 WebSocketService 服务来处理 WebSocket 的连接和消息收发。
// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';
import { WebSocketSubject } from 'rxjs/webSocket';
@Injectable({
providedIn: 'root'
})
export class WebSocketService {
private ws: WebSocketSubject<string>;
constructor() {}
connect(url: string): void {
this.ws = new WebSocketSubject(url);
}
send(message: string): void {
this.ws.next(message);
}
onMessage(): Observable<string> {
return this.ws.asObservable();
}
onClose(): Observable<any> {
return this.ws.asObservable().pipe(filter(event => !event));
}
}在上面的代码中，我们创建了一个 WebSocketService 服务，并使用 WebSocketSubject 来处理 WebSocket 的连接和消息收发。使用 connect 方法可以连接到指定的 WebSocket 服务器，使用 send 方法可以发送消息，使用 onMessage 方法可以订阅收到的消息，使用 onClose 方法可以订阅连接关闭事件。
接下来，我们创建一个 ChatComponent 组件来展示聊天室界面，并使用 WebSocketService 来处理实时通信。
// javascriptcn.com 代码示例
import { Component, OnInit, OnDestroy } from '@angular/core';
import { WebSocketService } from '../websocket.service';
import { Observable, Subscription } from 'rxjs';
@Component({
selector: 'app-chat',
templateUrl: './chat.component.html',
styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit, OnDestroy {
messages: string[] = [];
message: string = '';
private messageSubscription: Subscription;
private closeSubscription: Subscription;
constructor(private wsService: WebSocketService) {}
ngOnInit(): void {
this.wsService.connect('ws://localhost:8080');
this.messageSubscription = this.wsService.onMessage().subscribe(
(message) => this.messages.push(message),
(error) => console.error(error)
);
this.closeSubscription = this.wsService.onClose().subscribe(
() => console.log('Connection closed'),
(error) => console.error(error)
);
}
ngOnDestroy(): void {
this.messageSubscription.unsubscribe();
this.closeSubscription.unsubscribe();
}
sendMessage(): void {
this.wsService.send(this.message);
this.message = '';
}
}在上面的代码中，我们创建了一个 ChatComponent 组件，并使用 WebSocketService 来处理实时通信。使用 ngOnInit 方法来连接 WebSocket 服务器并订阅收到的消息和连接关闭事件，使用 ngOnDestroy 方法来取消订阅。使用 sendMessage 方法来发送消息。
最后，我们创建一个简单的聊天室界面来展示聊天记录和发送消息的表单。
<div class="messages">
<div *ngFor="let message of messages">{{ message }}</div>
</div>
<form (ngSubmit)="sendMessage()">
<input type="text" [(ngModel)]="message" placeholder="Type your message here...">
<button type="submit">Send</button>
</form>在上面的代码中，我们使用 *ngFor 指令来展示聊天记录，使用 [(ngModel)] 指令来双向绑定发送消息的表单。
总结
在本文中，我们介绍了如何使用 Angular 和 WebSocket 实现实时通信，并提供了一个示例应用。使用 Angular 和 WebSocket 可以方便地实现实时通信功能，可以应用于聊天室、在线游戏、实时数据展示等场景。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6564406dd2f5e1655ddab235