WebSocket 是一种新的通信协议，它可以在客户端和服务器之间建立持久性的连接，实现即时通信。在实时性较高的应用场景中使用 WebSocket 可以取代传统的轮询方式，节省带宽、降低延迟，提高应用的实时性和用户体验。
而 Node.js 是一个基于 V8 引擎的 JavaScript 运行环境，它具有事件驱动、非阻塞 I/O 等特点，非常适合处理高并发、实时性较高的应用。因此，使用 WebSocket 技术结合 Node.js，可以轻松地实现一个高效、稳定、可扩展的聊天室。
本篇文章将详细介绍如何使用 Node.js 实现 WebSocket 聊天室，包括 WebSocket 基础知识、实现 WebSocket 服务器、搭建聊天室、以及代码示例和注意事项等。
WebSocket 基础知识
WebSocket 是一种基于 TCP 的协议，它和 HTTP 协议的区别在于，WebSocket 在客户端和服务器之间建立的连接是持久性的，而且客户端和服务器之间可以双向传输数据，而不是一单就断。
客户端和服务器在建立连接时，首先要经过 HTTP 握手交换（Handshake）。客户端通过向服务器发送一个 HTTP 请求，并附上 Upgrade 头信息，告诉服务器它想要升级到 WebSocket 协议。服务器收到请求后，如果同意升级，就回复一个带有 Upgrade 头信息的 HTTP 响应，告诉客户端可以进行 WebSocket 通信了。
WebSocket 的通信过程比较简单，客户端和服务器之间可以双向传输消息，而且数据是经过封装的二进制数据，数据包头很小，比较轻量级。应用场景非常广泛，可以用于实时聊天、实时游戏、实时通知等场景。
实现 WebSocket 服务器
在 Node.js 中，可以使用第三方库 ws 实现 WebSocket 服务器。
安装依赖
在项目根目录下通过命令行工具安装 ws 包：
npm install --save ws
创建 WebSocket 服务器
在项目中创建一个 app.js 文件，并引入 ws 包：
const WebSocket = require('ws');创建 WebSocket 服务器：
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('client connected');
});代码解释：
WebSocket.Server是 ws 包提供的可用于创建 WebSocket 服务器的类，通过new关键字来创建。port参数指定 WebSocket 服务器监听的端口号。这里设置为8080。connection事件是 WebSocket 服务器监听客户端连接的事件。这里使用箭头函数来监听该事件。ws对象是 WebSocket 服务器和客户端之间建立的连接对象，包括客户端和服务器之间双向传输数据的方法和事件。console.log用于在控制台输出信息。
运行 WebSocket 服务器
在命令行工具中输入下面的命令，启动 WebSocket 服务器：
node app.js
WebSocket 服务器启动成功后，在浏览器中访问 http://localhost:8080 即可看到 WebSocket 服务器输出的信息。
搭建聊天室
搭建聊天室的过程分为以下几个步骤，需要先搭建一个基础的 WebSocket 服务器，然后编写消息传输逻辑和前端页面。
实现消息传输逻辑
WebSocket 简单通信非常容易实现。假设聊天室内有两个用户，用户 A 和用户 B。当用户 A 发送一条消息时，服务器会自动将该消息广播给所有在线的用户，包括用户 A 本身。
-- -------------------- ---- -------
-------------------- ---- -- -
------------------- ------------
---------------- --------- -- -
--------------------- -------- -------------
-- ---------
---------------------------- -- -
-- ------------------ --- --------------- -
---------------------
-
---
---
---代码解释：
ws.on('message', callback)用于监听客户端发送过来的消息。当客户端发送消息时，回调函数callback会被执行，并且message参数代表客户端发送的消息内容。wss.clients是一个Set类型的集合，包含了所有连接到 WebSocket 服务器的客户端，可以使用forEach方法遍历所有在线客户端。client.readyState判断客户端的连接状态，检查客户端是否已经准备好通过 send 方法发送消息。只有 readyState 状态为WebSocket.OPEN的客户端才能发送消息。client.send用于发送消息到指定的客户端。这里使用广播方式将消息发送给所有在线用户。
编写前端页面
在前端页面中，需要使用 HTML、CSS 和 JavaScript 实现一个简单的聊天室界面，同时通过 WebSocket 连接到后端 WebSocket 服务器，实现实时消息传输。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- -----------
-------
---------- -
------- ---- -----
-------- -----
------ ------
------- ------
------- --- ----- -----
--------- -----
-
-------- -
-------------- ----
-
--------
-------
------
---- ------------------------
------ ---------- ----------- --------------------
------- ---------------------
--------
----- --------- - -------------------------------------
----- ----- - ---------------------------------
----- ---- - --------------------------------
----- -- - --- ---------------------------------
--------- - -- -- ---------------------- -- ---------
------------------------------ -- -- -
----- ------- - -------------------
-- --------- -
-----------------
----------- - ---
-
---
------------------------------ ------- -- -
----- ------- - -----------
----- -- - ------------------------------
------------ - ----------
-------------- - --------
--------------------------
------------------- - -----------------------
---
---------
-------
-------代码解释：
container是一个<div>标签，用于显示聊天室内的消息，使用 CSS 样式实现滚动条。input和send分别是一个<input>和<button>标签，用于输入消息和发送消息。const ws = new WebSocket('ws://localhost:8080')创建 WebSocket 实例，并指定连接的地址和端口号。ws.onopen表示 WebSocket 连接已经建立成功，并打印一条提示信息。send.addEventListener('click', callback)用于监听发送按钮的点击事件，当用户点击时，回调函数callback会被执行，用于获取输入框中的消息并发送到后端 WebSocket 服务器。ws.addEventListener('message', callback)用于监听通过 WebSocket 服务器发送过来的消息，当收到消息时，回调函数callback会被执行，用于显示消息到聊天室界面中。
运行项目
在命令行工具中输入下面的命令，启动 Node.js 服务器：
node app.js
在浏览器中打开 http://localhost:8080，即可看到聊天室界面。在两个不同的浏览器窗口中打开该页面，即可实现即时聊天的功能。
注意事项
- 消息传输过程中可能会出现如下几种情况，需要做好相应的错误处理：
客户端断开连接时，需要在服务器端移除该客户端对象。
消息传输过程中发生异常时，需要捕获异常并作出处理。
- 在实际应用中，由于 WebSocket 建立的连接是持久性的，会对服务器造成很大的负载。因此需要考虑如何优化 WebSocket 程序的性能，包括采用负载均衡、集群等技术。
总结
本篇文章详细介绍了如何使用 Node.js 和 WebSocket 实现聊天室的基础功能，并提供了相应的代码示例和注意事项。WebSocket 技术非常强大，其应用场景也非常广泛，值得前端开发人员深入学习和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645721d8968c7c53b09f59a0