前言
WebSocket 是一种全双工通信协议，它建立在 TCP 协议之上，可以在客户端和服务器之间建立实时的双向通信。在游戏开发中，WebSocket 可以用来实现实时游戏玩法、聊天室等功能。
Deno 是一个新兴的 JavaScript 和 TypeScript 运行时，它提供了一种安全的方式来运行 JavaScript 代码，并且不需要任何额外的依赖或配置。在本文中，我们将介绍如何在 Deno 中使用 WebSocket 实现游戏服务器。
准备工作
在开始之前，我们需要安装 Deno 运行时。可以通过以下命令安装：
$ curl -fsSL https://deno.land/x/install/install.sh | sh
安装完成后，我们可以通过以下命令验证 Deno 是否安装成功：
$ deno --version
如果输出了版本号，则说明安装成功。
创建 WebSocket 服务器
首先，我们需要创建一个 WebSocket 服务器。可以使用 Deno 自带的 ws 模块来创建。
// javascriptcn.com 代码示例
import { serve } from "https://deno.land/std/http/server.ts";
import { acceptWebSocket, WebSocket } from "https://deno.land/std/ws/mod.ts";
const server = serve({ port: 8080 });
console.log("WebSocket server started on port 8080");
for await (const req of server) {
const { conn, r: bufReader, w: bufWriter, headers } = req;
acceptWebSocket({
conn,
bufReader,
bufWriter,
headers,
})
.then(handleWebSocket)
.catch(async (err) => {
console.error(`Failed to accept WebSocket: ${err}`);
await req.respond({ status: 400 });
});
}
async function handleWebSocket(socket: WebSocket) {
console.log("New WebSocket connection");
for await (const event of socket) {
if (typeof event === "string") {
console.log(`Received message: ${event}`);
} else if (event instanceof Uint8Array) {
console.log(`Received binary message: ${event}`);
}
}
}在上面的代码中，我们首先使用 serve 函数创建一个 HTTP 服务器，并监听 8080 端口。然后，我们使用 acceptWebSocket 函数来接受 WebSocket 连接，并处理收到的消息。
实现游戏服务器
现在，我们已经创建了 WebSocket 服务器，接下来我们需要实现游戏服务器。在本文中，我们将实现一个简单的多人在线游戏，玩家可以在游戏中移动自己的角色，并与其他玩家交互。
首先，我们需要定义一个 Player 类来表示玩家。
// javascriptcn.com 代码示例
class Player {
x: number;
y: number;
id: string;
constructor(x: number, y: number, id: string) {
this.x = x;
this.y = y;
this.id = id;
}
}Player 类包含了玩家的坐标和 ID。接下来，我们需要定义一个 Game 类来表示游戏。
// javascriptcn.com 代码示例
class Game {
players: Player[] = [];
addPlayer(player: Player) {
this.players.push(player);
}
removePlayer(player: Player) {
this.players = this.players.filter((p) => p.id !== player.id);
}
movePlayer(player: Player, x: number, y: number) {
player.x = x;
player.y = y;
}
broadcast(message: string) {
for (const player of this.players) {
player.socket.send(message);
}
}
}Game 类包含了所有玩家的列表，以及添加、删除和移动玩家的方法。broadcast 方法用于向所有玩家发送消息。
现在，我们已经定义了玩家和游戏的类，接下来我们需要修改 handleWebSocket 函数来处理游戏逻辑。
// javascriptcn.com 代码示例
async function handleWebSocket(socket: WebSocket) {
console.log("New WebSocket connection");
const player = new Player(0, 0, uuidv4());
game.addPlayer(player);
for await (const event of socket) {
if (typeof event === "string") {
const message = JSON.parse(event);
switch (message.type) {
case "move":
game.movePlayer(player, message.x, message.y);
game.broadcast(
JSON.stringify({
type: "move",
id: player.id,
x: player.x,
y: player.y,
})
);
break;
}
}
}
game.removePlayer(player);
}在上面的代码中，我们首先创建一个新的玩家，并将其加入到游戏中。然后，我们使用 for await 循环来处理收到的消息。如果收到了一个字符串类型的消息，则使用 JSON.parse 函数将其解析为 JSON 对象，并根据消息类型执行相应的操作。
在本例中，我们只实现了一个 move 消息类型，用于移动玩家。当收到一个 move 消息时，我们调用 game.movePlayer 方法来移动玩家，并向所有玩家广播一个 move 消息，包含了移动后的玩家坐标。
客户端代码
最后，我们需要编写客户端代码来连接到游戏服务器，并实现游戏逻辑。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Multiplayer Game</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const socket = new WebSocket("ws://localhost:8080");
socket.onopen = () => {
console.log("WebSocket connected");
socket.send(
JSON.stringify({
type: "move",
x: 320,
y: 240,
})
);
};
socket.onmessage = (event) => {
const message = JSON.parse(event.data);
switch (message.type) {
case "move":
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (const player of message.players) {
ctx.fillRect(player.x, player.y, 10, 10);
}
break;
}
};
canvas.addEventListener("mousemove", (event) => {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
socket.send(
JSON.stringify({
type: "move",
x,
y,
})
);
});
</script>
</body>
</html>在上面的代码中，我们首先创建一个画布，并使用 WebSocket 对象连接到游戏服务器。在连接成功后，我们向服务器发送一个 move 消息，表示玩家的初始位置。
然后，我们使用 socket.onmessage 事件监听服务器发送的消息，并根据消息类型执行相应的操作。在本例中，我们只实现了一个 move 消息类型，用于更新玩家的位置。
最后，我们使用 canvas.addEventListener 函数监听鼠标移动事件，并向服务器发送一个 move 消息，表示玩家的新位置。
总结
在本文中，我们介绍了如何在 Deno 中使用 WebSocket 实现游戏服务器。我们首先创建了一个 WebSocket 服务器，并使用 Player 和 Game 类来实现游戏逻辑。然后，我们编写了客户端代码，连接到游戏服务器，并实现了游戏逻辑。本文内容详尽，有深度和学习以及指导意义，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6556ec8ed2f5e1655d14c5bb