Deno 中的 WebSocket 广播示例

前言

Deno 是一个新兴的 JavaScript 和 TypeScript 运行时环境，使用 Rust 语言编写，由 Node.js 的创始人之一 Ryan Dahl 开发。Deno 具有许多优点，例如安全性高、内置模块、支持 TypeScript 等，越来越受到前端开发者的关注。本文将介绍 Deno 中 WebSocket 广播的示例，希望对前端开发者有所帮助。

WebSocket 简介

WebSocket 是一种网络通信协议，可以实现客户端和服务器之间双向通信。它不同于 HTTP 请求，可以在客户端和服务器之间创建持久的连接，从而实现实时通信。WebSocket 通信可以使用 JavaScript 中的 WebSocket API 进行操作。

Deno 中 WebSocket 的使用

Deno 中内置了 WebSocket 的模块，通过这个模块可以快速实现 WebSocket 通信。下面是一个简单的 WebSocket 服务器示例：

import { serve } from "https://deno.land/std/http/server.ts";
import { acceptWebSocket } from "https://deno.land/std/ws/mod.ts";

const server = serve({ port: 8000 });
console.log("http://localhost:8000/");

for await (const req of server) {
  if (req.url === "/ws") {
    const { conn, r: bufReader, w: bufWriter, headers } = req;
    acceptWebSocket({
      conn,
      bufReader,
      bufWriter,
      headers,
    }).then(processWebSocket);
  } else {
    req.respond({ body: "Hello World\n" });
  }
}

async function processWebSocket(ws: WebSocket) {
  for await (const event of ws) {
    if (typeof event === "string") {
      console.log("Received string:", event);
      ws.send(event);
    } else if (event instanceof Uint8Array) {
      console.log("Received binary:", event);
    }
  }
}

上面的代码创建了一个 WebSocket 服务器，监听 8000 端口。当客户端连接到 /ws 接口时，将会创建一个 WebSocket 连接，然后通过 processWebSocket 函数来处理 WebSocket 事件。当客户端发送字符串消息时，服务器将会打印出消息并且回发给客户端。当客户端发送二进制数据时，服务器将会忽略该消息。

WebSocket 广播示例

接下来，我们将实现一个简单的 WebSocket 广播示例。在这个示例中，我们将创建一个 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: 8000 });
console.log("http://localhost:8000/");

let sockets: WebSocket[] = [];

for await (const req of server) {
  if (req.url === "/ws") {
    const { conn, r: bufReader, w: bufWriter, headers } = req;
    acceptWebSocket({
      conn,
      bufReader,
      bufWriter,
      headers,
    }).then(processWebSocket);
  } else {
    req.respond({ body: "Hello World\n" });
  }
}

async function processWebSocket(ws: WebSocket) {
  sockets.push(ws);
  broadcast(`${ws.conn.remoteAddr} connected`);

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

  sockets = sockets.filter((socket) => socket !== ws);
  broadcast(`${ws.conn.remoteAddr} disconnected`);
}

function broadcast(message: string) {
  for (const socket of sockets) {
    socket.send(message);
  }
}

上面的代码创建了一个 WebSocket 服务器，当客户端连接到 /ws 接口时，将会创建一个 WebSocket 连接，并将其存储在全局的 sockets 数组中。每次收到消息时，服务器将会将其广播给所有已连接的客户端。

总结

本文介绍了 Deno 中的 WebSocket 广播示例，希望能够帮助前端开发者更好地使用 WebSocket 进行实时通信。WebSocket 是一个非常强大的工具，可以帮助我们轻松实现实时通信，为我们的应用程序提供更好的用户体验。

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