小而美的服务端推送技术SSE之理论与实战(含demo)

[[toc]]

SSE 是什么？

基本特点

SSE: Server-Sent Events
用途: 服务器向浏览器推送信息, 注意反过来不行
本质: 基于http协议的服务端推送技术
特点: 响应头mimetype 为 text/event-stream， keep connection open
数据: 流信息（streaming），数据流不是一次性数据包，会连续不断发送，比如视频播放
通信: 以流信息方式，完成一次用时很长的下载
缓存: SSE会丢弃已经处理过的数据，不会缓存，而XHR会缓存

历史

SSE 首次在 HTML5 规范中提出，于2014 年标准化。
HTML5 引入了许多新功能，其中包括 SSE，提供简单有效的服务器到客户端实时通信机制。

EventSource 对象

HTML5 引入 EventSource 对象，是 SSE 技术的核心。通过 E
ventSource 对象，客户端可以与服务器建立连接，并监听服务器的事件。
这些事件可以是来自服务器的各种数据，如通知、更新或其他信息。

MIMI:text/event-stream

用于服务器向客户端推送消息、事件和通知的数据格式，属于HTML5的一部分
text/event-stream将消息视为一系列流事件，以文本形式发送
该格式适用于SSE应用程序，服务器向客户端单向推送数据
关键字: stream 表示这是数据流, text 表示数据流以文本形式传送

限制：

SSE 适用于单向通信，从服务器向客户端发送数据。
对于需要双向通信的应用程序，WebSocket 技术通常更合适。

SSE是如何保持http长连接?

SSE的本质其实是一个HTTP的长连接
服务端给客户端发送的不是一次性的数据包，而是一个stream流，格式为text/event-stream。
由于是stream流，所以客户端不会关闭连接，会一直等着服务器发送新数据流，
视频播放就是这样的例子

Content-Type: text/event-stream 响应头

告诉浏览器使用SSE的协议来解析响应，并按照SSE规范处理收到的事件数据。
浏览器会将每个事件分解为适当的事件对象，对其进行处理和展示。

[注意]这里说的长连接

不是指 http1.1 的长连接(多个http对应1个tcp连接)
而是值 http 这个连接本身的长连接 (每次返回部分数据后, http连接没有断开)

普通http请求和sse对比

普通http:客户端发起请求，服务端响应，然后一次请求完毕
sse: 客户端发起请求，连接一直保持，服务端有数据就可以返回数据给客户端

SSE和WS对比

通信: SSE 单向通道(当连接断开时，客户端无法通知服务端), 只能服务器向浏览器发送, WS 全双工通道, 更强大和灵活
协议: SSE 使用 HTTP 协议, WS 是Http+WebSocket协议
使用: SSE 轻量，使用简单；WS 相对复杂
断线: SSE 默认支持断线重连，WS 需要自己实现
数据: SSE 一般只用来传送文本，WS 默认支持传送二进制数据

WS通信过程

通过 http 切换协议，服务端返回 101 状态码后，代表协议切换成功。
WebSocket 开始数据通信，一方可以随时向另一方推送消息。

SSE通信过程

客户端通过 http 发起请求
服务端可以多次返回内容，连接一直保持

Snipaste_2023-10-28_21-01-06

适合哪些场景?

需要实时数据传输的场景中特别有用
如社交媒体更新、实时新闻、股票市场报价、在线游戏和协作工具等。

CICD 平台

日志实时打印
明显需要一段一段的传输
一般就是用 SSE 来推送数据

ChatGPT

回答一个问题不是一次性给你全部的，而是一部分一部分的加载回答，这也是基于 SSE
查看请求 https://chat.openai.com/backend-api/conversation
响应头是 Content-Type:text/event-stream; charset=utf-8
并且在打字机方式回复时，可以看到请求响应数据在慢慢增加

webpack hmr

webpack热更新需要向浏览器推送信息

是否有跨域限制?

没有限制
跨域时，可以通过 withCredentials 参数指定是否发送cookie

兼容性

SSE 技术通常在现代浏览器中受到支持，包括Chrome、Firefox、Safari和Edge等。
IE，Opera Mini，其他浏览器低版本不支持
Firefox 6+, Google Chrome 6+, Opera 11.5+, Safari 5+, Microsoft Edge 79+

demo

// 服务端
// server 
var http = require("http");

http.createServer(function (req, res) {
   
  if (req.url === "/stream") {
   
    res.writeHead(200, {
   
        // MIME类型 不能注释 
        "Content-Type":"text/event-stream", 

        // 3种都可以工作
        "Cache-Control":"no-cache", 
        // "Cache-Control":"public", 
        // "Cache-Control":"max-age=30",    

        // 2种都可以工作
        // "Connection":"keep-alive", 
        "Connection":"close",

        // 本地file方式打开 不能注释