前言
WebSocket 是一种在 Web 应用程序中实现双向通信的协议。它允许客户端和服务器之间进行实时通信，而无需使用 HTTP 的轮询技术。在前端开发中，WebSocket 已成为实现实时通信的首选方案。本文将介绍如何使用 Deno 实现简单的 WebSocket 服务器。
什么是 Deno？
Deno 是一个现代化的 JavaScript 和 TypeScript 运行时环境，它使用 V8 引擎和 Rust 语言编写。Deno 提供了一个安全的默认设置，可以帮助开发人员编写安全的 JavaScript 和 TypeScript 代码。与 Node.js 不同，Deno 不需要使用 npm 包管理器，它可以直接从 URL 导入模块。
实现 WebSocket 服务器
在本文中，我们将使用 Deno 实现简单的 WebSocket 服务器。我们将使用标准的 WebSocket API，以及 Deno 的标准库中的 WebSocket 模块。我们将创建一个简单的聊天室应用程序，允许多个客户端之间进行实时通信。
安装 Deno
首先，我们需要安装 Deno 运行时环境。您可以在 Deno 的官方网站上找到安装说明：https://deno.land/#installation
创建服务器
我们将从创建 WebSocket 服务器开始。在 Deno 中，我们可以使用 WebSocket 模块来创建 WebSocket 服务器。以下是创建 WebSocket 服务器的代码示例：
import { serve } from "https://deno.land/std/http/server.ts";
import {
acceptWebSocket,
isWebSocketCloseEvent,
isWebSocketPingEvent,
WebSocket,
} from "https://deno.land/std/ws/mod.ts";
async function handleWebSocket(ws: WebSocket) {
console.log("socket connected");
try {
for await (const ev of ws) {
if (typeof ev === "string") {
console.log("text message", ev);
await ws.send(ev);
} else if (ev instanceof Uint8Array) {
console.log("binary message", ev);
} else if (isWebSocketPingEvent(ev)) {
const [, body] = ev;
console.log("ping", body);
} else if (isWebSocketCloseEvent(ev)) {
const { code, reason } = ev;
console.log("close", code, reason);
}
}
} catch (err) {
console.error(`failed to receive frame: ${err}`);
if (!ws.isClosed) {
await ws.close(1000).catch(console.error);
}
}
}
async function startServer() {
const server = serve({ port: 3000 });
console.log("websocket server started on http://localhost:3000");
for await (const req of server) {
const { conn, r: bufReader, w: bufWriter, headers } = req;
try {
const ws = await acceptWebSocket({
conn,
bufReader,
bufWriter,
headers,
});
await handleWebSocket(ws);
} catch (err) {
console.error(`failed to accept websocket: ${err}`);
await req.respond({ status: 400 });
}
}
}
startServer();在上面的代码中，我们使用 Deno 的标准库中的 serve 方法创建了一个 HTTP 服务器。然后，我们使用 acceptWebSocket 方法接受 WebSocket 连接。一旦连接建立，我们就可以使用 ws 对象与客户端进行通信。
在上面的代码中，我们使用 for await 循环来监听 WebSocket 事件。当收到文本消息时，我们向所有连接的客户端广播消息。当收到二进制消息时，我们只是简单地打印消息。当收到 ping 消息时，我们只是简单地打印 ping 消息。当收到 close 消息时，我们只是简单地打印 close 消息。
创建客户端
现在，我们已经创建了 WebSocket 服务器，我们需要创建一个客户端来连接服务器。以下是创建 WebSocket 客户端的代码示例：
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat Room</title>
</head>
<body>
<input type="text" id="message" />
<button id="send">Send</button>
<ul id="messages"></ul>
<script>
const socket = new WebSocket("ws://localhost:3000");
socket.addEventListener("open", (event) => {
console.log("socket opened");
});
socket.addEventListener("message", (event) => {
console.log("received message", event.data);
const messagesElem = document.getElementById("messages");
const messageElem = document.createElement("li");
messageElem.textContent = event.data;
messagesElem.appendChild(messageElem);
});
const sendButton = document.getElementById("send");
const messageInput = document.getElementById("message");
sendButton.addEventListener("click", (event) => {
const message = messageInput.value;
socket.send(message);
messageInput.value = "";
});
</script>
</body>
</html>在上面的代码中，我们使用 new WebSocket 构造函数创建了一个 WebSocket 客户端。我们将客户端连接到服务器的 URL。当 WebSocket 连接建立时，我们将在控制台中打印消息。当我们收到文本消息时，我们将在页面上显示消息。当用户单击“发送”按钮时，我们将文本框中的消息发送到服务器。
运行代码
现在，我们已经创建了 WebSocket 服务器和客户端，我们可以运行代码并测试它们。首先，我们需要在终端中运行 WebSocket 服务器：
deno run --allow-net server.ts
然后，我们需要在浏览器中打开客户端文件（例如，index.html 文件）。在控制台中，我们应该看到一条消息，表示 WebSocket 连接已建立。我们可以在文本框中输入消息，并单击“发送”按钮发送消息。发送的消息将立即在所有连接的客户端之间进行广播。
总结
在本文中，我们介绍了如何使用 Deno 实现简单的 WebSocket 服务器。我们创建了一个简单的聊天室应用程序，允许多个客户端之间进行实时通信。我们还介绍了如何创建 WebSocket 客户端，并在页面上显示消息。Deno 提供了一种现代化的 JavaScript 和 TypeScript 运行时环境，可以帮助开发人员编写安全的 JavaScript 和 TypeScript 代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658e58eaeb4cecbf2d423f18