前言
WebSocket 是一种基于 TCP 协议的双向通信协议，一旦建立连接，客户端与服务器可以随时相互发送数据。这一技术被广泛应用于实时 Web 应用和在线游戏等领域。本文将介绍如何在 Express.js 中使用 WebSocket 实现消息订阅与发布。
基本概念
在使用 WebSocket 之前，先来介绍一些基本概念。
1. 帧 (Frame)
WebSocket 把传输的数据分割成多个帧，每个帧带有数据的一部分，同时也包含一定的控制信息，其中最常用的是 opcode (用来标识帧的类型)。
2. 握手 (Handshake)
WebSocket 的连接是通过 HTTP 的握手来建立的。客户端发送一个 HTTP 请求，服务器回复一个 HTTP 响应，其中包含一些特殊的报头信息，以此来表示请求和响应是 WebSocket 连接的开始。
3. Ping/Pong
由于 WebSocket 是一种双向通信协议，客户端和服务器都需要不断发送 ping 和 pong 来保持连接的存活状态。客户端发送 ping 帧，服务器回复 pong 帧，反之亦然。
实现步骤
1. 安装依赖
在使用 WebSocket 之前，我们需要安装依赖包 ws。在终端中执行以下命令：
npm install --save ws
2. 服务器端代码实现
在 Express.js 中使用 WebSocket 实现消息订阅与发布的过程分为两个部分：
2.1. 创建 WebSocket 服务器
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
// 处理客户端连接
});在此代码中，我们创建了一个 WebSocket 服务器并监听 8080 端口。当客户端连接到该端口时，wss 对象会调用一个回调函数来处理客户端连接。
2.2. 处理客户端消息
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(data) {
// 处理客户端发送的消息
});
});在这个回调函数中，我们可以监听客户端消息事件并进行处理。
3. 客户端代码实现
客户端代码主要有两个部分：
3.1. 建立 WebSocket 连接
const ws = new WebSocket('ws://localhost:8080');在客户端代码中，我们创建了一个 WebSocket 对象，将其连接到服务器端口，并监听连接成功后触发的 open 事件。
3.2. 客户端消息处理逻辑
ws.onmessage = function(event) {
// 处理服务器发送来的消息
};在这个事件中，我们可以监听到服务器端发送来的消息，并进行处理。
4. 示例代码
4.1. 服务器端代码：
-- -------------------- ---- -------
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -------- -------------- -
---------------- -------- -------------- -
-- ----------
---------------------- ---- ------
---------------------------- ------------ -
-- ------------------ --- --------------- -
------------------
-
---
---
---
---------------------- ------ -- --------- -- ---- -------在此示例中，我们使用 console.log 函数输出服务器端收到的消息，并将消息发送给其他客户端。
4.2. 客户端代码：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ------------
-------
------
------ ----------- ------------ --
------- -------------------------------------
--- -------------------
--------
----- -- - --- ---------------------------------
--------- - ---------- -
-- ------
---------------------- ---------- -------------
--
------------ - --------------- -
-- -----------
----- --------------- - ------------------------------------
----- -- - -----------------------------
----------------------------------------------------
--------------------------------
--
-------- ------------- -
-- --------
----- -------------- - -----------------------------------
----- ------- - ---------------------
-----------------
-------------------- - ---
-
---------
-------
-------在此示例中，我们使用 HTML5 提供的 WebSocket API 创建了一个 WebSocket 对象，并监听了 open 和 message 两个事件。当我们在输入框中输入消息并点击“发送消息”按钮时，调用 sendMessage 函数将消息发送到服务器。
总结
本文介绍了如何在 Express.js 中使用 WebSocket 实现消息订阅与发布的具体实现步骤，并分别给出了服务器端和客户端的示例代码。读者可以根据自己的需求进行开发和修改，在实际应用中能够提高应用的实时性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6657248bd3423812e4c32f2a