在前端开发中，日志是非常重要的部分，它们能够帮助我们更好地了解应用程序的状态和运行情况。但是，我们经常需要在应用程序运行的时候实时查看日志，这时候需要一个可靠和高效的方案来处理实时日志。
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 服务端。
-- -------------------- ---- -------
------ - ----- - ---- ---------------------------------------
------ - ---------------- --------------------- - ---- ----------------------------------
----- ---- - -----
----- ------ - ------- ---- ---
---------------------- ------ -- ------- -- -----------
--- ----- ------ --- -- ------- -
----- - ----- -- ---------- -- ---------- ------- - - ----
--- -
----- ------ - ----- -----------------
-----
----------
----------
--------
---
------------------- ------------
-- ----- ---- --------- ---------
--- ----- ------ -- -- ------- -
-- ------- -- --- --------- -
---------------------- ----
-- ----- ---- -- ------
- ---- -- --- ---------- ----------- -
------------------------ ----
- ---- -- --------------------------- -
----- - ----- ------ - - ---
----------------------- ----- --------
-
-
- ----- ----- -
--------------------- -- ------ ---------- ---------
-
-在上面的代码中，首先通过 serve() 函数创建了一个 HTTP 服务器，并监听在 8080 端口。当有客户端连入时，服务器端会自动调用 acceptWebSocket() 方法来创建 WebSocket 连接，并进入一个无限循环的监听状态，监听从客户端发送过来的事件。
同时，我们在代码中为 WebSocket 连接注册了几个事件监听器，分别用于处理客户端发送过来的文本数据、二进制数据以及关闭事件。
值得一提的是，由于 WebSocket 是一个双向通信协议，当客户端向服务器发送数据时，服务器也可以向客户端实时推送数据。通过 socket.send() 方法，我们可以发送任意类型的数据到客户端。
监听日志文件并推送日志数据
接下来，我们需要监听日志文件，当有新日志数据产生时，将它们实时推送到客户端。在 Deno 中，可以使用内置模块 std/fs/mod.ts 来实现文件监听的功能。
首先，我们需要将日志文件搬移到 log 文件夹下，并将文件名设置为 test.log，接着我们可以按照以下方式监听文件变化：
-- -------------------- ---- -------
------ - ----- - ---- ----------------------------------
----- ------- - -------------------------
--- ----- ------ ----- -- -------- -
-- ----------- --- --------- -
----------------------- ------------
----- ---- - ----- -----------------------------
----- ------- - ----- -------------------
---------------------
-------------
-
-在上面的代码中，我们先调用 watch() 方法来监听指定的日志文件（此处为 ./logs/test.log）。当文件被修改时，我们将打开文件、读取文件内容，并使用 socket.send() 方法将日志数据发送给客户端。
创建客户端
最后，我们需要创建一个 WebSocket 客户端，用于连接到 WebSocket 服务端，接收服务端推送过来的实时日志数据。在浏览器环境下，我们可以使用 JavaScript 来创建 WebSocket 客户端，而在 Deno 环境下，我们可以使用内置模块 std/ws/mod.ts 来创建 WebSocket 客户端。
-- -------------------- ---- ------- ----- ------ - --- --------------------------------- ------------- - -------- -- - ---------------------- -- ------- -- -------------- - -------- ------- - ------------------------ ------ ----------- -- ---------------- - -------- ------- - -------------------- ---- ------- ---------------- -- -------------- - -------- ------- - ---------------------- -- ------ ------- --
在上面的代码中，我们首先创建了一个 WebSocket 连接，连接到之前创建的 WebSocket 服务端，当连接成功时，服务端会调用回调函数 socket.onopen，我们在此处可以执行一些初始化操作。
同时，当服务端发送过来实时日志数据时，客户端会调用回调函数 socket.onmessage()，我们可以在此函数中处理日志数据。
当 WebSocket 连接关闭时，服务端会调用回调函数 socket.onclose()，我们可以在此处清理资源，并进行一些收尾工作。
总结
通过本文的介绍，我们学习了使用 Deno 和 WebSocket 技术处理实时日志的基本原理，并创建了一个简单的实时日志系统。使用 WebSocket 技术，我们可以轻松地实现客户端和服务端之间的双向通信，为实时日志处理提供了一个高效和可靠的技术方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fbf4a1f6b2d6eab31fc9c2