本文将介绍如何使用 Express.js 搭建 WebSocket 服务器的全流程。WebSocket 是一种基于 TCP 的协议，通过简单的握手协议即可创建长连接，实现双向通信。在前端开发中，也经常会用到 WebSocket 技术来实现实时通信，比如在线聊天、多人协作等。
准备工作
在开始本文的教程之前，首先要确保您已经安装了 Node.js，并且熟悉了基本的 JavaScript 语法。如果您还没有安装 Node.js，请前往 Node.js 官网下载最新版。
安装库
首先，您需要安装 express 和 ws 两个库，express 用于创建 Web 服务器，ws 用于创建 WebSocket 服务器。
npm install express ws
创建 Express 应用程序
在 app.js 文件中，导入 express 库并创建一个 Express 应用程序实例。
const express = require('express');
const app = express();然后，我们可以监听一个端口，以便我们可以访问我们的应用程序。
const port = process.env.PORT || 3000; // 设置应用程序的端口号为 3000
const server = app.listen(port, () => {
console.log(`应用程序已启动，地址为 http://localhost:${port}`);
});创建 WebSocket 服务器
接下来，我们可以创建一个 WebSocket 服务器，并使用 ws 库将其与 Express 应用程序关联起来。在 app.js 文件中，导入 ws 库，并使用 WebSocket.Server 从 Express 应用程序的服务器中创建 WebSocket 服务器实例。
const WebSocket = require('ws');
const wss = new WebSocket.Server({ server });现在，我们已经创建了一个 WebSocket 服务器。当 WebSocket 连接建立时，wss 对象会触发一个 connection 事件。我们可以监听该事件，并在连接建立时创建一个 WebSocket 连接实例，并记录每个新连接的实例。
-- -------------------- ---- -------
----- ----------- - --- ------ -- --------
-------------------- ---- -- -
-------------------- -- --------- --- -
---------------- ------------------- -------
-- --------- ------- --
---------------- ------ -- -
-----------------------------------
---
-- --------- ----- --
-------------- -- -- -
----------------------- -- - --- ---------
------------------------- ----------------------
---
---上面的代码处理了所有连接的常规管理。现在，我们就可以进行 WebSocket 通信了。
WebSocket 通信示例
以下是一个简单的 WebSocket 通信示例。当客户端连接到 WebSocket 服务器并发送消息时，服务器将把消息转发给所有已连接客户端。
在 public/index.html 文件中，编写以下 HTML：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- ------------
-------
------
--------- ------------- --------- ---------------------
----- ----------
------ ----------- ------------ -------------------
------- -------------------------
-------
--------
----- -------- - ------------------------------------
----- ---- - --------------------------------
----- ----- - -----------------------------------
----- -- - --- -----------------------------------
--------- - -- -- -
---------------------- --------
--
------------ - ------- -- -
-----------------------------------------
-------------- -- ------------------
--
------------------------------- ------- -- -
-----------------------
----- ------- - -------------------
-------------------------------
-----------------
----------- - ---
---
---------
-------
-------在 app.js 文件中，添加以下代码，使 Express 应用程序能够提供 public 文件夹中的静态文件。
app.use(express.static('public'));现在，访问 http://localhost:3000，您就可以尝试连接 WebSocket 服务器并发送消息了。
总结
本文介绍了如何使用 Express.js 创建 WebSocket 服务器的全流程。具体而言，我们使用了 express 和 ws 两个库来创建 Web 服务器和 WebSocket 服务器，通过简单的示例代码演示了 WebSocket 通信的过程。
通过理解本教程的内容，您可以更好地学习和使用 WebSocket 技术，并在实际开发中应用它来实现实时通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e9d7fcf6b2d6eab34fd1e4