WebSocket 是一种基于 TCP 协议的全双工通信协议，它可以在浏览器和服务器之间建立一个持久的连接，使得服务器可以主动向客户端推送消息，而不需要客户端轮询请求。在实时通信场景中，WebSocket 是一种非常方便的技术，可以用于实现在线聊天、实时游戏等功能。
在 Express.js 中，我们可以通过一些中间件和库来实现 WebSocket 功能。本文将介绍如何使用 ws 和 express-ws 库，在 Express.js 中实现 WebSocket 功能。
安装依赖
我们需要安装 ws 和 express-ws 两个库，分别用于 WebSocket 和 Express.js 中的 WebSocket 功能。
npm install ws express-ws --save
创建 Express.js 应用
我们先创建一个简单的 Express.js 应用，用于演示 WebSocket 功能。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
添加 WebSocket 中间件
我们需要使用 express-ws 中间件来添加 WebSocket 功能到 Express.js 应用中。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- --------- - --------------------------- ------------ ----- ---- -- - --------------- --------- --- ----------- ---- ---- -- - ---------------------- ------------- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
在上面的代码中，我们通过调用 express-ws 中间件来添加 WebSocket 功能。app.ws() 方法用于创建 WebSocket 路由，当客户端连接到 / 路径时，会触发回调函数。回调函数中的 ws 参数表示 WebSocket 对象，req 参数表示 HTTP 请求对象。
发送和接收消息
我们可以使用 WebSocket 对象的 send() 方法来发送消息，使用 on('message') 方法来接收消息。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- --------- - ---------------------------
------------ ----- ---- -- -
--------------- ---------
---
----------- ---- ---- -- -
---------------------- -------------
---------------- -- --------- ----------
---------------- --------- -- -
--------------------- ---------- ---------
------------ ----- - - ---------
---
---
---------------- -- -- -
------------------- ------- -- ---- -------
---在上面的代码中，我们使用 ws.send() 方法发送欢迎消息，使用 ws.on('message') 方法接收客户端发送的消息，并回复相同的消息。
完整示例代码
下面是一个完整的示例代码，包含了 WebSocket 服务端和客户端的代码。
服务端代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- --------- - ---------------------------
------------ ----- ---- -- -
--------------- ---------
---
----------- ---- ---- -- -
---------------------- -------------
---------------- -- --------- ----------
---------------- --------- -- -
--------------------- ---------- ---------
------------ ----- - - ---------
---
---
---------------- -- -- -
------------------- ------- -- ---- -------
---客户端代码：
-- -------------------- ---- -------
--------- -----
------
------
---------------- --------------
-------
------
------------- -----------
---- --------------------
------ ----------- ---------- --
------- -----------------------
--------
----- ------ - --- ----------------------------------
------------- - -- -- -
---------------------- -------------
--
---------------- - ------- -- -
--------------------- ---------- ------------
----- -------- - ------------------------------------
------------------ -- ----- - ---------- - -------
--
----- ----- - ---------------------------------
----- ---- - --------------------------------
------------------------------ -- -- -
----- ------- - ------------
---------------------
----------- - ---
---
---------
-------
-------在客户端代码中，我们使用 WebSocket 构造函数来创建 WebSocket 对象，指定服务器地址为 ws://localhost:3000/。在 onopen 和 onmessage 事件中，分别处理连接成功和收到消息的情况。在 send 按钮的点击事件中，使用 socket.send() 方法向服务器发送消息。
总结
本文介绍了如何在 Express.js 中使用 ws 和 express-ws 库，实现 WebSocket 功能。我们通过创建 WebSocket 路由，发送和接收消息，实现了一个简单的实时通信示例。在实际项目中，我们可以使用 WebSocket 来实现在线聊天、实时游戏等功能，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658ae03deb4cecbf2d02e0b9