SSE 服务器端推送管理技巧-JavaScript中文网-JavaScript教程资源分享门户

概述

SSE（Server-Sent Events）是一种用于服务器主动向客户端发送数据的技术。相比于传统的 AJAX 轮询方式，SSE 可以在服务器有新数据时立即将其推送给客户端。SSE 主要用于一些实时性要求较高的应用场景，如在线聊天、股票行情等。

本文将深入探讨 SSE 的原理及使用技巧，并提供示例代码作为参考。

原理

SSE 使用了 HTML5 中的 EventSource 接口，客户端通过 EventSource 实例与服务器建立连接，服务器则通过 HTTP 1.1 协议的持久连接不断向客户端发送数据。具体流程如下：

客户端通过 EventSource 对象实例化一个连接，向指定 URL 发送请求。
服务器接收到客户端请求后，将请求头中的“accept”设置为“text/event-stream”，表示返回的数据为事件流。
服务器发送响应头“Content-Type: text/event-stream”，表示返回的是 SSE 数据流。
服务器不断向客户端发送数据，每条数据以“event:”、“data:”等为前缀，表示数据类型及数据内容，以“\n\n”结尾，表示发送完成。

使用技巧

服务器端的 SSE 推送

使用 SSE 时，服务器端需要实现一定的推送机制，以便在有新数据时向客户端发送数据。以下是一些常见的 SSE 推送方法：

定时发送

通过 setTimeout() 或 setInterval() 等方法定时向客户端发送数据，这种方法适用于数据刷新频率较低的情况。

setInterval(function() {
  response.write('data: ' + new Date() + '\n\n');
}, 1000);

事件触发

通过监听特定事件，在事件触发时向客户端发送数据。这种方法适用于事件发生频率较高的情况。

var evt = new EventEmitter();
evt.on('message', function(data) {
  response.write('data: ' + data + '\n\n');
});

数据推送

当有新数据时，立即将数据推送给客户端。这种方法适用于需要立即向客户端发送数据的情况。

function send(data) {
  response.write('data: ' + data + '\n\n');
}

客户端的 SSE 接收

客户端可以通过 EventSource 对象的事件监听函数，实现对服务器推送数据的实时接收。

var source = new EventSource('/sse');
source.addEventListener('message', function(message) {
  console.log(message.data);
});

在接收到服务器推送的数据时，可以根据数据的类型进行相应的操作，如将数据渲染到页面上，更新页面状态等。

示例代码

以下是一个简单的 SSE 推送示例，服务器实时向客户端推送时间：

const http = require('http');
const EventEmtitter = require('events');

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

    setInterval(() => {
      response.write(`data: ${new Date()}\n\n`);
    }, 1000);
  } else {
    response.writeHead(200, { "Content-Type": "text/html" });
    response.end(`
      <!doctype html>
      <html>
        <head>
          <title>SSE Demo</title>
        </head>
        <body>
          <h1>Server-Sent Events Demo</h1>
          <div id="time"></div>

          <script>
            const source = new EventSource('/sse');
            const timeElem = document.getElementById('time');

            source.addEventListener('message', (event) => {
              const time = event.data;
              timeElem.innerHTML = time;
            });
          </script>
        </body>
      </html>
    `);
  }
}).listen(8888);

在浏览器中访问 http://localhost:8888/ 即可查看实时时间。

总结

本文深入探讨了 SSE 的原理及使用技巧，并提供了示例代码作为参考。在实际开发中，可以根据具体业务需求，选择合适的 SSE 推送方式，并使用 EventSource 接口实现实时数据接收。

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

SSE 服务器端推送管理技巧

概述

原理