如何在 Deno 应用程序中使用 WebSocket 进行实时数据传输-JavaScript中文网-JavaScript教程资源分享门户

WebSocket 是一种在 Web 应用程序中实现实时数据传输的协议。它允许客户端和服务器之间建立一个持久的连接，以便在双方之间实时地发送数据。在前端开发中，我们通常使用 WebSocket 来实现实时聊天、实时数据更新等功能。而在 Deno 应用程序中，我们同样可以使用 WebSocket 来进行实时数据传输。

本文将详细介绍如何在 Deno 应用程序中使用 WebSocket 进行实时数据传输，包括如何创建 WebSocket 服务器和客户端，以及如何在它们之间传输数据。

创建 WebSocket 服务器

要创建一个 WebSocket 服务器，我们需要使用 Deno 自带的标准库中的 WebSocket 类。首先，我们需要创建一个 HTTP 服务器，然后将其升级为 WebSocket 服务器，如下所示：

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("HTTP server listening on port 8080");

for await (const req of server) {
  if (req.url === "/ws") {
    const { conn, r: bufReader, w: bufWriter, headers } = req;
    acceptWebSocket({
      conn,
      bufReader,
      bufWriter,
      headers,
    }).then(handleWebSocket);
  } else {
    req.respond({
      status: 200,
      body: "Hello, Deno!",
    });
  }
}

async function handleWebSocket(ws: WebSocket) {
  console.log("WebSocket connected!");

  for await (const event of ws) {
    if (typeof event === "string") {
      console.log("Received text message:", event);
      await ws.send(`You said: ${event}`);
    } else if (event instanceof Uint8Array) {
      console.log("Received binary message:", event);
      await ws.send(event);
    }
  }

  console.log("WebSocket closed!");
}

在上面的代码中，我们首先创建了一个 HTTP 服务器，并监听在 8080 端口。当客户端发送一个 HTTP 请求到该服务器时，如果请求的 URL 是 /ws，则将其升级为 WebSocket 连接，并将其传递给 handleWebSocket 函数进行处理。handleWebSocket 函数中，我们可以接收客户端发送的消息，并向客户端发送消息。

创建 WebSocket 客户端

要创建一个 WebSocket 客户端，我们同样需要使用 Deno 自带的标准库中的 WebSocket 类。我们可以使用该类的 connect 方法来连接到 WebSocket 服务器，如下所示：

import { connectWebSocket } from "https://deno.land/std/ws/mod.ts";

const ws = await connectWebSocket("ws://localhost:8080/ws");

console.log("WebSocket connected!");

for await (const event of ws) {
  if (typeof event === "string") {
    console.log("Received text message:", event);
  } else if (event instanceof Uint8Array) {
    console.log("Received binary message:", event);
  }
}

在上面的代码中，我们使用 connectWebSocket 方法连接到 ws://localhost:8080/ws 地址上的 WebSocket 服务器，并监听来自服务器的消息。当服务器发送一个消息时，我们可以在 for 循环中接收到该消息，并进行相应的处理。

传输数据

在 WebSocket 连接建立之后，我们可以使用 send 方法向服务器或客户端发送消息。发送消息时，我们需要将消息格式化为字符串或二进制数据。例如，要向服务器发送一条文本消息，我们可以使用以下代码：

await ws.send("Hello, server!");

而服务器收到该消息后，可以在 handleWebSocket 函数中使用以下代码进行相应的处理：

console.log("Received text message:", event);
await ws.send(`You said: ${event}`);

这样，服务器就会将该消息回传给客户端，并在客户端中打印出来。

示例代码

下面是一个完整的示例代码，它演示了如何在 Deno 应用程序中创建 WebSocket 服务器和客户端，并进行实时数据传输：

// server.ts
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("HTTP server listening on port 8080");

for await (const req of server) {
  if (req.url === "/ws") {
    const { conn, r: bufReader, w: bufWriter, headers } = req;
    acceptWebSocket({
      conn,
      bufReader,
      bufWriter,
      headers,
    }).then(handleWebSocket);
  } else {
    req.respond({
      status: 200,
      body: "Hello, Deno!",
    });
  }
}

async function handleWebSocket(ws: WebSocket) {
  console.log("WebSocket connected!");

  for await (const event of ws) {
    if (typeof event === "string") {
      console.log("Received text message:", event);
      await ws.send(`You said: ${event}`);
    } else if (event instanceof Uint8Array) {
      console.log("Received binary message:", event);
      await ws.send(event);
    }
  }

  console.log("WebSocket closed!");
}

// client.ts
import { connectWebSocket } from "https://deno.land/std/ws/mod.ts";

const ws = await connectWebSocket("ws://localhost:8080/ws");

console.log("WebSocket connected!");

for await (const event of ws) {
  if (typeof event === "string") {
    console.log("Received text message:", event);
  } else if (event instanceof Uint8Array) {
    console.log("Received binary message:", event);
  }
}

await ws.send("Hello, server!");

要启动该应用程序，我们可以在终端中分别输入以下命令：

deno run --allow-net server.ts
deno run --allow-net client.ts

在客户端中，我们可以输入一些文本消息，然后按回车键发送给服务器。服务器收到该消息后，会将其回传给客户端，并在客户端中打印出来。这样，我们就成功地在 Deno 应用程序中使用 WebSocket 进行实时数据传输了。

总结

本文详细介绍了如何在 Deno 应用程序中使用 WebSocket 进行实时数据传输。我们首先介绍了如何创建 WebSocket 服务器和客户端，然后讲解了如何在它们之间传输数据。通过本文的学习，读者可以了解如何在 Deno 应用程序中使用 WebSocket 实现实时聊天、实时数据更新等功能。

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