在现代 Web 应用中，实时性已经成为了一个非常重要的需求。传统的 HTTP 协议无法满足这一需求，因此 WebSocket 应运而生。WebSocket 是一种基于 TCP 协议的全双工通信协议，可以在客户端和服务器之间建立持久性的连接，实现实时通信。
在本文中，我们将介绍如何使用 Express.js 和 WebSocket 实现一个简单的聊天室应用。
准备工作
首先，我们需要安装 express 和 ws 这两个包：
npm install express ws
接着，在 Express.js 中使用 WebSocket，我们需要创建一个 HTTP 服务器，并将其传递给 WebSocket 的构造函数：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --------- - -------------- ----- --- - ---------- ----- ------ - ---------------- -- -- - ------------------- ------- -- ---- ------- --- ----- --- - --- ------------------ ------ ---
在上面的代码中，我们创建了一个 Express.js 应用，并启动了一个 HTTP 服务器。接着，我们使用 WebSocket 的构造函数创建了一个 WebSocket 服务器，并将其绑定到 HTTP 服务器上。
实现 WebSocket 服务器
接下来，我们需要实现 WebSocket 服务器的逻辑。当客户端连接到服务器时，我们需要将其添加到一个房间中，并向所有的房间成员广播消息。
-- -------------------- ---- -------
----- ----- - --- ------
-------------------- ---- -- -
-- -------
--------------
-- ----
---------------- --------- -- -
-------------------- -- -
-- ----- --- --- -
-------------------
-
---
---
-- ----
-------------- -- -- -
-----------------
---
---在上面的代码中，我们创建了一个 users 集合，用于保存所有连接到服务器的用户。当用户连接到服务器时，我们将其添加到 users 集合中。当用户断开连接时，我们将其从 users 集合中删除。
在 ws.on('message') 回调函数中，我们遍历所有的用户，并向除了发送消息的用户之外的所有用户广播消息。
实现聊天室客户端
现在我们已经实现了 WebSocket 服务器的逻辑，接下来我们需要实现聊天室客户端的逻辑。在客户端中，我们需要建立 WebSocket 连接，并发送和接收消息。
-- -------------------- ---- ------- ----- ------ - --- --------------------------------- ------------- - -- -- - ---------------------- -- --------- -- ---------------- - ------- -- - --------------------- -------- ---------------- -- --------------------------------------------------------- ------- -- - ----------------------- ----- ----- - --------------------------------------------- ----- ------- - ------------ ----------- - --- --------------------- ---
在上面的代码中，我们使用 WebSocket 的构造函数建立了与服务器的 WebSocket 连接。当连接建立成功后，我们输出一条日志。当接收到服务器发送的消息时，我们将其输出到控制台。
在 HTML 中，我们使用一个表单来接收用户输入的消息。当用户提交表单时，我们从输入框中获取消息，并使用 socket.send() 方法发送到服务器。
完整示例代码
-- -------------------- ---- -------
----- ------- - -------------------
----- --------- - --------------
----- --- - ----------
----- ------ - ---------------- -- -- -
------------------- ------- -- ---- -------
---
----- --- - --- ------------------ ------ ---
----- ----- - --- ------
-------------------- ---- -- -
-- -------
--------------
-- ----
---------------- --------- -- -
-------------------- -- -
-- ----- --- --- -
-------------------
-
---
---
-- ----
-------------- -- -- -
-----------------
---
---
----- ------ - --- ---------------------------------
------------- - -- -- -
---------------------- -- ---------
--
---------------- - ------- -- -
--------------------- -------- ----------------
--
--------------------------------------------------------- ------- -- -
-----------------------
----- ----- - ---------------------------------------------
----- ------- - ------------
----------- - ---
---------------------
---总结
在本文中，我们介绍了如何使用 Express.js 和 WebSocket 实现一个简单的聊天室应用。我们首先创建了一个 HTTP 服务器，并将其传递给 WebSocket 的构造函数。接着，我们实现了 WebSocket 服务器的逻辑，将连接到服务器的用户添加到一个房间中，并向所有的房间成员广播消息。最后，我们实现了聊天室客户端的逻辑，建立 WebSocket 连接，并发送和接收消息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650d1fa895b1f8cacd6da876