SSE 及其用法

什么是 SSE？

SSE，即 Server-Sent Events，是一种实现服务器向客户端推送数据的技术。它基于 HTTP 协议，使用简单清晰的 API，可以让服务器端实时地向客户端推送数据，而不需要客户端发起请求。

SSE 主要应用于需要实时更新数据的 web 应用程序，如股票价格、即时消息、实时新闻等。与 WebSockets 相比，SSE 更加轻量级，不需要建立全双工的长连接，适用于一些简单的应用场景。

SSE 的用法

服务端

服务端推送 SSE 数据需要遵循以下几个步骤：

1. 在 HTTP 头中设置 Content-Type 为 text/event-stream；
2. 发送一个 200 状态码；
3. 发送一些初始化的数据，如事件名和 ID；
4. 发送数据，每个数据由一个事件名和内容组成，中间使用两个换行符分隔；
5. 保持连接不断开。

下面是一个 Node.js 的例子：

const http = require('http');

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

  let id = 0;

  setInterval(() => {
    const data = {
      id: id++,
      message: 'Hello, SSE!'
    };

    res.write(`id: ${data.id}\n`);
    res.write(`event: message\n`);
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  }, 1000);
}).listen(3000);

客户端

客户端接收 SSE 数据需要使用 EventSource 对象。EventSource 对象会自动处理 SSE 的内容，并触发相应的事件。常用的事件有 message 和 error。下面是一个示例：

const source = new EventSource('/sse');

source.addEventListener('message', event => {
  console.log(event.data);
});

source.addEventListener('error', event => {
  console.error(event);
});

SSE 的指导意义

SSE 可以让 web 应用程序更加实时，提高用户体验。它适用于一些简单的应用场景，如实时消息、股票价格、实时新闻等。

但是需要注意，SSE 与 HTTP 协议本身并没有什么区别，所以它的安全性需要开发者自行保证。同时，由于 SSE 只支持单向通信，所以在一些需要双向通信的场景下，需要使用其他技术，如 WebSockets。

总结

SSE 是一种实现服务器向客户端推送数据的技术，它基于 HTTP 协议，使用简单清晰的 API，可以让服务器端实时地向客户端推送数据，而不需要客户端发起请求。SSE 适用于一些简单的应用场景，如实时消息、股票价格、实时新闻等。但是需要注意，SSE 的安全性需要开发者自行保证。

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