前言
WebSocket 是一个基于 TCP 协议的 Web 通信协议，它的优点在于能在客户端和服务器之间建立一个双向通信的通道，以便实时的数据传输。
Deno 是一个新一代的 JavaScript 和 TypeScript 运行时，它提供了一个安全的沙箱环境，并且没有繁琐的构建步骤，也不需要长时间等待编译过程，让我们无需担心文件在不同的计算机上的不兼容问题。
在本篇文章中，我们将介绍在 Deno 环境下如何使用 WebSocket 实现多人在线游戏，让你深入了解 WebSocket 的原理和应用。
准备工作
在开始使用 WebSocket 进行开发之前，我们需要先安装 Deno。你可以在官方网站 https://deno.land/ 下载并安装 Deno。
WebSocket 介绍
WebSocket 是一种在单个 TCP 连接上进行双向通信的协议。它使得客户端和服务器之间的数据传输可以更加实时。传统的 HTTP 协议是单向请求-响应的，每当客户端需要从服务器获取新的数据时，就需要发送一个新的请求，这样实时性十分有限。
WebSocket 的优点是可以在客户端和服务器之间建立一个双向通信的通道，以便实时的数据传输，也没有请求的负担。它基于 HTTP/1.1 协议，与 HTTP 协议不同的是，在握手成功后，客户端和服务器之间就可以直接传输数据，它不需要每次请求都重新建立连接，因此具有很好的实时性。
下面我们来看看如何使用 WebSocket 在 Deno 环境下实现多人在线游戏。
WebSocket 实现多人在线游戏
创建 WebSocket 服务器
首先，我们需要创建一个 WebSocket 服务器，让客户端可以连接。我们可以创建一个 server.ts 文件，并编写以下代码：
-- -------------------- ---- -------
------ - ----- - ---- ---------------------------------------
------ - ---------------- ---------- - ---- ----------------------------------
----- ---- - -----
----- ------ - ------- ----- ---- ---
---------------------- ------ ------- -- ------ ------
--- ----- ------ --- -- ------- -
-- -------- --- ----- -- ---------------- -
----- - ----- -- ---------- -- ---------- ------- - - ----
----------------- ----- ---------- ---------- ------- --
----------------------
------------ -- -
--------------------- -- ------ ---------- ---------
---
-
-
----- -------- ----------------------- ---------- -
------------------- ------------
--- ----- ------ - -- ------- -
--------------------- ---- --------- ---
------------------- --- ---- ---------
-
-在这个文件中，我们首先使用 serve 函数创建一个 HTTP 服务器，并监听 8080 端口。接着，我们通过 for await 循环等待客户端的请求，如果请求的 URL 是 '/ws' 并且请求是可接受的，则调用 acceptWebSocket 函数接受客户端连接。在 acceptWebSocket 函数中，我们调用 handleWebSocket 函数来处理 WebSocket 连接。
在 handleWebSocket 函数中，我们通过 for await 循环来接收客户端发送的消息，并在控制台中打印收到的消息，并通过 socket.send 函数将消息回传给客户端。
创建客户端
接下来，我们需要创建一个客户端，连接到我们的 WebSocket 服务器。我们可以创建一个 client.ts 文件，并编写以下代码：
const ws = new WebSocket('ws://localhost:8080/ws');
ws.onopen = () => {
console.log('WebSocket client connected');
ws.send('Hello, WebSocket server!');
};
ws.onmessage = (e) => console.log(`Received from server: ${e.data}`);在这个文件中，我们首先创建一个 WebSocket 对象，并指定连接的 URL。在 ws.onopen 回调函数中，我们打印连接成功的信息，并通过 ws.send 方法向服务器发送一条消息。
在 ws.onmessage 回调函数中，我们接收服务器返回的消息，并在控制台中打印出来。
启动 WebSocket 服务器和客户端之后，你会看到在服务端控制台输出：
WebSocket server started on port 8080 Client connected Received from client: Hello, WebSocket server!
在客户端控制台输出：
WebSocket client connected Received from server: Hello, you said "Hello, WebSocket server!"
实现多人在线游戏
我们已经成功的连接了 WebSocket 服务器和客户端，下面我们演示如何在 Deno 中使用 Websocket 实现多人在线游戏。
我们可以创建一个 game.ts 文件，并编写以下代码：
-- -------------------- ---- -------
------ - ----- - ---- ---------------------------------------
------ - ---------------- ---------- - ---- ----------------------------------
----- ---- - -----
--- -------- ----------- - ---
----- ------ - ------- ----- ---- ---
---------------------- ------ ------- -- ------ ------
--- ----- ------ --- -- ------- -
-- -------- --- ----- -- ---------------- -
----- - ----- -- ---------- -- ---------- ------- - - ----
----------------- ----- ---------- ---------- ------- --
-------------- ---------- -- -
---------------------
------------------------
--
------------ -- -
--------------------- -- ------ ---------- ---------
---
-
-
----- -------- ----------------------- ---------- -
------------------- ------------
-- -------
--- ------ ------ -- -------- -
-- ------- --- ------- -
------------------- ---------- -----------------------
-
-
--- ----- ------ - -- ------- -
--------------------- ---- --------- ---
-- ----
--- ------ ------ -- -------- -
-- ------- --- ------- -
------------------------------------ -------
-
-
-
-在这个文件中，我们增加了一个名为 clients 的数组来保存所有客户端的连接。在客户端成功连接到服务器时，我们将客户端的 WebSocket 对象添加到 clients 中并调用 handleWebSocket 函数来处理该连接。
在 handleWebSocket 函数中，我们使用 clients 数组来广播接收到的消息，以方便其他连接的客户端收到消息。
启动 WebSocket 服务器之后，我们可以创建多个 client.ts 文件来连接到该服务器，以测试多人在线游戏的效果。
总结
在本文中，我们介绍了如何使用 Deno 和 WebSocket 来实现多人在线游戏，并演示了如何创建 WebSocket 服务器和客户端，在客户端和服务器之间进行双向通信，以方便实现多人同时在线的游戏效果。
WebSocket 在实时性强、效率高的需求场景下具有很好的应用前景，我们可以将其应用于在线游戏、实时聊天等场景中。借助 Deno 提供的便利，我们可以更加方便地开发和部署 WebSocket 应用程序，并大大简化我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e350e95b1f8cacd5e28cd