实时通信是现代 Web 应用程序中基本的需求。WebSocket 是一种推荐的实现方法，它可以在客户端和服务端之间建立持久连接，并支持数据双向传输。在本文中，我们将探讨如何在 Express.js 中使用 WebSocket 实现实时通信。
什么是 WebSocket？
WebSocket 是一种双向通信协议，可以在 Web 应用程序和 Web 服务器之间建立持久连接。它允许 Web 应用程序发送和接收数据，而无需频繁地使用 HTTP 请求和响应。WebSocket 通过 HTTP 握手来建立初始连接，然后切换到 WebSocket 协议进行实时通信。
WebSocket 与 HTTP 的主要区别是，WebSocket 连接是持久的，可以在单个 TCP 连接上发送多个消息。这使得它非常适合需要实时通信的 Web 应用程序，如聊天室、游戏和实时数据可视化。
在 Express.js 中使用 WebSocket
下面是一个很简单的示例，演示如何在 Express.js 中使用 WebSocket。我们将建立一个简单的聊天室，允许用户在不刷新页面的情况下实时发送和接收消息。
- 首先安装 ws 模块，它是一个流行的 WebSocket 库，使 WebSocket 构建得非常简单。
npm install ws
- 然后在 Express 应用程序中启动 WebSocket 服务器。
-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------
----- ------ - ---------------------------------
----- -- - ----------------------------
------------------- -------- -- -
-------------- ---- ------------
----------------------- -- -- -
----------------- ---------------
---
---
------------------- -- -- -
---------------------- -- ---------
---上面的代码中，我们使用 socket.io 库创建一个 WebSocket 服务器，并在连接事件中添加了日志记录。现在，当用户连接到服务器时，我们将在控制台上收到消息“a user connected”。
- 接下来，我们将添加一些事件，以便在客户端发送和接收消息。在服务器脚本顶部，添加以下代码。
-- -------------------- ---- -------
----- --------- - -------------
----- --- - --- ------------------ ------ --
-------------------- ---- -- -
---------------- --------- -- -
--------------------- -------- -------------
---------------------------- -- -
-- ------- --- -- -- ----------------- --- --------------- -
--------------------
-
--
--
--上面的代码中，我们创建了一个 WebSocket 服务器，并在连接事件中添加了一个回调函数。每当客户端发送消息时，我们会向所有其他连接的客户端发送该消息。
- 现在我们需要创建一个前端页面，以允许用户发送和接收消息。在项目目录下，创建一个名为“public”的文件夹，并在其下创建一个名为“index.html”的文件。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ------------
-------
------
----- ----------
------ ----------- ---------- ------------------ ----------------- ---- ------- ---------
---------------------
-------
--- -------------------
------- ---------------------------------------
--------
----- ------ - -----
----- ---- - --------------------------------
----- ----- - ---------------------------------
----- -------- - ------------------------------------
------------------------------- ------- -- -
-----------------------
-- ------------- -
----------------- --------- -------------
----------- - ---
-
---
--------------- --------- --------- -- -
----- -- - -----------------------------
------------ - --------
-------------------------
------------------ ----------------------------
---
---------
-------
-------上面的 HTML 文件中包含一个表单输入框、一个消息列表和一些 JavaScript 代码。当用户在输入框中键入文本并点击发送按钮时，我们将使用 WebSocket 将消息发送到服务器。服务器将该消息广播到所有连接的客户端，然后我们将该消息添加到消息列表中。
- 最后，我们需要将静态资源（如 HTML、CSS 和 JavaScript 文件）提供给 Express 应用程序。在服务器脚本中，添加以下代码。
app.use(express.static('public'))这将允许客户端访问任何存储在 public 文件夹中的静态资源。现在启动应用程序，然后在浏览器中打开 localhost:3000。您应该看到一个聊天室界面，允许您发送和接收消息。
总结
在本文中，我们介绍了 WebSocket 协议以及如何在 Express.js 中使用它。我们构建了一个简单的聊天室应用程序，允许用户实时发送和接收消息。这是一个很好的起点，用于了解如何将 WebSocket 集成到您的 Web 应用程序中，以便创建实时通信功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482f5a448841e9894253694