Deno 中如何使用 WebSocket 处理实时日志？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，日志是非常重要的部分，它们能够帮助我们更好地了解应用程序的状态和运行情况。但是，我们经常需要在应用程序运行的时候实时查看日志，这时候需要一个可靠和高效的方案来处理实时日志。

WebSockets 技术提供了一种高效的双向通信机制，可以在服务端和客户端之间实时传输数据。在本文中，我们将介绍如何在 Deno 中使用 WebSocket 技术处理实时日志。

准备工作

我们先来了解一下 Deno，它是一种安全的 JavaScript 和 TypeScript 运行时环境。使用 Deno，我们可以轻松地编写 JavaScript 和 TypeScript 应用程序，同时它还提供了很多内置模块和工具，使得我们可以方便地进行网络编程、文件操作等等。我们需要先安装 Deno 环境，可以通过以下命令安装：

$ curl -fsSL https://deno.land/x/install/install.sh | sh

安装完成后，我们就可以开始编写代码了。

创建 WebSocket 服务端

首先，我们需要创建一个 WebSocket 服务端，用于传输日志数据给客户端。在 Deno 中，通过内置模块 std/ws/mod.ts 来创建 WebSocket 服务端。

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

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

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

for await (const req of server) {
  const { conn, r: bufReader, w: bufWriter, headers } = req;
  try {
    const socket = await acceptWebSocket({
      conn,
      bufReader,
      bufWriter,
      headers,
    });
    console.log("socket connected");
    // TODO: Bind websocket listeners
    for await (const ev of socket) {
      if (typeof ev === "string") {
        console.log("ws:Text", ev);
        // TODO: Send to socket
      } else if (ev instanceof Uint8Array) {
        console.log("ws:Binary", ev);
      } else if (isWebSocketCloseEvent(ev)) {
        const { code, reason } = ev;
        console.log("ws:Close", code, reason);
      }
    }
  } catch (err) {
    console.error(`Failed to accept websocket: ${err}`);
  }
}

在上面的代码中，首先通过 serve() 函数创建了一个 HTTP 服务器，并监听在 8080 端口。当有客户端连入时，服务器端会自动调用 acceptWebSocket() 方法来创建 WebSocket 连接，并进入一个无限循环的监听状态，监听从客户端发送过来的事件。

同时，我们在代码中为 WebSocket 连接注册了几个事件监听器，分别用于处理客户端发送过来的文本数据、二进制数据以及关闭事件。

值得一提的是，由于 WebSocket 是一个双向通信协议，当客户端向服务器发送数据时，服务器也可以向客户端实时推送数据。通过 socket.send() 方法，我们可以发送任意类型的数据到客户端。

监听日志文件并推送日志数据

接下来，我们需要监听日志文件，当有新日志数据产生时，将它们实时推送到客户端。在 Deno 中，可以使用内置模块 std/fs/mod.ts 来实现文件监听的功能。

首先，我们需要将日志文件搬移到 log 文件夹下，并将文件名设置为 test.log，接着我们可以按照以下方式监听文件变化：

// javascriptcn.com 代码示例
import { watch } from "https://deno.land/std/fs/mod.ts";

const watcher = watch("./logs/test.log");
for await (const event of watcher) {
  if (event.kind === "modify") {
    console.log(event.path, event.kind);
    const file = await Deno.open("./logs/test.log");
    const content = await Deno.readAll(file);
    socket.send(content);
    file.close();
  }
}

在上面的代码中，我们先调用 watch() 方法来监听指定的日志文件（此处为 ./logs/test.log）。当文件被修改时，我们将打开文件、读取文件内容，并使用 socket.send() 方法将日志数据发送给客户端。

创建客户端

最后，我们需要创建一个 WebSocket 客户端，用于连接到 WebSocket 服务端，接收服务端推送过来的实时日志数据。在浏览器环境下，我们可以使用 JavaScript 来创建 WebSocket 客户端，而在 Deno 环境下，我们可以使用内置模块 std/ws/mod.ts 来创建 WebSocket 客户端。

// javascriptcn.com 代码示例
const socket = new WebSocket("ws://localhost:8080");
socket.onopen = function () {
  console.log("WebSocket is open");
};

socket.onerror = function (error) {
  console.error(`WebSocket error: ${error}`);
};

socket.onmessage = function (event) {
  console.log(`Message from server: ${event.data}`);
};

socket.onclose = function (event) {
  console.log("WebSocket is closed now.");
};

在上面的代码中，我们首先创建了一个 WebSocket 连接，连接到之前创建的 WebSocket 服务端，当连接成功时，服务端会调用回调函数 socket.onopen，我们在此处可以执行一些初始化操作。

同时，当服务端发送过来实时日志数据时，客户端会调用回调函数 socket.onmessage()，我们可以在此函数中处理日志数据。

当 WebSocket 连接关闭时，服务端会调用回调函数 socket.onclose()，我们可以在此处清理资源，并进行一些收尾工作。

总结

通过本文的介绍，我们学习了使用 Deno 和 WebSocket 技术处理实时日志的基本原理，并创建了一个简单的实时日志系统。使用 WebSocket 技术，我们可以轻松地实现客户端和服务端之间的双向通信，为实时日志处理提供了一个高效和可靠的技术方案。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64fbf4a1f6b2d6eab31fc9c2