如何使用 SSE 对数据进行监测-JavaScript中文网-JavaScript教程资源分享门户

什么是SSE？

SSE（Server-Sent Events，服务器发送事件）是一种Web API，它允许在浏览器和服务器之间建立单向连接，使服务器可以实时向客户端发送数据。这意味着在不刷新页面的情况下，服务器可以向客户端推送实时更新的数据。

SSE的优势

相比于传统的轮询（polling）和长轮询（long polling）技术，SSE有以下优势：

实时性更高：SSE使用长连接，在连接保持的情况下，服务器可以实时向客户端推送数据，不需要客户端一直发送请求获取数据。
降低服务器压力：SSE使用的长连接可以减少服务器响应请求的次数，从而减少服务器的压力。
降低带宽占用：SSE对比其他技术，可以减少网络上的流量，因为服务器只发送最新的数据。

如何使用SSE？

使用SSE需要以下步骤：

打开一个SSE连接：在客户端中创建一个EventSource对象，指定连接的URL。如下所示：
```
const source = new EventSource('/sse');
```
监听来自服务器的消息：使用source对象的onmessage属性监听服务器发送的数据。如下所示：
```
source.onmessage = function (event) {
    console.log(event.data);
};
```
服务器发送消息：在服务器端，通过发送专门格式的数据来传递消息。如下所示：
```
res.write("data: {\"message\":\"Hello SSE!\"}\n\n");
```
发送的数据必须是以 “data:” 开头，以两个换行符结尾，中间包含需要传输的数据，采用JSON格式通常是最佳选择。

示例代码

客户端

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SSE Example</title>
</head>
<body>
  <script>
    const source = new EventSource('/sse');
    source.onmessage = function (event) {
      console.log(event.data);
    };
  </script>
</body>
</html>

服务器端

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

http.createServer((req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.setHeader('Access-Control-Allow-Origin', '*');
  setInterval(() => {
    res.write("data: {\"message\":\"Hello SSE!\"}\n\n");
  }, 1000);
}).listen(8080);

在上面的示例中，服务器每隔1秒钟会向客户端发送一条数据。在实际使用中，我们可以根据业务需求创建不同的事件源（EventSource），服务端收到订阅后根据不同的事件源分别向客户端发送数据。

总结

SSE作为一种非常实用的技术，可以充分利用Web API实现实时监测，并降低服务器压力，减少带宽占用。在实际开发中，SSE可以用于不少场景，例如在社交网站或者实时金融场景下展示最新数据等等。最后提醒一点，SSE和WebSocket虽然都可以实现实时通信，但是SSE的使用场景和优点并不是完全替代WebSocket的，需要开发者根据具体情况选择使用。

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