Deno 中使用 WebSocket 实现多人在线游戏的完整教程-JavaScript中文网-JavaScript教程资源分享门户

前言

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 文件，并编写以下代码：

// javascriptcn.com 代码示例
import { serve } from 'https://deno.land/std/http/server.ts';
import { acceptWebSocket, acceptable } from 'https://deno.land/std/ws/mod.ts';

const PORT = 8080;

const server = serve({ port: PORT });

console.log('WebSocket server started on port', PORT);

for await (const req of server) {
  if (req.url === '/ws' && acceptable(req)) {
    const { conn, r: bufReader, w: bufWriter, headers } = req;
    acceptWebSocket({ conn, bufReader, bufWriter, headers })
      .then(handleWebSocket)
      .catch((err) => {
        console.error(`Failed to accept websocket: ${err}`);
      });
  }
}

async function handleWebSocket(socket: WebSocket) {
  console.log('Client connected');
  for await (const e of socket) {
    console.log('Received from client:', e);
    socket.send(`Hello, you said "${e}"`);
  }
}

在这个文件中，我们首先使用 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 文件，并编写以下代码：

// javascriptcn.com 代码示例
import { serve } from 'https://deno.land/std/http/server.ts';
import { acceptWebSocket, acceptable } from 'https://deno.land/std/ws/mod.ts';

const PORT = 8080;
let clients: WebSocket[] = [];

const server = serve({ port: PORT });

console.log('WebSocket server started on port', PORT);

for await (const req of server) {
  if (req.url === '/ws' && acceptable(req)) {
    const { conn, r: bufReader, w: bufWriter, headers } = req;
    acceptWebSocket({ conn, bufReader, bufWriter, headers })
      .then((socket: WebSocket) => {
        clients.push(socket);
        handleWebSocket(socket);
      })
      .catch((err) => {
        console.error(`Failed to accept websocket: ${err}`);
      });
  }
}

async function handleWebSocket(socket: WebSocket) {
  console.log('Client connected');

  // 通知其它客户端
  for (const client of clients) {
    if (client !== socket) {
      client.send(`Client connected: ${socket.toString()}`);
    }
  }

  for await (const e of socket) {
    console.log('Received from client:', e);

    // 广播消息
    for (const client of clients) {
      if (client !== socket) {
        client.send(`[${socket.toString()}]: ${e}`);
      }
    }
  }
}

在这个文件中，我们增加了一个名为 clients 的数组来保存所有客户端的连接。在客户端成功连接到服务器时，我们将客户端的 WebSocket 对象添加到 clients 中并调用 handleWebSocket 函数来处理该连接。

在 handleWebSocket 函数中，我们使用 clients 数组来广播接收到的消息，以方便其他连接的客户端收到消息。

启动 WebSocket 服务器之后，我们可以创建多个 client.ts 文件来连接到该服务器，以测试多人在线游戏的效果。

总结

在本文中，我们介绍了如何使用 Deno 和 WebSocket 来实现多人在线游戏，并演示了如何创建 WebSocket 服务器和客户端，在客户端和服务器之间进行双向通信，以方便实现多人同时在线的游戏效果。

WebSocket 在实时性强、效率高的需求场景下具有很好的应用前景，我们可以将其应用于在线游戏、实时聊天等场景中。借助 Deno 提供的便利，我们可以更加方便地开发和部署 WebSocket 应用程序，并大大简化我们的开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651e350e95b1f8cacd5e28cd