如何在 Deno 中使用 WebSocket 进行双向通信？-JavaScript中文网-JavaScript教程资源分享门户

WebSocket 是一种现代的网络通信技术，可以实现双向通信，且在前端和后端都得到了广泛应用。而 Deno 则是一个使用与 JavaScript 和 TypeScript 相同的语法，但拓展了更多现代特性的运行时环境，旨在提供更好的开发体验和安全性。在本文中，我们将介绍如何在 Deno 中使用 WebSocket 进行双向通信，并提供示例代码，以便参考学习。

WebSocket 简介

WebSocket 是 HTML5 提出的一项新技术，它基于 TCP 协议，可以实现浏览器与服务器之间的双向通信。与传统的 HTTP 协议相比，WebSocket 使用更少的网络带宽，具有更低的延迟，可以通过握手协议实现客户端和服务器之间的全双工数据传输。

在客户端，我们可以使用浏览器内置的 WebSocket API 来实现 WebSocket 的通信功能。而在后端，则可以使用 Node.js 内置的 ws 包来实现 WebSocket 的通信。而在 Deno 中，也可以使用第三方库 std/ws 来实现 WebSocket 的通信。

在 Deno 中使用 WebSocket

使用 WebSocket 通信的基本过程如下：

建立 WebSocket 连接。
发送数据。
接收数据。
关闭连接。

在 Deno 中，我们可以使用 std/ws 中的 WebSocket 类来实现 WebSocket 的通信。首先，我们需要在代码中引入 WebSocket 类：

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

然后，我们可以使用 WebSocket 类的 connect 方法来建立 WebSocket 连接：

const socket = await WebSocket.connect("ws://localhost:8080");

在建立连接之后，我们可以使用 send 方法来发送数据：

await socket.send("Hello, WebSocket!");

使用 socket 对象的 onmessage 方法可以监听并接收消息：

socket.onmessage = (message: WebSocket.MessageEvent) => {
  console.log(message.data);
};

最后，使用 close 方法可以关闭连接：

socket.close();

示例代码

下面是一个简单的示例代码，实现了一个聊天室应用程序，可以在浏览器和服务器之间进行双向通信。

服务器代码：

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

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

for await (const req of server) {
  if (req.url === "/ws") {
    const socket = await WebSocket.accept(req);
    console.log("socket connected!");

    socket.on("message", (event) => {
      console.log("message received:", event);
      broadcast(event);
    });

    socket.on("close", () => {
      console.log("socket closed!");
    });
  } else {
    req.respond({
      body: `
        <!doctype html>
        <html>
          <head>
            <title>WebSocket Chat Room</title>
            <script>
              const socket = new WebSocket("ws://localhost:8080/ws");

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

              socket.onmessage = (event) => {
                console.log("message received:", event.data);
              };

              socket.onclose = () => {
                console.log("socket closed!");
              };

              function sendMessage() {
                const input = document.getElementById("message-input");
                const message = input.value;
                socket.send(message);
                input.value = "";
              }
            </script>
          </head>
          <body>
            <div>
              <h1>WebSocket Chat Room</h1>
              <ul id="messages"></ul>
            </div>
            <div>
              <input id="message-input" type="text">
              <button onclick="sendMessage()">Send</button>
            </div>
          </body>
        </html>
      `,
    });
  }
}

function broadcast(event: unknown): void {
  for (const socket of WebSocket.sockets) {
    socket.send(event);
  }
}

客户端代码：

打开浏览器访问 http://localhost:8080，就可以开始聊天了。

总结

WebSocket 是一种高效、低延迟的网络通信技术，在前端和后端都得到了广泛应用。在 Deno 中，我们可以使用 std/ws 中的 WebSocket 类来实现 WebSocket 的通信。本文提供了详细的示例代码，希望能够帮助您更好地理解和应用 WebSocket 的相关技术。

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