在现代化的 web 应用中，实时互动是必备的功能，而实现实时互动的最佳方式就是使用 Socket.io。另一方面，Express.js 是一条流行的 web 框架，它能方便地处理 HTTP 请求和响应，因此它也是很多 web 应用的选择。
本文将介绍如何使用 Express.js 和 Socket.io 一起构建一个多人在线游戏，从而让你更好地理解这两个工具的使用。
确定游戏规则
在构建任何应用之前，必须考虑它的需求和规则。对于一个多人在线游戏来说，需要特别注意以下两个方面：
- 游戏状态的同步：因为多个玩家可以一起玩游戏，所以需要确保所有人都看到游戏状态的变化。
- 安全问题：玩家需要保证登录和游戏进行的安全。
通过考虑这些问题，我们可以开始构建我们的多人在线游戏了。
Express.js 和 Socket.io 的安装
首先，我们需要安装 Express.js 和 Socket.io。在 Node.js 的控制台中，输入以下命令：
--- ------- ------ ------- ---------
创建 Express.js 服务器
接下来，我们需要创建一个 Express.js 服务器。在你想要存储服务器代码的文件夹内，创建一个名为 server.js 的文件，并在其中添加以下代码：
----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- --------------- ---------- ----- ------ - ---------------- -- -- - ---------------------- -- --------- ---
运行这个文件，通过以下命令：
---- ---------
这将在你的本地主机上启动 Express.js 服务器，并在终端上输出“listening on *:3000”。现在，当你访问 http://localhost:3000/ 时，它将返回“Hello World!”。
添加 Socket.io 支持
现在我们需要添加 Socket.io 支持。为此，我们需要在 server.js 中添加以下代码：
----- -- - ----------------------------- ------------------- -------- -- - -------------- ---- ------------ ---
这里我们将服务器传递给了 Socket.io 构造函数，并使用 io.on('connection', ...) 来处理客户端连接到服务器时的事件。如果你现在尝试访问 http://localhost:3000/，你将不会看到任何变化，因为我们尚未将 Socket.io 客户端添加到代码中。
添加 Socket.io 客户端
为了使连接到服务器的客户端能够与服务器进行通信，我们需要通过一个 Socket.io 客户端来做到这一点。所以，我们需要在客户端代码中添加以下代码，以添加 Socket.io 客户端：
--------- -----
------
------
------------------ ------------
-------
------
--------------- ---------
------- ---------------------------------------
--------
----- ------ - -----
---------------------
---------
-------
-------现在，当你访问 http://localhost:3000/ 时，你将在浏览器控制台上看到“hello”。
好了，现在我们已经将 Socket.io 添加到服务器和客户端中。接下来，我们需要比较系统地构建游戏。
系统构建
开始构建系统之前，我们需要了解一些基础知识。在这里，我们使用了一个语言编译器的概念，用类进行描述。其中一个类代表玩家，另一个类代表游戏。
在游戏类中，我们需要：
- 维护游戏状态
- 处理移动和其他事件（例如攻击或跳跃）
- 将现有游戏状态广播给所有连接的客户端
- 处理有关新的客户端连接和已连接客户端断开连接的事件。
在玩家类中，我们需要：
- 为每个客户端连接创建一个新玩家
- 处理客户端发出的移动和其他事件
- 更新玩家位置
- 处理玩家离开游戏的事件。
让我们开始构建我们的游戏类和玩家类。
----- ---- -
------------- -
------------ - --- ------
-
----------------- -
--------------------------- --------
-
-------------------- -
-------------------------------
-
-------- -
----- ------- - ---
--- ------ ------ -- ---------------------- -
------------------------------
-
------ -
--------
--
-
-
----- ------ -
--------------- -
------- - ---
------ - --
------ - --
-
------- -- -
------ - --
------ - --
-
-------- -
------ -
--- --------
-- -------
-- -------
--
-
-在上面的代码中，我们定义了游戏和玩家类。在 Game 类中，我们使用 Map 对象来存储所有玩家。addPlayer 方法将玩家添加到 Map 中，removePlayer 方法将其从 Map 中移除。toJSON 方法将储存所有玩家信息的 Game 实例导出为 JSON 格式。
在 Player 类中，我们定义了 id，x 和 y 属性，并使用 move 方法来更新玩家的位置。toJSON 方法允许我们将这些属性导出为 JSON 格式。
接下来，让我们将这些类整合到服务器代码中。
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------------------
----- -- - ---------------------------
----- ---- -
------------- -
------------ - --- ------
-
----------------- -
--------------------------- --------
-
-------------------- -
-------------------------------
-
-------- -
----- ------- - ---
--- ------ ------ -- ---------------------- -
------------------------------
-
------ -
--------
--
-
-
----- ------ -
--------------- -
------- - ---
------ - --
------ - --
-
------- -- -
------ - --
------ - --
-
-------- -
------ -
--- --------
-- -------
-- -------
--
-
-
----- ---- - --- -------
------------------- -------- -- -
----- ------ - --- ------------------
-------------- ---- ------------
-----------------------
----------------------- -- -- -
-------------- ---- ---------------
--------------------------
---
----------------- ------ -- -
------------------- --------
---
---
------------ ----- ---- -- -
---------------------- - ---------------
---
-------------- -- -
---------------- ---------------
-- ---- - ----
----------------- -- -- -
---------------------- -- ---------
---在上面的代码中，我们添加了一个 Game 实例，然后在客户端连接时将新 Player 添加到 Game 中。然后，当客户端断开连接时，我们将其从 Game 实例中移除。
最后，我们使用 setInterval 周期性地将 Game 实例导出为 JSON 并将其广播到所有连接的客户端，以确保所有人都能看到游戏状态的变化。
到目前为止，我们的服务器代码已准备就绪。接下来，我们需要创建一些客户端代码来与服务器通信。
创建客户端代码
对于客户端代码，我们希望创建一个 canvas 元素来绘制玩家和游戏状态。以下是客户端 HTML 代码的示例：
--------- -----
------
------
------------------ ------------
-------
------
------- ----------- ----------- ----------------------
------- ---------------------------------------
--------
----- ------ - ----------------------------------
----- --- - ------------------------
----- ------ - -----
------------------ ------- -- -
---------------- -- ------------- ---------------
------------------------------ -- -
--------------------
------------- - ----------
---------------------- --------- --- ----
---
---
------------------------------------ ------- -- -
--- - - --
--- - - --
------ ----------- -
---- ------------
- - ---
------
---- -------------
- - --
------
---- ----------
- - ---
------
---- ------------
- - --
------
-
------------------- - -- - ---
---
---------
-------
-------首先，我们使用 canvas 元素创建了一个游戏界面。然后，我们使用 socket.io.js 文件导入了 Socket.io 客户端。然后，我们添加了一个监听器，等待服务器从游戏类中广播我们导出的 JSON 数据。最后，我们添加了一个 keydown 监听器，以便我们可以使用箭头键移动我们的玩家。
现在，当我们加载客户端时，它将开始监听来自服务器的消息。每当服务器广播 Game 实例的更新时，我们会将新状态传递给我们的绘制函数，并清除整个画布。然后，我们遍历所有玩家并在对应位置绘制一个方块。
结论
在本文中，我们介绍了如何使用 Express.js 和 Socket.io 实现多人在线游戏。我们讨论了游戏规则和构建游戏的基元，并提供了完整的示例代码。
使用这个简单的示例，你可以开始构建你自己的多人在线游戏，从而开发多人在线应用程序的实时互动功能。虽然这个示例很小，但你可以使用它为你的项目提供一个良好的起点。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67235da22e7021665e0fc6f0