随着 Web 应用不断发展，实时通信功能也越来越受到人们的重视。WebSocket 正是一个能够实现客户端和服务器端实时通信的技术，它可以让服务器端向客户端推送消息，从而实现实时更新数据的功能。
本文将详细介绍如何使用 Node.js 实现 WebSocket 服务器端推送功能。我们将分步骤进行讲解，并提供详细的示例代码，帮助读者深入理解。本文适合有一定 Node.js 基础，但没有使用过 WebSocket 技术的读者阅读。
什么是 WebSocket？
WebSocket 是一种网络通信协议，类似于 HTTP 协议，但它是一种双向通信协议。在 WebSocket 中，客户端和服务器端建立了一条持久连接，从而可以进行双向通信，实现了实时更新数据的功能。
与 HTTP 每次请求都需要新建连接不同，WebSocket 可以在服务器端主动向客户端发送消息，而不需要客户端发送请求。这样，我们就可以将客户端的数据更新推送给服务器端，从而实现实时更新数据的功能。
准备工作
在开始实现 WebSocket 服务器端推送功能之前，我们需要进行一些准备工作，如下：
安装 Node.js：在官网下载并安装 Node.js 的最新版。
安装 WebSocket 相关依赖：在控制台中输入以下命令安装所需依赖包：
npm install ws --save
实现 WebSocket 服务器端推送功能
接下来，我们将分步骤介绍如何使用 Node.js 实现 WebSocket 服务器端推送功能。
1. 引入 WebSocket 模块
在 Node.js 中，我们可以使用 WebSocket 模块来实现 WebSocket 功能。我们需要在代码中引入此模块，如下：
const WebSocket = require('ws');
2. 创建 WebSocket 服务器
创建 WebSocket 服务器需要使用 ws.Server 类，我们需要进行如下配置：
const server = new WebSocket.Server({ port: 8080 // 指定监听的端口 });
3. 监听连接事件
接下来，我们需要监听客户端的连接事件，并为每个连接创建一个 WebSocket 实例。我们使用 server.on() 方法进行监听，代码如下：
server.on('connection', (ws, req) => { // ... });
在每个连接事件中，我们需要传递两个参数：ws 和 req，分别表示 WebSocket 实例和 HTTP 请求实例。在此事件中，我们可以执行一些操作，如打印一些调试信息、记录连接数等。
4. 监听消息事件
当客户端连接成功后，我们可以向客户端发送消息。在此之前，我们需要监听客户端发送的消息，代码如下：
ws.on('message', message => { // ... });
在 message 事件中我们可以获取到客户端发送的数据。一般情况下，我们会将客户端发送的数据广播给其它客户端，以达到实时更新数据的效果。在 WebSocket 中，消息的发送可以使用 ws.send() 方法，代码如下：
server.clients.forEach(client => { if (client.readyState === WebSocket.OPEN) { client.send(message); } });
在上述代码中，server.clients 表示当前所有客户端的 WebSocket 实例集合，我们使用 forEach() 方法遍历集合中的实例。每个 WebSocket 实例都包含 readyState 属性，其值表示连接状态。当连接状态为 WebSocket.OPEN 时，表示连接成功，我们就可以向该客户端发送消息。
5. 关闭连接
当客户端断开连接时，我们也需要进行相应的处理。我们可以监听 close 事件，代码如下：
ws.on('close', () => { // ... });
在 close 事件中，我们一般会执行一些操作，如打印一些调试信息、记录连接数等。
完整代码如下：
-- -------------------- ---- ------- ----- --------- - -------------- ----- ------ - --- ------------------ ----- ---- --- ----------------------- ---- ---- -- - -------------- --- ---------- --------------- ---------------- ------- -- - --------------------- ------- -- ------------- ----------------------------- -- - -- ------------------ --- --------------- - --------------------- - --- --- -------------- -- -- - ----------------- ------ ---------------- --- ---展开代码
测试 WebSocket 服务器端推送功能
在代码编写完成后，我们可以使用浏览器进行测试。我们可以使用以下代码在客户端发起连接请求（注意：需要先建立一个 HTTP 服务器，代码如下）：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------- ------------ ------- ------ -------- ----- -- - --- --------------------------------- --------- - -- -- - -------------- ------------- -- ------------ - ----- -- - --------------------- ------- -- ---------------- -- ---------- - -- -- - ------------------------- ---- --------- ---------- -- --------- ------- -------展开代码
在客户端连接成功后，我们就可以向服务器端发送消息并进行测试了。我们修改服务器端代码，添加一些提示信息，如下：
-- -------------------- ---- ------- ----- --------- - -------------- ----- ------ - --- ------------------ ----- ---- --- --- --------------- - -- ----------------------- ---- ---- -- - ------------------ -------------- --- ---------- ------------ ----- ---------- ------ --------------------- ---------------- ------- -- - --------------------- ------- -- ------------- ----------------------------- -- - -- ------------------ --- --------------- - --------------------- - --- --- -------------- -- -- - ------------------ ----------------- ------ ------------- ----- ---------- ------ --------------------- --- ---展开代码
启动服务器后，访问客户端页面，我们就可以在控制台中看到接收到的消息了：
A new connection established. Total connection count: 1 Received message => Hello WebSocket!
在客户端发送更多消息后，控制台中将会有多条记录。我们还可以使用多个客户端进行测试，观察数据更新情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca60f8e46428fe9e276fb2
