如何通过 SSE 实现实时监测系统-JavaScript中文网-JavaScript教程资源分享门户

SSE（Server-Sent Events）是一种服务器推送技术，通过 HTTP 协议实现服务器向客户端单向推送数据，常用于实现实时监测系统。本文将介绍如何通过 SSE 实现实时监测系统，包括 SSE 的基本原理、使用 SSE 推送数据的步骤、如何处理 SSE 推送的数据以及示例代码。

SSE 基本原理

SSE 是通过 HTTP 协议实现的服务器推送技术，其原理如下：

客户端向服务器发送一个 HTTP 请求，请求头中包含 Accept: text/event-stream，表示客户端希望接收 SSE 数据。
服务器向客户端发送一个 HTTP 响应，响应头中包含 Content-Type: text/event-stream，表示服务器将发送 SSE 数据。
服务器向客户端发送 SSE 数据，SSE 数据包含一个或多个事件，每个事件由以下三部分构成：
```
event: <事件名称>
data: <事件数据>
id: <事件 ID>
```
- event 表示事件名称，可以省略。
- data 表示事件数据，可以是任何文本。
- id 表示事件 ID，可以省略。
客户端接收 SSE 数据，并将其解析为事件。客户端可以通过 JavaScript 监听事件，处理事件数据。

使用 SSE 推送数据的步骤

使用 SSE 推送数据的步骤如下：

在服务器端，创建一个 SSE 连接，向客户端发送 SSE 数据。
在客户端，创建一个 EventSource 对象，监听 SSE 数据，并处理事件数据。

如何处理 SSE 推送的数据

在客户端，可以通过 JavaScript 监听事件，处理事件数据。示例代码如下：

// javascriptcn.com 代码示例
const source = new EventSource('/sse');

source.addEventListener('message', function(event) {
  console.log('Received message:', event.data);
});

source.addEventListener('error', function(event) {
  console.error('Error:', event);
});

上面的代码中，EventSource 对象监听 /sse 路径的 SSE 数据。当收到 message 事件时，打印事件数据；当收到 error 事件时，打印错误信息。

示例代码

下面是一个使用 SSE 实现实时监测系统的示例代码。

服务器端

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

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

    setInterval(() => {
      const data = Math.random().toString();
      res.write(`data: ${data}\n\n`);
    }, 1000);
  } else {
    res.writeHead(200, {
      'Content-Type': 'text/html'
    });

    res.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="UTF-8">
          <title>SSE Demo</title>
        </head>
        <body>
          <h1>SSE Demo</h1>
          <div id="output"></div>
          <script>
            const source = new EventSource('/sse');

            source.addEventListener('message', function(event) {
              const output = document.getElementById('output');
              output.innerHTML += event.data + '<br>';
            });

            source.addEventListener('error', function(event) {
              console.error('Error:', event);
            });
          </script>
        </body>
      </html>
    `);

    res.end();
  }
});

server.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

上面的代码中，创建一个 HTTP 服务器，监听 /sse 路径的 SSE 数据。每秒向客户端推送一个随机数。当客户端请求根路径时，返回一个 HTML 页面，该页面通过 JavaScript 监听 /sse 路径的 SSE 数据，并将事件数据显示在页面上。

客户端

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>SSE Demo</title>
  </head>
  <body>
    <h1>SSE Demo</h1>
    <div id="output"></div>
    <script>
      const source = new EventSource('/sse');

      source.addEventListener('message', function(event) {
        const output = document.getElementById('output');
        output.innerHTML += event.data + '<br>';
      });

      source.addEventListener('error', function(event) {
        console.error('Error:', event);
      });
    </script>
  </body>
</html>

上面的代码中，创建一个 HTML 页面，通过 JavaScript 监听 /sse 路径的 SSE 数据，并将事件数据显示在页面上。

总结

本文介绍了如何通过 SSE 实现实时监测系统，包括 SSE 的基本原理、使用 SSE 推送数据的步骤、如何处理 SSE 推送的数据以及示例代码。SSE 是一种简单、高效的实时推送技术，常用于实现实时监测系统。

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