WebSocket 是一种在客户端和服务器之间进行双向通信的协议。使用 WebSocket，可以使客户端和服务器之间的通信更加高效和实时。在前端开发中，WebSocket 是构建游戏和多人在线应用的重要技术之一。本文将介绍如何使用 Deno 中的 WebSocket 模块来构建游戏和多人在线应用。
什么是 Deno？
Deno 是一个安全的 JavaScript 和 TypeScript 运行时环境，由 Node.js 的创始人 Ryan Dahl 开发。Deno 支持 ES6+，TypeScript 和 WebAssembly，并且内置了标准库，包括 HTTP、WebSocket、fetch 等常用模块，可以用来构建 Web 应用、命令行工具等。
使用 Deno 中的 WebSocket 模块
Deno 中的 WebSocket 模块提供了 WebSocket 的实现，可以用来在客户端和服务器之间进行双向通信。下面是一个简单的示例，演示了如何在 Deno 中使用 WebSocket 模块来创建 WebSocket 服务器：
------ - ----- - ---- ---------------------------------------
------ - ---------------- --------- - ---- ----------------------------------
----- ------ - ------- ----- ---- ---
---------------------- ------ ------- -- ---- -------
--- ----- ------ --- -- ------- -
-- -------- --- ------ -
----- - ----- -- ---------- -- ---------- ------- - - ----
----------------- ----- ---------- ---------- ------- -------------------------
-
-
----- -------- ------------------- ---------- -
---------------------- ------------
--- ----- ------ ----- -- --- -
---------------------- -------- -------
-- ------- ----- --- --------- -
---------------------- ---- ------- ----------- -------
----- ------------ ----- -----------
- ---- -- ------ ---------- ----------- -
---------------------- ------ ------- ----------- -------
-
-
-在上面的示例中，我们首先使用 serve 函数创建了一个 HTTP 服务器，然后在服务器的 for await 循环中，判断请求的 URL 是否是 /ws，如果是，就调用 acceptWebSocket 函数来创建 WebSocket 连接。acceptWebSocket 函数返回一个 WebSocket 对象，我们可以通过这个对象来处理 WebSocket 事件，例如接收和发送消息。
在 handleWebSocket 函数中，我们打印了一条 WebSocket 连接成功的日志，并在 for await 循环中处理 WebSocket 事件。如果收到了文本消息，我们就打印一条日志，并回复一个消息，内容为 You said: ${event}，其中 event 是收到的消息。如果收到了二进制消息，我们只是打印了一条日志，并没有做其他处理。
构建游戏和多人在线应用
使用 Deno 中的 WebSocket 模块，我们可以构建各种各样的游戏和多人在线应用。下面是一些示例：
1. 实时聊天室
实时聊天室是一个基于 WebSocket 的多人在线应用，用户可以在聊天室中发送文本消息，与其他用户进行实时交流。下面是一个简单的实时聊天室示例：
------ - ----- - ---- ---------------------------------------
------ - ---------------- --------- - ---- ----------------------------------
----- ------ - ------- ----- ---- ---
---------------------- ------ ------- -- ---- -------
----- -------- ----------- - ---
--- ----- ------ --- -- ------- -
-- -------- --- ------ -
----- - ----- -- ---------- -- ---------- ------- - - ----
----------------- ----- ---------- ---------- ------- ------------ -- -
---------------------- ------------
-----------------
-------------- -- -- -
---------------------- ---------
----------------------------------- ---
---
---------------- ------- -- -
---------------------- ---------- -------
------------------------ -- -
-- ------- --- --- -
-------------------
-
---
---
---
-
-在上面的示例中，我们创建了一个数组 sockets，用来存储所有连接到服务器的 WebSocket 对象。在 acceptWebSocket 函数的回调函数中，我们将新连接的 WebSocket 对象添加到 sockets 数组中，并为其注册 close 和 message 事件。在 close 事件中，我们从 sockets 数组中删除已关闭的 WebSocket 对象。在 message 事件中，我们将收到的消息发送给除自己以外的所有 WebSocket 对象。
2. 实时协作画板
实时协作画板是一个基于 WebSocket 的多人在线应用，用户可以在画板上绘制图形，与其他用户进行实时协作。下面是一个简单的实时协作画板示例：
------ - ----- - ---- ---------------------------------------
------ - ---------------- --------- - ---- ----------------------------------
--------- ----- -
-- -------
-- -------
------ -------
-
----- ------ - ------- ----- ---- ---
---------------------- ------ ------- -- ---- -------
----- -------- ----------- - ---
----- ------- ------- - ---
--- ----- ------ --- -- ------- -
-- -------- --- ------ -
----- - ----- -- ---------- -- ---------- ------- - - ----
----------------- ----- ---------- ---------- ------- ------------ -- -
---------------------- ------------
-----------------
-------------- -- -- -
---------------------- ---------
----------------------------------- ---
---
---------------- ------- -- -
---------------------- ---------- -------
----- ----- - ---------------------------- -- ------
-------------------
------------------------ -- -
-------------------
---
---
--------------------------------
---
-
-在上面的示例中，我们创建了一个数组 points，用来存储画板上的所有点。在 acceptWebSocket 函数的回调函数中，我们将新连接的 WebSocket 对象添加到 sockets 数组中，并为其注册 close 和 message 事件。在 close 事件中，我们从 sockets 数组中删除已关闭的 WebSocket 对象。在 message 事件中，我们将收到的消息解析为 Point 对象，并将其添加到 points 数组中。然后，我们将收到的消息发送给所有 WebSocket 对象，并将 points 数组序列化为 JSON 字符串，发送给新连接的 WebSocket 对象。
在客户端中，我们可以使用 Canvas API 来绘制画板上的点。下面是一个简单的客户端示例：
--------- -----
------
------
----- ----------------
--------------- ------- -------------
-------
------ -
------- --- ----- ------
-
--------
-------
------
------- ----------- ----------- ----------------------
--------
----- ------ - ----------------------------------
----- ------- - ------------------------
----- ------ - --- ------------------------------------
--- ------ - ---
------------- - -- -- -
---------------------- ------------
--
---------------- - ------- -- -
---------------------- ---------- -------
----- ----- - -----------------------
-------------------
-------------
--
-------- ------------ -
-------------------- -- ------------- ---------------
---------------------- -- -
--------------------
-------------------- -------- -- -- ------- - ---
----------------- - ------------
---------------
---
-
------------------------------------ ------- -- -
-- -------------- --- -- -
----- ---- - -------------------------------
----- - - ------------- - ----------
----- - - ------------- - ---------
----- ----- - --------
----- ----- - - -- -- ----- --
-------------------
-----------------------------------
-------------
-
---
---------
-------
-------在上面的示例中，我们首先创建了一个 Canvas 元素，并在其上绘制点。然后，我们创建了一个 WebSocket 对象，连接到服务器的 /ws 路径。在 WebSocket 的 onmessage 事件中，我们解析收到的消息为 Point 对象，并将其添加到 points 数组中。然后，我们调用 draw 函数，绘制所有的点。在 Canvas 的 mousemove 事件中，我们检查鼠标左键是否按下，如果按下，就创建一个新的 Point 对象，并将其添加到 points 数组中。然后，我们将该 Point 对象序列化为 JSON 字符串，并发送给服务器。最后，我们调用 draw 函数，绘制所有的点。
总结
使用 Deno 中的 WebSocket 模块，我们可以轻松地构建游戏和多人在线应用。本文介绍了如何使用 Deno 中的 WebSocket 模块来创建 WebSocket 服务器，并提供了实时聊天室和实时协作画板的示例。通过学习本文，读者可以掌握使用 Deno 中的 WebSocket 模块来构建游戏和多人在线应用的技能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660f478dd10417a222fb8811