如何使用 Node.js 完成基于 WebSocket 的实时通信？-JavaScript中文网-JavaScript教程资源分享门户

引言

WebSocket 是一种基于 TCP 协议的轻量级网络通信协议，它可以在客户端和服务端之间建立连接，实现全双工通信。在前端开发中，往往需要实现实时通信的功能，如在线聊天、实时推送等，这时候使用 WebSocket 就是最佳选择。

本文将介绍使用 Node.js 实现基于 WebSocket 的实时通信的方法，详细讨论 WebSocket 的协议结构、如何使用 Node.js 构建 WebSocket 服务器、如何将 WebSocket 集成到前端应用中等内容。

WebSocket 协议结构

WebSocket 协议结构是非常简单的，它的请求和响应都是一段特定格式的字符串，称之为帧。WebSocket 协议定义了七种帧类型，分别是：

Continuation Frame：用于后续的帧，它是数据帧的一个拆分包；
Text Frame：文本帧；
Binary Frame：二进制帧；
Close Frame：关闭帧；
Ping Frame：ping 帧，用于检测连接是否还存活；
Pong Frame：pong 帧，响应 ping 帧；
Reserved Frame：保留帧，暂未使用。

WebSocket 协议每一帧都由一个固定的头部和可选的尾部组成，如下图所示：

其中，FIN 是一个 1 位的二进制标识符，表示这是一个结束帧还是还有其他帧，OPCODE 是一个 4 位二进制码，表示帧的类型，MASK 和 PAYLOAD LEN 分别表示数据是否进行了掩码处理和负载数据的长度，MASK KEY 是一个 4 字节的掩码，最后是负载数据。

构建 WebSocket 服务器

要实现基于 WebSocket 的实时通信，需要先构建一个 WebSocket 服务器。下面是使用 Node.js 构建 WebSocket 服务器的步骤：

安装 ws 库。
```
npm install ws
```

创建服务器，并监听 WebSocket 连接。

-- -------------------- ---- -------
----- --------- - --------------

----- ------ - --- ------------------ ----- ---- ---

----------------------- -------- -- -
  ------------------- ------------
  
  -- -----------
---

在连接成功后，可以进行一些初始化操作，如记录用户信息、发送欢迎消息等。

接收和处理消息。

在 WebSocket 连接建立之后，可以使用 socket.on('message', (message) => {}) 事件监听客户端发送的数据。在收到消息后，可以进行相应的处理操作。
```
socket.on('message', (message) => {
  console.log(`Received message: ${message}`);
  
  // 对收到的消息进行处理后回传等操作
});
```
发送消息。

WebSocket 服务器可以使用 socket.send(message) 方法向客户端发送消息。
```
socket.send('Hello, client!');
```
关闭连接。

WebSocket 连接可以使用 socket.close() 方法关闭。
```
socket.close();
```
也可以在客户端主动关闭连接时进行相应的处理。
```
socket.on('close', () => {
  console.log('Client disconnected');
});
```

在前端应用中集成 WebSocket

使用 Node.js 构建 WebSocket 服务器后，需要在前端应用中集成 WebSocket。下面是 WebSocket 在前端应用中使用的步骤：

创建 WebSocket 连接。
```
const socket = new WebSocket('ws://localhost:8080');
```
在创建 WebSocket 连接时，需要传入相应的服务器地址和端口。
发送消息。

WebSocket 可以使用 socket.send 方法向服务器发送消息。
```
socket.send('Hello, server!');
```
接收消息。

WebSocket 可以使用 socket.onmessage 事件监听服务器发送的消息。
```
socket.onmessage = (event) => {
  console.log(`Received message: ${event.data}`);
};
```
关闭连接。

WebSocket 可以使用 socket.close() 方法关闭连接。
```
socket.close();
```

示例代码

WebSocket 服务器

-- -------------------- ---- -------
----- --------- - --------------

----- ------ - --- ------------------ ----- ---- ---

----------------------- -------- -- -
  ------------------- ------------

  -------------------- -- --- --------- ----------

  -------------------- --------- -- -
    --------------------- -------- -------------

    ---------------- ----- -------------
  ---

  ------------------ -- -- -
    ------------------- ---------------
  ---
---

WebSocket 客户端

-- -------------------- ---- -------
----- ------ - --- ---------------------------------

------------- - -- -- -
  ---------------------- -- --- --------- ---------

  ------------------ ---- --- ---------
--

---------------- - ------- -- -
  --------------------- -------- ----------------
--

-------------- - -- -- -
  ------------------------- ---- --- --------- ---------
--

结论

WebSocket 是一种实现实时通信的重要协议，它可以在客户端和服务端之间建立全双工通信。使用 Node.js 构建 WebSocket 服务器非常简单，只需要使用 ws 库并监听相应的事件即可。在前端应用中使用 WebSocket 也非常简单，只需要创建 WebSocket 连接并监听相应的事件即可。使用 WebSocket 能够大大简化实现实时通信的难度，提升用户交互的体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66fa789c44713626014c98a2