介绍
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，用于客户端和服务器之间的实时数据传输。Node.js 作为一种服务器端的 JavaScript 运行时环境，可以很方便地使用 WebSocket 来创建实时的网络应用程序，例如聊天室。
在这篇文章中，我们将介绍如何使用 Node.js 中的 WebSocket 模块来创建一个简单的聊天室。我们将探讨 WebSocket 基础知识并提供一个实用的示例代码。
需求分析
聊天室通常具有以下功能：
- 用户能够进入聊天室并登录自己的用户名；
- 用户可以发送消息给其他用户；
- 聊天记录以及在线用户列表需要即时刷新；
- 用户可以退出聊天室。
基于以上需求，我们需要使用 WebSocket 来建立客户端和服务器之间的实时通信，并使用 Node.js 作为服务器端运行环境。
实现思路
首先，我们需要了解 WebSocket 的基本概念和工作原理：
基本概念
WebSocket 是一种协议，它使用 RFC 6455 标准进行通信。它使用一个长时间打开的 TCP 连接来提供双向数据传输，使服务器可以发送数据到客户端，反之亦然。
工作原理
WebSocket 的握手包括两个部分：
- 客户端向服务器发送一份特定格式的 HTTP 请求，其中包含了其支持 WebSocket 的特性和数据，如下所示：
GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat Sec-WebSocket-Version: 13
- 服务器对请求进行响应，包含一个握手头和握手主体。握手头包含了响应代码和协议以表示握手成功，并告知客户端该如何继续通信。
HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat
完成握手后，WebSocket 协议的两端就可以发送和接收数据。
代码实现
包安装
首先，我们需要在本地环境中安装 ws 包。在项目目录下执行以下命令即可：
npm install ws --save
服务器端
在服务器端代码中，我们需要导入 ws 模块并创建 HTTP 服务器。
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 3000 });
console.log('Server started.');这段代码创建了一个 WebSocket 服务器，并监听在 3000 端口上。
接着，我们需要监听客户端连接，并实现聊天室的核心逻辑。下面是服务器端核心逻辑的具体实现。
首先，我们需要维护一个用户数组，用于保存当前在线的用户信息。当用户连接到服务器时，向用户发送欢迎消息，并将该用户添加到在线用户列表中。
-- -------------------- ---- -------
----- ----- - ---
----------------------- -------- -- -
---------------- ------ -------------
-------------------- -- --- ---- ----- ------ ----- ---- ------------
-------------------- --------- -- -
--------------------- -------- -------------
-- ----------------- -
-- --------- ------- -- --- --------- -------
-------------------------- -- -
-- ------------- --- --------------- -
--------------------------- -------------
-
---
- ---- -
-- --- -------- ----- --------- ------- -------
--------------- - --------
----------------------------
-- ---- --- ---- ------- ---- ----- -- --- ----
------------------- ---- ----- -- --- ----- ----- --- --------- --------------- ----- ----------
-- --------- --- ---- -- --- --------- -------
-------------------------- -- -
-- ------------- --- --------------- -
-------------------------- --- ------ --- --------
-
---
-
---
------------------ -- -- -
------------------- --- ----------------
----- ----- - -------------------------------
-- ------ - --- -
------------------- ---
-
-- --------- ---- ---- -- --- --------- -------
-------------------------- -- -
-- ------------- --- --------------- -
-------------------------- --- ---- --- ----- ----- --- --------- --------------- ----- ----------
-
---
---
---该代码逻辑比较简单，当收到用户的消息时，如果该用户已经登录，则将该消息广播给所有在线用户，否则设置用户的用户名并将其添加到在线用户列表中。
我们还实现了 client.on('close') 方法，用于在用户退出聊天室时通知其他用户。最后，我们需要在服务器上维护一个用户数组，用于跟踪当前在线的用户数量和用户名。
客户端
在客户端代码中，我们需要使用 WebSocket 的 JavaScript API 来连接服务器并实现用户界面的相关功能。下面是实现 User Interface 的主要代码块：
-- -------------------- ---- -------
----- ------ - --- ---------------------------------
------------- - -- -- -
-- ------ ---------- ----
--
---------------- - --- -- -
-- ------ ------- --------
--
-------------- - -- -- -
-- ------ ---------- -----
--
-------------- - ------- -- -
-- ------ ---------- ------
--
--------------------------------------------------------------- --- -- -
-------------------
----- ----- - --------------------------------------
----- ------- - ------------
-- ---------------- -
----------- - ---
---------------------
-
---该代码块创建了一个 WebSocket 连接，并设置了事件监听器来处理 WebSocket 连接事件和消息接收事件。如果有任何错误发生，我们也需要处理错误事件。
最后，我们还监听了聊天消息输入框的表单提交事件，以便我们可以向服务器发送消息并将其广播给所有在线用户。
进一步探索
通过上面的实例代码，我们已经大致了解了如何使用 WebSocket 创建一个聊天室。除此之外，WebSocket 还有很多其他有趣的用例，例如实时在线游戏、实时消息推送等等。相信通过学习 WebSocket 基本概念和实现方法，我们可以在这些场景下应用 WebSocket 来实现更多有用的功能。
结论
在本文中，我们介绍了如何使用 Node.js 中的 WebSocket 模块来创建一个简单的聊天室。通过实现聊天室的功能，我们不仅学习了 WebSocket 的基本概念和工作原理，还了解了如何使用 Node.js 和 WebSocket 来实现实时应用程序。此外，通过这个示例，我们也探索了如何在 Web 应用程序中使用 WebSocket 来构建实时消息功能，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f0c37c6fbf96019733e767