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

随着 Web 应用程序变得越来越复杂和互动，WebSockets 已成为一种极具价值的通信协议。在 Deno 中使用 WebSocket，可以让我们在 Web 应用程序开发中更加灵活和方便。

WebSocket 是什么？

WebSocket 是一种双向通信协议，它可以在单个 TCP 连接上提供长期和实时通信。使用 WebSocket 可以在客户端和服务器之间建立持久连接，从而实现数据的实时传输和共享。它不仅可以用于 Web 应用程序，还可以用于移动应用程序和 IoT 设备等各种场景。

Deno 是一个基于 V8 引擎的高性能运行时环境，它支持 JavaScript 和 TypeScript。在 Deno 中使用 WebSocket，需要安装官方提供的 WebSocket 包。

import { serve } from "http/server.ts";
import { acceptWebSocket, WebSocket } from "ws/mod.ts";

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

console.log("WebSocket server started on port 8080.");

for await (const req of server) {
  const { conn, r: bufReader, w: bufWriter, headers } = req;
  const socket = await acceptWebSocket({
    conn,
    bufReader,
    bufWriter,
    headers,
  });

  console.log("client connected");

  // 处理 WebSocket 消息
  for await (const data of socket) {
    const textData = new TextDecoder().decode(data);
    console.log(`Received message: ${textData}`);

    // 发送 WebSocket 消息
    await socket.send(`Hello, world!`);
  }

  console.log("client disconnected");
}

上述示例代码通过 import 引入了 Deno 官方提供的 WebSocket 包，并启动了一个 WebSocket 服务器。当有客户端连接时，它会打印“client connected”的消息。当客户端发送消息时，它会打印接收到的消息并回复“Hello, world!”。当客户端断开连接时，它会打印“client disconnected”的消息。

WebSocket 示例应用

为了更好的说明 WebSocket 在 Deno 中的使用，这里我们简单实现一个聊天室的例子。

服务端实现

import { serve } from "http/server.ts";
import { acceptWebSocket, WebSocket } from "ws/mod.ts";

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

console.log("WebSocket server started on port 8080.");

let sockets: WebSocket[] = [];

for await (const req of server) {
  const { conn, r: bufReader, w: bufWriter, headers } = req;
  const socket = await acceptWebSocket({
    conn,
    bufReader,
    bufWriter,
    headers,
  });
  
  sockets.push(socket);

  // 处理 WebSocket 消息
  for await (const data of socket) {
    const textData = new TextDecoder().decode(data);
    console.log(`Received message: ${textData}`);
    
    // 广播 WebSocket 消息
    sockets.forEach((s: WebSocket) => s.send(textData));
  }
}

上述示例代码是一个简单的 WebSocket 服务器，它监听端口 8080，并且在每个 WebSocket 连接成功后，将连接的客户端添加到 sockets 数组中。每次收到消息后，它会广播这个消息给所有客户端。

客户端实现

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

// 连接成功后回调
socket.addEventListener("open", (event) => {
  console.log("WebSocket connected");
});

// 收到消息后回调
socket.addEventListener("message", (event) => {
  const message = event.data;
  console.log(`Received message: ${message}`);
});

// 发送消息
function sendMessage() {
  const message = document.getElementById("message").value;
  socket.send(message);
}

上述示例代码是一个简单的 WebSocket 客户端，它连接到指定的 WebSocket 服务器，并在连接成功后打印一条欢迎消息。当收到服务器发送的消息时，它会打印这个消息。另外，它还有一个发送消息的函数，可以将用户的输入发送到服务器。

总结

WebSocket 是一种非常有用的通信协议，它可以使我们实现实时的双向通信。在 Deno 中使用 WebSocket，可以通过官方提供的 WebSocket 包轻松完成。本文提供了一个简单的聊天室示例，读者可以尝试在实战中使用 WebSocket 实现更多有趣的功能。

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