Node.js 是一种非常流行的开发语言，它在后端开发中广泛应用。Express.js 是 Node.js 生态中最流行的 Web 服务器框架，其提供了比 Node.js 更高层次的抽象。然而，Express.js 默认只提供了 HTTP 协议，不带有 WebSocket 协议，而 WebSocket 协议在实时通信和游戏等领域也非常流行。
这时我们就需要 @yacinehmito/express-ws 这个 npm 包了。它可以非常容易地为 Express.js 应用程序添加 WebSocket 功能。在本文中，我们将一步步介绍如何使用它。
安装
在项目中安装 @yacinehmito/express-ws：
npm install @yacinehmito/express-ws --save
用例
下面我们将创建一个聊天室应用程序。在聊天应用程序中，客户端应用程序将通过 WebSocket 与服务器进行通信。在这个应用程序中，服务器将接受客户端的消息，并将它们转发给其他客户端。
- 首先，我们引入模块并创建 Express 服务器
const express = require('express');
const app = express();
const expressWs = require('@yacinehmito/express-ws')(app);- 为 Express 路由添加 WebSocket 支持：
app.ws('/chat', function(ws, req) {
ws.on('message', function(msg) {
expressWs.getWss('/chat').clients.forEach(function(client) {
client.send(msg);
});
});
});上述代码将在 /chat 路由中使用 WebSocket。首先，对于每个新连接，我们将对 message 事件进行侦听。当一个新的消息被接收时，我们将其发送给所有客户端，使用 clients 访问 WebSocket 服务器集合。这里的 expressWs.getWss('/chat') 将返回一个 WebSocket 服务器对象，它可以用于对服务器集合执行操作。
- 最后，我们在客户端中创建 WebSocket 并向服务器发送消息。
var socket = new WebSocket("ws://localhost:3000/chat");
socket.onmessage = function(event) {
console.log(event.data);
};
socket.send("Hello world!");这是比较简单的一个例子，但它足以演示如何使用 @yacinehmito/express-ws。让我们来看看更全面的示例。
示例：使用 @yacinehmito/express-ws 创建简单实时多人游戏
现在，我们来创建一个简单的实时多人游戏。在这个游戏中，每个玩家可以移动它们的方块，而其他所有玩家都能看到这个移动。我们将使用 @yacinehmito/express-ws 和 <canvas> 标签。
- 创建一个 HTML 文件，它包含一个
<canvas>标签。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------------ ------------
-------
------ -
------- --- ----- ------
-------- ------
------- - -----
-
--------
-------
------
------- ----------- ----------- ----------------------
------- ----------------------
-------
-------- 编写客户端 JavaScript（app.js）。
我们将创建 Game 类，它将在服务器和客户端之间共享。此类将包含每个方块的位置。
-- -------------------- ---- -------
----- ---- -
--------------
----------- - ---
-
------------ -- -- -------
--------------- - --- -- -------
-
----------------
------ ----------------
-
-接下来，我们将创建 Client 类。它将创建一个画布，连接 WebSocket，并处理移动事件。在画布上，我们将绘制游戏区域中的所有方块。
-- -------------------- ---- -------
----- ------ -
--------------
--------- - --- -------
----------- - ----------------------------------
-------- - -----------------------------
----------- - --- --------------------------------------
--------------------- - ------- -- -
--- ---- - -----------------------
------------ --- ----------
--------------------------- ------- ------- ------------
----- ------------ --- -----------
-------------------------------
----- ------------ --- ----------
--------------------------- ------- ------- ------------
-
--
------------------ - -- -- -
----------------------------------------- ------- -- -
---------------------------------
----- -------
-- -----------------------------------
-- ---------------------------------
----
---
--
--------------
-
---------
--------------------- -- ------------------ --------------------
------- -- -- ------------------
-------------------------------------
-
------------------------ -- -
--------------
---
-
-----------------
------------------ - ------------
-------------------------- -------- --- ----
-
-
--- ---------我们使用了 requestAnimationFrame 函数更新画布。 Client 客户端在 WebSocket 连接建立后添加了一个 'mousemove' 事件监听器，以便使玩家方块响应鼠标移动事件。在 onmessage 回调函数中，当一个新的方块被创建或移动或删除时，我们更新游戏数据。
- 编写服务器代码
我们将创建 Player 类，用于表示连接到服务器的玩家。它将具有每个玩家的唯一标识符、颜色和方块位置。
-- -------------------- ---- -------
----- ------ -
--------------- -
------- - ---
------- - --------------------------------------- ----
---------- - ----------------------------------------------------
------ - ------------------------ - ---- - ---
------ - ------------------------ - ---- - ---
-
----------- ---
------ - --
------ - --
------ -
----- ---------
--- --------
-- -------
-- -------
------ ----------
--
-
----------------
------ -
----- ---------
--- --------
-- -------
-- -------
------ ----------
--
-
-----------------
------ -
----- ----------
--- -------
--
-
-我们将创建一个 Express.js 应用程序，并使用 @yacinehmito/express-ws 启用 WebSocket：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- --------------- - ----------------------------------------
----- ---- - ------------------
----- ---- - --- -------
------------------------------------------------ ------------ ---- -
----- ------ - --- -----------
-----------------------
-----------------------------------------------------------------
----------------------------------------------------
----------------------------- ---- ----- ---------------------
---
---------------- ------------- -
--- ---- - ----------------
------------ --- --------
--- ------- - ----------------------- --------
-----------------------------------------------------------------
-------------------------------------
---
-
---
-------------- ---------- -
--------------------------
--- ------- - ------------------------
-----------------------------------------------------------------
-------------------------------------
---
---
---在代码中，我们首先初始化一个 Game 对象，然后在 /game 路由中启用 WebSocket。我们管理每个连接到服务器的玩家，并根据玩家动作进行实时更新。
- 测试
现在，我们可以在浏览器中打开两个 index.html 页面，并在其中一个页面上单击并拖动。我们可以看到，其他页面上的方块也会移动。
结语
本文涵盖了 @yacinehmito/express-ws 的基础使用方法和更具体的示例，展示了如何使用 WebSocket 在服务器和客户端之间建立实时通信。使用 @yacinehmito/express-ws 可以快速、轻松地构建实时通信应用程序。希望这篇文章可以为你提供指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600d81e8991b448dde1c