SSE 的推送方式及其应用场景-JavaScript中文网-JavaScript教程资源分享门户

什么是 SSE

SSE（Server-Sent Events）即服务器推送事件，是一种基于HTTP的服务器推送技术，它允许服务器端发送事件数据到客户端，而无需客户端发起请求。

SSE 的推送方式

SSE 的推送方式是服务器端通过一个HTTP连接，将数据发送到客户端的一个事件流中。客户端通过监听该事件流，来接收从服务器端发送的数据。当有新的数据到达时，服务器端将数据写入事件流，客户端则通过事件监听器的回调函数来处理该数据。

SSE 的事件流使用的是 text/event-stream 的MIME类型，客户端和服务器端的通信是单向的，即只能由服务器端向客户端发送数据，客户端不能向服务器端发送数据。

SSE 的应用场景

SSE 可以用于实现实时数据的推送，例如在线聊天室、股票行情、新闻资讯等。由于 SSE 不需要客户端发起请求，因此相比于轮询和长轮询等技术，它可以减轻服务器的压力，提高实时性。

SSE 的示例代码

下面是一个简单的 SSE 示例代码：

服务器端代码

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

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

  setInterval(() => {
    const data = new Date().toLocaleTimeString();

    res.write(`data: ${data}\n\n`);
  }, 1000);
}).listen(3000);

上述代码创建了一个 HTTP 服务器，并在 / 路径下返回一个 SSE 事件流。服务器端每秒钟会向事件流中发送一个当前时间的数据。

客户端代码

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SSE Demo</title>
</head>
<body>
  <div id="result"></div>
  <script>
    const result = document.getElementById('result');
    const eventSource = new EventSource('http://localhost:3000/');

    eventSource.onmessage = (event) => {
      result.innerText = event.data;
    };
  </script>
</body>
</html>

上述代码创建了一个 HTML 页面，页面中使用了 EventSource 对象来监听服务器端的事件流，并将接收到的数据显示在页面上。

总结

SSE 是一种基于HTTP的服务器推送技术，它可以用于实现实时数据的推送。相比于轮询和长轮询等技术，SSE 可以减轻服务器的压力，提高实时性。在实际开发中，我们可以使用 SSE 来实现在线聊天室、股票行情、新闻资讯等功能。

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