使用 Server-Sent Events 来构建实时监控系统-JavaScript中文网-JavaScript教程资源分享门户

什么是 Server-Sent Events？

Server-Sent Events（SSE）是一种服务器向客户端发送实时事件的技术。它使用 HTTP 协议，但与传统的长轮询和 WebSockets 不同，它只需要一个 HTTP 连接就能实现实时通信。

SSE 的优点包括：

实时性：服务器可以在任何时候向客户端发送事件，客户端也能即时收到。
可靠性：SSE 建立在 HTTP 协议上，因此具有很好的兼容性和稳定性。
简单性：相比于 WebSockets，SSE 的实现和使用都相对简单。

如何使用 SSE 构建实时监控系统？

实时监控系统是指可以实时监控某些数据或事件的系统。例如，我们可以使用 SSE 来监控服务器的 CPU 使用率、内存使用情况等。下面是一个使用 SSE 构建实时监控系统的示例代码：

// javascriptcn.com 代码示例
// 服务器端代码
const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/events') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });

    setInterval(() => {
      const data = {
        cpuUsage: Math.random(),
        memoryUsage: Math.random()
      };

      res.write(`event: update\n`);
      res.write(`data: ${JSON.stringify(data)}\n\n`);
    }, 1000);
  } else {
    res.writeHead(404);
    res.end();
  }
});

server.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

// javascriptcn.com 代码示例
<!-- 客户端代码 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Real-time monitoring system</title>
</head>
<body>
  <h1>Real-time monitoring system</h1>
  <div id="monitor">
    <p>CPU usage: <span id="cpuUsage"></span></p>
    <p>Memory usage: <span id="memoryUsage"></span></p>
  </div>

  <script>
    const monitor = document.querySelector('#monitor');
    const cpuUsage = document.querySelector('#cpuUsage');
    const memoryUsage = document.querySelector('#memoryUsage');

    const eventSource = new EventSource('/events');

    eventSource.addEventListener('update', (event) => {
      const data = JSON.parse(event.data);

      cpuUsage.innerText = data.cpuUsage.toFixed(2);
      memoryUsage.innerText = data.memoryUsage.toFixed(2);
    });

    eventSource.onerror = (event) => {
      console.error('EventSource error:', event);
      eventSource.close();
    };
  </script>
</body>
</html>

上面的代码中，服务器端使用 Node.js 创建了一个 HTTP 服务器，并在 /events 路径下返回 SSE 数据。每隔 1 秒钟，服务器会向客户端发送一个包含 CPU 使用率和内存使用情况的事件。客户端使用 EventSource 对象订阅 /events 路径下的事件，并在事件到达时更新页面上的数据。

总结

使用 Server-Sent Events 可以轻松地构建实时监控系统。SSE 具有实时性、可靠性和简单性等优点，适用于一些简单的实时通信场景。在实现 SSE 时，我们需要使用 EventSource 对象订阅服务器端的事件，并在事件到达时更新页面数据。

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