如何在 Deno 中部署 WebSocket 应用-JavaScript中文网-JavaScript教程资源分享门户

WebSocket 是一种基于 TCP 协议的双向通信协议，它可以在客户端和服务器之间实现实时通信，比如聊天室、游戏等应用场景。Deno 是一个现代化的 JavaScript 和 TypeScript 运行时环境，它提供了一种安全的方式来运行 JavaScript 代码。本文将介绍如何在 Deno 中部署 WebSocket 应用。

准备工作

在开始之前，我们需要安装 Deno 运行时环境。可以通过官方网站 https://deno.land/ 下载安装包或使用包管理器进行安装。安装完成后，可以通过运行以下命令来验证是否安装成功：

deno --version

创建 WebSocket 服务器

首先，我们需要创建一个 WebSocket 服务器。Deno 提供了一个内置的 WebSocket 模块，我们可以使用它来创建 WebSocket 服务器。以下是一个简单的 WebSocket 服务器示例：

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

async function handleWebSocket(sock: WebSocket) {
  try {
    for await (const ev of sock) {
      if (typeof ev === "string") {
        console.log("text", ev);
        await sock.send(ev);
      } else if (ev instanceof Uint8Array) {
        console.log("binary", ev);
        await sock.send(ev);
      } else if (isWebSocketCloseEvent(ev)) {
        const { code, reason } = ev;
        console.log("closed", code, reason);
      }
    }
  } catch (err) {
    console.error(`failed to receive frame: ${err}`);
    if (!sock.isClosed) {
      await sock.close(1000).catch(console.error);
    }
  }
}

async function main() {
  const server = serve({ port: 8080 });
  console.log("WebSocket server is running on port 8080");
  for await (const req of server) {
    const { conn, r: bufReader, w: bufWriter, headers } = req;
    try {
      const sock = await acceptWebSocket({
        conn,
        bufReader,
        bufWriter,
        headers,
      });
      console.log("socket connected!");
      handleWebSocket(sock);
    } catch (err) {
      console.error(`failed to accept websocket: ${err}`);
      await req.respond({ status: 400 });
    }
  }
}

main();

该示例中，我们使用 serve 函数创建一个 HTTP 服务器，并监听 8080 端口。在客户端发起 WebSocket 连接请求时，我们通过 acceptWebSocket 函数来接受连接，并调用 handleWebSocket 函数来处理连接。

在 handleWebSocket 函数中，我们使用 for...await 循环来接收客户端发送的消息，并通过 await sock.send 方法将消息发送回客户端。如果客户端发送的是文本消息，ev 将会是一个字符串类型，如果是二进制消息，ev 将会是一个 Uint8Array 类型。如果客户端关闭了连接，ev 将会是一个 CloseEvent 类型。

运行 WebSocket 服务器

要运行 WebSocket 服务器，只需要在终端中运行以下命令：

deno run --allow-net app.ts

其中，app.ts 是我们刚刚创建的 WebSocket 服务器代码文件。--allow-net 参数是必需的，它允许 Deno 应用程序访问网络。

创建 WebSocket 客户端

现在，我们已经创建了一个 WebSocket 服务器，接下来我们需要创建一个 WebSocket 客户端来连接服务器。以下是一个简单的 WebSocket 客户端示例：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WebSocket Client</title>
</head>
<body>
  <input type="text" id="input" placeholder="Type something...">
  <button id="send">Send</button>
  <div id="output"></div>
  <script>
    const url = "ws://localhost:8080";
    const socket = new WebSocket(url);
    const input = document.getElementById("input");
    const output = document.getElementById("output");
    const sendButton = document.getElementById("send");

    socket.onopen = () => {
      console.log("socket connected!");
    };

    socket.onmessage = (event) => {
      output.innerHTML += event.data + "<br>";
    };

    sendButton.addEventListener("click", () => {
      const message = input.value;
      input.value = "";
      socket.send(message);
    });
  </script>
</body>
</html>

该示例中，我们创建了一个 HTML 页面，并在其中创建了一个 WebSocket 客户端。在客户端加载时，我们通过 new WebSocket(url) 创建了一个 WebSocket 连接，并指定了服务器的 URL 地址。在连接建立成功后，我们可以通过 socket.send 方法来向服务器发送消息，并通过 socket.onmessage 方法来接收服务器发送的消息。

总结

本文介绍了如何在 Deno 中部署 WebSocket 应用。我们首先创建了一个 WebSocket 服务器，并在其中处理了客户端发送的消息。然后，我们运行了 WebSocket 服务器，并创建了一个 WebSocket 客户端来连接服务器。WebSocket 为我们提供了一种实时通信的方式，可以用于聊天室、游戏等应用场景。Deno 提供了一个安全的 JavaScript 运行时环境，并且内置了 WebSocket 模块，使得开发 WebSocket 应用变得更加容易和安全。

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