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:

<!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，以后要是有机会，某些场景应该是可以尝试一下。

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/39163.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！