什么是 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個人筆記
![[python][Anaconda]使用jupyter打開F盤或其他盤文件](http://pic.xiahunao.cn/[python][Anaconda]使用jupyter打開F盤或其他盤文件)
![[Day 22] 區塊鏈與人工智能的聯動應用：理論、技術與實踐](http://pic.xiahunao.cn/[Day 22] 區塊鏈與人工智能的聯動應用：理論、技術與實踐)
】)
