建立 Node + SSE，构建日志推送系统：实时、高效洞察日志的变化

2024-01-13 17:14:10

前言

在软件开发中，日志作为系统运行的重要信息记录，对于故障排除、性能优化、安全审计等都有着至关重要的作用。然而，传统的日志收集和查看方式往往存在着时效性差、难以实时追踪等问题，给系统监控和问题排查带来了诸多不便。

为了解决这些问题，实时日志推送技术应运而生。通过这种技术，我们可以将日志信息实时地从后端服务器推送给前端客户端，从而实现对日志的实时查看和监控。

本文将介绍如何使用 Node.js 和 Server-Sent Events (SSE) 构建一个实时日志推送系统。我们将首先了解 SSE 的工作原理，然后介绍如何建立 SSE 服务端和客户端，最后通过一个具体案例演示如何利用 SSE 进行日志推送。

SSE 简介

SSE 是一种允许服务器向客户端推送事件的协议。它使用 HTTP 长连接，服务器可以向客户端发送多个连续的事件，而客户端可以立即接收这些事件。SSE 的本质是一个 HTTP 长连接，只不过它给客户端发送的不是一次性的数据包，而是一个 stream 流，格式为 text/event-stream。所以客户端需要持续监听这个流，以便在有新事件发生时收到通知。

SSE 具有以下优点：

实时性：SSE 可以实现实时推送，客户端可以在事件发生后立即收到通知。
高效性：SSE 使用长连接，减少了服务器和客户端之间的通信次数，提高了通信效率。
简单性：SSE 的实现非常简单，只需要在服务端和客户端分别实现 SSE 服务端和客户端即可。

建立 SSE 服务端

在 Node.js 中，我们可以使用 express 框架来构建 SSE 服务端。首先，我们需要安装 express 和 SSE 模块：

npm install express sse

然后，我们可以创建一个简单的 SSE 服务端：

const express = require('express');
const SSE = require('sse');

const app = express();
const sse = new SSE();

app.get('/events', sse.middleware);

app.listen(3000);

这个 SSE 服务端很简单，它只是将 SSE 中间件添加到 express 路由中。当客户端向这个路由发起 GET 请求时，SSE 中间件会自动创建一个 SSE 客户端，并开始向客户端推送事件。

建立 SSE 客户端

在前端，我们可以使用 EventSource API 来创建 SSE 客户端。首先，我们需要在 HTML 页面中创建一个 EventSource 对象：

<script>
  const source = new EventSource('/events');

  source.addEventListener('message', (event) => {
    console.log(event.data);
  });
</script>

当 EventSource 对象创建后，它会自动向 SSE 服务端发起 GET 请求，并开始接收事件。当服务器端推送事件时，EventSource 对象会触发 message 事件，并将事件数据传递给事件处理函数。

日志推送案例

现在，我们已经了解了如何建立 SSE 服务端和客户端。接下来，我们可以通过一个具体案例来演示如何利用 SSE 进行日志推送。

假设我们有一个 Node.js 应用，它会生成日志文件。我们要做的就是将这些日志文件的内容实时地推送给前端客户端。

首先，我们需要在 Node.js 应用中添加一个 SSE 服务端：

const express = require('express');
const SSE = require('sse');

const app = express();
const sse = new SSE();

app.get('/events', sse.middleware);

// 添加日志推送路由
app.post('/logs', (req, res) => {
  const { log } = req.body;

  // 将日志信息推送到客户端
  sse.send(log);

  res.sendStatus(200);
});

app.listen(3000);

在这个 SSE 服务端中，我们添加了一个 /logs 路由，用于接收客户端发送的日志信息。当客户端向这个路由发起 POST 请求时，SSE 服务端会将日志信息推送到客户端。

接下来，我们需要在前端创建一个 SSE 客户端，用于接收日志信息：

<script>
  const source = new EventSource('/events');

  source.addEventListener('message', (event) => {
    // 将日志信息显示到页面上
    const log = document.createElement('p');
    log.textContent = event.data;
    document.body.appendChild(log);
  });
</script>