随着现代 Web 应用程序的复杂化和实时性要求的增加，WebSocket 在 Web 应用程序中的使用已经变得越来越普遍。WebSocket 是一种在浏览器和服务器之间建立全双工通信的技术，它可以通过单个 TCP 连接实现实时更新和传输数据。在本文中，我们将介绍如何在 Express.js 中使用 WebSocket。
WebSocket 的基本概念
WebSocket 是一个基于事件驱动的协议，可以在客户端和服务器之间进行双向通信。WebSocket 协议在建立连接时使用 HTTP 协议，握手完成后在同一个 TCP 连接上进行通信。WebSocket 连接是全双工的，这意味着服务器和客户端可以同时发送和接收消息。
在 JavaScript 中，我们可以使用 WebSocket API 来创建 WebSocket 连接。例如，以下代码将创建一个连接到 ws://localhost:8080 的 WebSocket：
const socket = new WebSocket("ws://localhost:8080");一旦建立连接，我们就可以通过监听 message 事件获取服务器发送的消息：
socket.addEventListener("message", event => {
console.log("Received message:", event.data);
});当我们想要向服务器发送消息时，我们可以使用 send 方法：
socket.send("Hello, server!");在 Express.js 中使用 WebSocket
虽然 WebSocket 的 API 可以在浏览器中使用，但在服务器端实现 WebSocket 连接需要使用一些不同的技术。幸运的是，有一些现成的解决方案可以轻松地将 WebSocket 添加到 Express.js 中。
在 Express.js 中，我们可以使用 express-ws 中间件来添加 WebSocket 功能。首先，我们需要安装 express-ws：
npm install express-ws
接下来，在我们的 Express.js 应用程序中添加中间件：
-- -------------------- ---- -------
----- ------- - -------------------
----- --------- - ----------------------
----- --- - ----------
----- ---- - -----
---------------
----------------- ---- ---- -- -
-- --------- ---------- -- --- ----
---------------- ------- -- -
--------------------- ---------- ---------
-- ---- --- ------- ---- -- --- ------
-------------- -------------
---
---在上面的代码中，我们使用了 app.ws 方法来定义 WebSocket 端点。ws 回调接受两个参数： ws 对象表示 WebSocket 连接，req 对象是 ws 对象的请求实例。我们可以使用 ws 对象的 on 方法来监听 WebSocket 事件，例如 message 事件。当收到消息时，我们可以使用 ws.send 方法向客户端发送消息。
现在，我们已经创建了一个 WebSocket 服务器并开始监听来自客户端的连接请求。让我们看一下如何在客户端中连接 WebSocket 服务器和发送和接收消息。
-- -------------------- ---- ------- ----- ------ - --- ---------------------------------------- ------------------------------- ----- -- - ---------------------- ---------- -- --- ------- -- ---- - ------- -- --- ------ ------------------- ---------- --- ---------------------------------- ----- -- - --------------------- ---------- ------------ ---
在上面的代码中，我们使用 WebSocket API 创建了一个 WebSocket 连接，然后监听 open 事件来检测连接是否已建立。当连接已建立时，我们可以使用 send 方法向服务端发送消息来验证连接是否工作正常。然后，我们监听 message 事件以获取从服务器发送的消息。
总结
WebSocket 提供了一个灵活而强大的方法来实现实时网络通信。有了 express-ws 中间件，我们可以轻松地在 Express.js 应用程序中添加 WebSocket 功能。在本文中，我们介绍了如何在 Express.js 中使用 WebSocket，包括建立 WebSocket 连接和发送和接收消息的基本操作。希望这篇文章能够帮助您更好地理解和使用 WebSocket。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a524b848841e989419ade3