SSE代替轮询？

wade

发布于 2024-07-10 14:13:59

11200

代码可运行

文章被收录于专栏：coding个人笔记coding个人笔记

运行总次数：0

代码可运行

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:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SSE</title>
</head>
<body>
  <div id="content"></div>
  <script>
    const eventSource = new EventSource('http://localhost:3000/events');
    const el = document.getElementById('content');

    eventSource.onmessage = function(event) {
      const elP = document.createElement("p");
      const data = JSON.parse(event.data);
      elP.textContent = `From SSE: interval: ${data.interval}`;
      el.appendChild(elP);
    };
</script>
</body>
</html>

结果：

一些探讨

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

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-07-01，如有侵权请联系 cloudcommunity@tencent.com 删除

浏览器