在 Deno 中使用 WebSocket 实现 B 站弹幕-JavaScript中文网-JavaScript教程资源分享门户

什么是 Deno

Deno 是一个安全的 TypeScript 运行时环境，由 Node.js 的原作者 Ryan Dahl 开发。它解决了 Node.js 中一些问题，比如模块管理、包管理和安全性等问题。

什么是 WebSocket

WebSocket 是一种网络协议，用于实现从服务器到客户端的实时通信。相比起传统 HTTP 请求，WebSocket 可以实现更低的延迟和更少的网络消耗。

B 站弹幕是什么

B 站弹幕就是指在 Bilibili 观看视频时，观众可以在视频中发送实时弹幕，弹幕会在视频中滚动显示，使观众互动更加强烈。

在 Deno 中实现 B 站弹幕

1. 创建 WebSocket 服务器

我们可以使用 deno 实现一个 WebSocket 服务器，该服务器可以接收并处理客户端发送的弹幕。为了完成这个目标，需要使用标准的 WebSocket API。下面是一个示例代码：

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

const server = serve({ port: 8080 });

console.log("WebSocket server started on ws://localhost:8080");

for await (const req of server) {
  const { conn, r: bufReader, w: bufWriter, headers } = req;
  acceptWebSocket({ conn, bufReader, bufWriter, headers }).then(
    async (socket) => {
      console.log("socket connected");

      for await (const ev of socket) {
        if (isWebSocketCloseEvent(ev)) {
          console.log("socket closed");
          break;
        }

        if (typeof ev === "string") {
          console.log("message received: ", ev);
        } else if (ev instanceof Uint8Array) {
          console.log("binary message received: ", ev);
        }
      }
    }
  );
}

2. 接收客户端发送的消息并广播

当一个客户端连接到 WebSocket 服务器时，会执行上面的代码中的 acceptWebSocket() 函数，如果成功连接，则使用 for-await 循环监听客户端发送的消息。每当收到消息时，将消息广播到所有的客户端。

// javascriptcn.com 代码示例
const connections = new Set();

for await (const req of server) {
  const { conn, r: bufReader, w: bufWriter, headers } = req;
  acceptWebSocket({ conn, bufReader, bufWriter, headers }).then(
    async (socket) => {
      console.log("socket connected");
      connections.add(socket);

      for await (const ev of socket) {
        if (isWebSocketCloseEvent(ev)) {
          console.log("socket closed");
          connections.delete(socket);
          break;
        }

        if (typeof ev === "string") {
          console.log("message received: ", ev);
          connections.forEach(async (socket) => {
            await socket.send(ev); // 广播消息
          });
        } else if (ev instanceof Uint8Array) {
          console.log("binary message received: ", ev);
          connections.forEach(async (socket) => {
            await socket.send(ev); // 广播消息
          });
        }
      }
    }
  );
}

3. 使用前端页面向 WebSocket 服务器发送消息

最后，我们可以使用前端页面向 WebSocket 服务器发送消息，比如弹幕信息。在浏览器中使用 WebSocket API 连接到上面的 WebSocket 服务器，并监听连接成功事件。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>B 站弹幕示例</title>
    <script>
      const socket = new WebSocket("ws://localhost:8080");

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

        setInterval(() => {
          const msgs = [
            "哈哈哈哈哈哈哈哈哈哈哈哈哈",
            "好评好评",
            "666666666666666666666666",
          ];
          const msg = msgs[Math.floor(Math.random() * msgs.length)];
          socket.send(msg);
        }, 1000);
      };

      socket.onmessage = (event) => {
        console.log("received:", event.data);
        const div = document.createElement("div");
        div.innerHTML = event.data;
        document.body.appendChild(div);
      };

      socket.onclose = (event) => {
        console.log("socket closed");
      };
    </script>
  </head>
  <body>
    <h1>请观看视频并发送弹幕</h1>
  </body>
</html>

4. 运行 WebSocket 服务器和前端页面

在终端中打开 WebSocket 服务器：

deno run --allow-net index.ts

在浏览器中打开前端页面，你会看到类似这样的输出：

socket connected
message received:  好评好评
message received:  666666666666666666666666
message received:  哈哈哈哈哈哈哈哈哈哈哈哈哈

5. 总结

本文介绍了如何使用 deno 的 WebSocket API 实现 B 站弹幕。我们可以创建 WebSocket 服务器和前端页面，当用户在前端页面中输入弹幕时，会发送到 WebSocket 服务器端，然后服务器会将弹幕广播到所有正在观看视频的用户。

使用 WebSocket 能够有效减少网络延迟和网络资源的消耗，从而提高实时互动的质量。

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