NestJS 使用 Websocket 时常见的问题与解决之道

前端

2023-03-28 17:22:31

掌握 NestJS 中 Websocket 的常见难题

常见问题及其解决方法

连接无法建立

遇到连接无法建立的问题时，通常是由于以下原因：

服务器未正确配置 Websocket： 检查服务器是否已配置好 Websocket，并按照官方文档的指南进行操作。
客户端未正确实现 Websocket 协议： 确保客户端已正确实现 Websocket 协议，遵守其规范。
网络连接问题： 排除网络连接是否存在问题，检查防火墙设置或与网络管理员联系。

消息发送失败

在发送消息时，如果遇到错误，请考虑以下解决方案：

TypeError: Cannot read properties of undefined (reading 'send')： 检查客户端是否已正确初始化 Websocket 连接，并按照文档中提供的步骤进行操作。
Error: WebSocket is not open: readyState 3： 服务器可能未正确关闭 Websocket 连接，导致客户端无法发送消息。检查服务器的 Websocket 实现。

消息接收失败

在接收消息时出现问题时，尝试以下方法：

TypeError: Cannot read properties of undefined (reading 'on')： 检查客户端是否已正确监听 Websocket 连接的事件。确保已注册适当的事件监听器。
Error: WebSocket is not open: readyState 3： 服务器可能未正确关闭 Websocket 连接，导致客户端无法接收消息。检查服务器的 Websocket 实现。

使用 NestJS 构建 Websocket 应用

Websocket 在 NestJS 中的应用场景广泛，包括：

实时聊天： 创建允许用户实时发送和接收消息的聊天应用程序。
游戏： 开发允许玩家在线实时互动和竞技的游戏。
数据流： 构建数据流应用程序，让客户端实时接收服务器推送的数据。

代码示例

// 服务器端 NestJS Websocket Controller
@Controller()
export class WebsocketController {
  @WebSocket('/')
  handleConnection(client: Socket, payload: any) {
    console.log('Client connected: ', payload.id);
    client.on('message', (message) => {
      console.log('Received message: ', message);
      client.send('Hello from server!');
    });
    client.on('close', () => {
      console.log('Client disconnected: ', payload.id);
    });
  }
}

// 客户端 Websocket 实现
const socket = new WebSocket('ws://localhost:3000');

socket.onopen = () => {
  console.log('Connected to server!');
};

socket.onmessage = (event) => {
  console.log('Received message from server: ', event.data);
};

socket.onclose = () => {
  console.log('Disconnected from server!');
};

socket.send('Hello from client!');