如何在 Deno 项目中使用 WebSocket-JavaScript中文网-JavaScript教程资源分享门户

WebSocket 是一种基于 TCP 协议的网络协议，它可以在客户端和服务器之间建立双向通信的连接。在前端开发中，我们经常使用 WebSocket 技术来实现实时通信和数据推送功能。而在 Deno 项目中，我们同样可以使用 WebSocket 来实现类似的功能。

本文将介绍如何在 Deno 项目中使用 WebSocket，包括如何创建 WebSocket 服务器和客户端，以及如何进行消息的发送和接收。

创建 WebSocket 服务器

在 Deno 中创建 WebSocket 服务器非常简单，只需要使用内置的 WebSocketServer 类即可。下面是一个简单的示例，它创建了一个 WebSocket 服务器，并在接收到客户端连接时向客户端发送一条消息：

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

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;
  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(ws: WebSocket) {
  console.log("WebSocket connected!");

  for await (const ev of ws) {
    if (typeof ev === "string") {
      console.log(`Received message: ${ev}`);
      await ws.send(`You said: ${ev}`);
    } else if (ev instanceof Uint8Array) {
      console.log(`Received binary message: ${ev}`);
    } else if (isWebSocketPingEvent(ev)) {
      console.log(`Received ping`);
    } else if (isWebSocketCloseEvent(ev)) {
      console.log(`WebSocket closed: code=${ev.code}, reason=${ev.reason}`);
    }
  }
}

在上面的代码中，我们首先创建了一个 HTTP 服务器，并监听 8080 端口。然后，我们使用 acceptWebSocket 函数来接受客户端的 WebSocket 连接，并将连接对象传递给 handleWebSocket 函数进行处理。

在 handleWebSocket 函数中，我们使用 for await...of 循环来接收客户端发送的消息。如果消息是字符串类型，我们将其打印到控制台，并向客户端发送一条回复消息。如果消息是二进制类型，我们同样将其打印到控制台。

创建 WebSocket 客户端

在 Deno 中创建 WebSocket 客户端同样非常简单，只需要使用内置的 WebSocket 类即可。下面是一个简单的示例，它创建了一个 WebSocket 客户端，并向服务器发送一条消息：

// javascriptcn.com 代码示例
import { WebSocket } from "https://deno.land/std/ws/mod.ts";

const ws = new WebSocket("ws://localhost:8080");

ws.onopen = () => {
  console.log("WebSocket connected!");
  ws.send("Hello, server!");
};

ws.onmessage = (ev) => {
  console.log(`Received message: ${ev.data}`);
};

ws.onclose = (ev) => {
  console.log(`WebSocket closed: code=${ev.code}, reason=${ev.reason}`);
};

ws.onerror = (ev) => {
  console.error(`WebSocket error: ${ev.error}`);
};

在上面的代码中，我们首先创建了一个 WebSocket 对象，并传入服务器的地址。然后，我们分别监听 onopen、onmessage、onclose 和 onerror 事件，以便在 WebSocket 连接建立、接收到消息、关闭和出错时进行相应的处理。

在 onopen 事件中，我们向服务器发送一条消息。在 onmessage 事件中，我们将接收到的消息打印到控制台。在 onclose 和 onerror 事件中，我们同样将相应的信息打印到控制台。

发送和接收消息

在 Deno 中，我们可以使用 send 方法向 WebSocket 对象发送消息，使用 onmessage 事件监听接收到的消息。下面是一个简单的示例，它向 WebSocket 服务器发送一条消息，并接收服务器的回复消息：

// javascriptcn.com 代码示例
import { WebSocket } from "https://deno.land/std/ws/mod.ts";

const ws = new WebSocket("ws://localhost:8080");

ws.onopen = () => {
  console.log("WebSocket connected!");
  ws.send("Hello, server!");
};

ws.onmessage = (ev) => {
  console.log(`Received message: ${ev.data}`);
};

ws.onclose = (ev) => {
  console.log(`WebSocket closed: code=${ev.code}, reason=${ev.reason}`);
};

ws.onerror = (ev) => {
  console.error(`WebSocket error: ${ev.error}`);
};

在上面的代码中，我们在 onopen 事件中向服务器发送一条消息。在 onmessage 事件中，我们将接收到的消息打印到控制台。

总结

本文介绍了如何在 Deno 项目中使用 WebSocket，包括如何创建 WebSocket 服务器和客户端，以及如何进行消息的发送和接收。WebSocket 技术可以为我们提供实时通信和数据推送功能，它在前端和后端开发中都有广泛的应用。在 Deno 项目中使用 WebSocket 可以使我们更方便地实现这些功能，同时也可以提高我们的开发效率。

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