竟然还有比Web Socket更轻量级的长时连接 — SSE技术SSE技术详解：使用 HTTP 做服务端数据推送应用的技

作者GitHub：github.com/gitboyzcf 有兴趣可关注！！！

SSE技术详解：使用 HTTP 做服务端数据推送应用的技术

SSE （ Server-sent Events ）是 WebSocket 的一种轻量代替方案，使用 HTTP 协议，以流的形式由服务端持续向客户端发送数据的技术

SSE 能做什么？

实时更新网络状态
消息推送
邮件提醒
ChatGPT文本显示
...

SSE vs WebSocket

SSE 是单向通道，只能服务器向客户端发送消息，如果客户端需要向服务器发送消息，则需要一个新的 HTTP 请求。轻量级，默认支持断线重连机制

WebSocket则是双向的也称双工通道即服务端客户端可以相互发送消息、单独的ws协议、开销大

兼容性都大差不差即现代最新浏览器⚠

SSE

WebSocket

响应示例解析

下面是当客户端发起SSE连接时，服务端响应的具体格式解析

响应头类型是Content-Type:text/event-stream

//如下，每个事件通过空行来分隔，对于每一行来说， 冒号前表示的是该行的类型，冒号后面是对应的值
data: first event //类型为data, 表示该行是数据，以data开头的行可以多次出现，都是该事件中的数据

data: second event
id: 001

event: myevent //类型为event，表示用来声名事件类型，浏览器收到该事件时，会产生对应类型的事件.如果没有该字段，会产生默认类型 （前端可进行监听该事件获取对应值）
data: third event
id: 002 // id：用来声名事件标识符

: this is a comment // 类型为空白，表示该行是注释，会在处理时被忽略
data: fourth event
data: fourth event continue
retry: 1000 // 表示该行用来声明浏览器在连接断开之后进行再次连接之前的等待时间

SSE API介绍

EventSource

EventSource 接口是 web 内容与服务器发送事件通信的接口。

一个 EventSource 实例会对 HTTP 服务器开启一个持久化的连接，以 text/event-stream 格式发送事件，此连接会一直保持开启直到通过调用 EventSource.close() 关闭。

EventSource() 构造函数

EventSource() 构造函数返回一个新建的EventSource对象，它代表了一个远程资源。

语法格式：

pc = new EventSource(url, configuration);

参数

url 连接地址

configuration 可选

为配置新连接提供选项。可选项是：

withCredentials，默认为 false，指示 CORS 是否应包含凭据 ( credentials )。

EventSource对象属性（实例属性）

readyState

该只读属性返回一个代表连接状态的数字。

数字分别对应以下常量：

EventSource.CONNECTING（0）连接尚未打开。
EventSource.OPEN（1）连接已打开并准备进行通信。
EventSource.CLOSED（2）连接已关闭或无法打开。

其他属性请看developer.mozilla.org/zh-CN/docs/…

EventSource对象方法（实例方法）

close()

用于关闭当前SSE连接，并将readyState状态设置为2

内置事件

error 发生错误时触发
message 连接成功后触发持续接收数据
open 连接刚被打开时触发

具体代码示例

 if (window.EventSource) {
        // 创建 EventSource 对象连接服务器
        const source = new EventSource('http://localhost:2000');
        // 连接成功后会触发 open 事件
        source.addEventListener('open', () => {
            console.log('Connected');
        }, false);
        // 服务器发送信息到客户端时，如果没有 event 字段，默认会触发 message 事件
        source.addEventListener('message', e => {
            console.log(`message: ${e.data}`);
        }, false);
        // 自定义 EventHandler由后端响应数据携带，在收到 event 字段为 slide 的消息时触发
        source.addEventListener('slide1', e => {
            console.log(`slide1: ${e.data}`); // => data: 7
        }, false)；
        // 连接异常时会触发 error 事件并自动重连
        source.addEventListener('error', e => {
            if (e.target.readyState === EventSource.CLOSED) {
                console.log('Disconnected');
            } else if (e.target.readyState === EventSource.CONNECTING) {
                console.log('Connecting...');
            }
        }, false);
    } else {
        console.error('Your browser doesn\'t support SSE');
    } 
}

到这里就结束了，后续还会更新前端系列相关，还请持续关注！

感谢阅读，若有错误可以在下方评论区留言哦！！！

111