Deno 中使用 WebSocket 进行实时数据更新

介绍

WebSocket 是 HTML5 中的一种新协议，它实现了客户端与服务器之间的实时双向通信。在很多实时应用程序中，例如聊天室、即时游戏、股票交易等，都用到了 WebSocket，以实现数据的实时更新。在本篇文章中，我们将介绍如何在 Deno 中使用 WebSocket 实现实时数据更新。

WebSocket 的工作原理

在传统的 HTTP 协议中，客户端请求服务器获得数据，而服务器不能主动推送数据给客户端。而 WebSocket 协议则可以让服务器和客户端之间实时地进行双向通信，使得服务器能够主动推送数据给客户端。

在 WebSocket 中，客户端发送一个 HTTP 请求到服务器，包含一个 Upgrade 头部，请求升级为 WebSocket 协议。 服务器收到这个请求后，响应101协议切换，并在后续的通信中使用 WebSocket 协议。

在 Deno 中使用 WebSocket

Deno 内置了 WebSocket 的实现库，我们可以很方便地使用它来实现 WebSocket 的数据通信。

依赖安装

在使用 WebSocket 前，我们需要安装 deno 预设的 WebSocket 模块：

deno install --unstable -A https://deno.land/std/ws/mod.ts

服务端代码示例

我们可以使用 Deno 的文件 API 创建一个 WebSocket 服务器。以下的示例代码将会在服务器接收到信息时，将信息广播给所有连接的客户端。本示例用于实现一个简单的聊天室。

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

const PORT = 3000;
let sockets: WebSocket[] = [];

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

console.log(`WebSocket server is started on port ${PORT}.`);

for await (const req of server) {
   if (acceptable(req)) {
      acceptWebSocket({
         conn: req.conn,
         bufReader: req.r,
         bufWriter: req.w,
         headers: req.headers,
      }).then((ws: WebSocket) => {
            console.log("new socket");
            sockets.push(ws);

            ws.onmessage = (msg: WebSocketEvent) => {
                  console.log(`socket message: ${msg}`); // 接收到消息打印
                  sockets.forEach((socket: WebSocket) => {
                  socket.send(`${msg}`); // 广播消息给所有客户端
               });
            }

            ws.onclose = () => {
                  console.log("socket closed");
                  sockets = sockets.filter((socket: WebSocket) => socket !== ws);
            }
      })
   }
}

客户端代码示例

客户端发送消息并接收服务器的广播消息。以下的示例代码展示了如何发送和接收 WebSocket 消息。

let socket = new WebSocket("ws://localhost:3000");

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

document.querySelector('#form').addEventListener('submit', (e) => {
    e.preventDefault();
    let input = document.querySelector('#input');
    socket.send(input.value);
    input.value = "";
});

总结

本篇文章介绍了在 Deno 中使用 WebSocket 实现实时数据更新。我们简单了解了 WebSocket 的原理，安装了 deno 的 WebSocket 模块并实现了一个简单聊天室的服务端和客户端代码。希望此文对于正在学习 Deno 和 WebSocket 的读者有所帮助。

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