SSE代替轮询？

什么是 SSE

SSE（Server-Sent Events，服务器发送事件），为特定目的而扩展的 HTTP 协议，用于实现服务器向客户端推送实时数据的单向通信。如果连接断开，浏览器会自动重连，传输的数据基于文本格式。

SSE 的传输属于流式传输，流式传输的定义就是允许数据在发送方和接收方在建立连接之后，以连续的流的形式传输，不需要频繁的断开和建立连接。

几个重点：

• 单向通信，服务端向客户端推送数据，客户端无法发送数据给客户端
• 基于 HTTP 协议
• 如果连接断开，浏览器会自动重新连接
• SSE 仅支持文本数据传输

SSE demo

node:

const http = require('http');

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

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

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randmoMessage(res) {
  let time = getRandomInt(2, 5) * 1000;
  setTimeout(() => {
    res.write(`data: ${JSON.stringify({ interval: time })}\n\n`);
    randmoMessage(res);
  }, time)
}

html:

结果：

一些探讨

• 占用浏览器连接数：浏览器限制了 HTTP 的并发，这算是一个比较致命的缺点，当然，专门一个域名使用那就不算缺点，否则轮询可能还是比较好的选择
• 请求参数和请求头：参数可以用 url，且本身不支持自定义请求头，请求头需要 Fetch 或 XMLHttpRequest 初始化会话设置（查到了，但是没试验）
• 与 websocket 对比：websocket 拥有更高的传输效率和更低的延迟，抛开技术实现，SSE 对服务器压力会小一些
• 使用场景：MDN 给出的推荐使用场景，处理如社交媒体状态更新、消息来源（news feed）或将数据传递到客户端存储机制（如 IndexedDB 或 web 存储）之类的，所有的技术都不可能十全十美，最重要的是适合，所以什么场景使用都要根据现实情况来决定，比如个人觉得消息通知、数据大屏等就很值得使用
• chatgpt 的交互方式是否也可以用 SSE：看起来流式传输很适合做这样的交互，后端返回什么，前端渲染什么，不过，chatgpt 看起来是使用 websocket，在 network 里面只有找到 websocket 一直在响应

以前确实是不知道有这么个 API，以后要是有机会，某些场景应该是可以尝试一下。

欢迎关注订阅号 coding个人笔记