在 Web 开发中，实现实时通信是非常常见的需求，例如聊天室、在线游戏等。传统的 HTTP 协议是无法满足这种需求的，因为 HTTP 是一种请求-响应的模式，客户端需要不断地向服务器发送请求才能获取最新的数据。这种轮询的方式会浪费大量的带宽和服务器资源，并且响应时间也会有延迟。
为了解决这个问题，WebSocket 技术应运而生。WebSocket 是一种基于 TCP 协议的双向通信协议，它可以在客户端和服务器之间建立一个持久性的连接，实现实时通信。在 Express.js 中使用 WebSocket 实现双向通信非常简单，本文将介绍如何使用 WebSocket 实现一个简单的聊天室。
安装 WebSocket
在 Express.js 中使用 WebSocket 需要安装一个叫做 ws 的第三方模块。可以使用 npm 命令进行安装：
--- ------- --
创建 WebSocket 服务器
在 Express.js 中创建 WebSocket 服务器非常简单，只需要调用 ws 模块的 Server 构造函数即可：
----- - ------ - - -------------- ----- --- - --- -------- ----- ---- ---
这段代码创建了一个 WebSocket 服务器，监听在 8080 端口上。接下来，我们需要监听客户端的连接请求，并在连接成功后发送欢迎消息：
-------------------- ---- -- - ------------------- ------------ ---------------- -- --- ---- -------- ---
这段代码监听了 connection 事件，当客户端连接成功后就会触发该事件。ws 参数是一个 WebSocket 对象，可以用来向客户端发送消息。
处理客户端消息
当客户端向服务器发送消息时，服务器需要对消息进行处理。可以使用 ws 模块的 message 事件来监听客户端发送的消息：
-------------------- ---- -- -
------------------- ------------
---------------- -- --- ---- --------
---------------- --------- -- -
--------------------- -------- -------------
---------------------------- -- -
-- ------- --- -- -- ----------------- --- --------------- -
---------------------
-
---
---
---这段代码监听了 message 事件，并将收到的消息发送给所有连接到服务器的客户端。需要注意的是，不能将消息发送给自己，否则会出现消息重复的问题。
创建聊天室页面
最后，我们需要创建一个简单的聊天室页面，让用户可以在页面中发送消息。可以使用 Express.js 提供的静态文件中间件来提供静态文件服务：
----- ------- - ------------------- ----- --- - ---------- ---------------------------------- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
这段代码启动了一个 Express.js 服务器，监听在 3000 端口上，并提供了一个静态文件服务，将 public 目录下的所有文件作为静态文件提供。
在 public 目录下创建一个 index.html 文件，用于展示聊天室页面。页面中需要包含一个输入框和一个按钮，用于发送消息。可以使用 WebSocket API 来与服务器建立连接，并发送和接收消息：
--------- -----
------
------
----- ----------------
----------- ------------
-------
------
---- --------------------
------ ----------- -------------
------- -----------------------
--------
----- -- - --- ---------------------------------
------------ - ------- -- -
----- ------- - -----------
----- -------- - ------------------------------------
------------------ -- --------------------
--
----- ---------- - --------------------------------
------------------------------------ -- -- -
----- ------------ - -----------------------------------
----- ------- - -------------------
-----------------
------------------ - ---
---
---------
-------
-------这段代码使用了 WebSocket API 的 WebSocket 构造函数来创建一个 WebSocket 对象，并指定了连接的地址。在收到服务器发送的消息时，页面会向 messages 元素中添加一条消息。在点击发送按钮时，页面会向服务器发送消息，并清空输入框中的内容。
总结
本文介绍了如何在 Express.js 中使用 WebSocket 实现双向通信，包括创建 WebSocket 服务器、处理客户端消息、创建聊天室页面等。WebSocket 技术可以有效地实现实时通信，减少对服务器资源的浪费，提高用户体验。在实际开发中，可以结合其他技术，例如 Socket.IO、MQTT 等，实现更加复杂的实时通信场景。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6586bdf8d2f5e1655d11bf5c