SSE:用于流式传输的协议

一.什么是SSE

        SSE协议是一种基于http协议的单向通信协议，服务端可以向客户端发送数据，但是客户端不能向服务器发送数据。客户端通过创建一个到服务器的单向连接来监听事件。可以将一次性返回数据包改为流式返回数据。SSE协议支持断线重连，也支持自定义响应事件。比如ChatGpt使用的通信方式就是SSE协议，相比于websocket通信这是一个更为轻量级的通信方式，使用方法简单。但是在浏览器原生的EventSource不支持设置请求头，需要借助第三方包去实现，同时也需要后端设置接口的响应头Content-Type:text/event-stream

二.SSE和WebSocket的区别

        WebSocket  API

           WebSocket是基于TCP协议的一种用于应用层的网络协议，它实现了浏览器与服务器之间的全双工通信，它允许服务器主动发信息给客户端。所以，浏览器和服务器只需要完成一次握手就可以建立持久性的连接，并且能够实现双向数据传输。

        特点：

          1.传输的数据格式可以是文本也可以是二进制形式

          2.不受同源策略的限制，可以与任意服务端进行通信

          3.兼容HTTP协议，默认端口同样是80（ws）和443（ws）

          4.客户端和服务端通信时开销较少，与HTTP协议不同，不需要每次都携带完整的头部信息

          5.若在通信过程中连接中断，需要自己实现断线重连

        区别：

          1.sse协议仅支持服务端向客户端发送数据，而websocket支持双向通信，服务端和客户端之间可以互相通信

          2.sse是一种轻量级的通信协议，而websocket整体的一些方法事件较为复杂

          3.sse支持断线重连机制，而websocket需要自己实现断线重连

          4.sse是基于HTTP协议的通信协议，而websocket是基于TCP协议的网络层通信协议

三.前端使用SSE

 <h1>fetchSSE Demo</h1>
    <button onclick="connectFetch()">建立 fetchSSE 连接</button>
    <button onclick="closeSSE()">断开 fetchSSE 连接</button>
    <br />
    <br />
    <div id="message"></div>
    <script>
        const messageElement = document.getElementById('message')
        let controller = null
        // 建立 FETCH-SSE 连接
        const connectFetch = () => {
            controller = new AbortController()
            fetchEventSource('http://127.0.0.1:3001/fetch-sse', {
                method: 'POST',
                body: JSON.stringify({
                    content: 'xxx'
                }),
                signal: controller.signal,
                onopen: () => {
                    messageElement.innerHTML += `FETCH 连接成功<br />`
                },
                onclose: () => {
                    messageElement.innerHTML += `FETCH 连接关闭<br />`
                },
                onmessage: (event) => {
                    const data = JSON.parse(event)
                    messageElement.innerHTML += `${data.id} --- ${data.time} --- body参数：${JSON.stringify(data.body)}` + '<br />'
                },
                onerror: (e) => {
                    console.log(e)
                }
            })
        }

        // 断开 FETCH-SSE 连接
        const closeSSE = () => {
            if (controller) {
                controller.abort()
                controller = undefined
                messageElement.innerHTML += `FETCH 连接关闭<br />`
            }
        }
        const fetchEventSource = (url, options) => {
            fetch(url, options)
                .then(response => {
                    if (response.status === 200) {
                        options.onopen && options.onopen()
                        return response.body
                    }
                })
                .then(rb => {
                    const reader = rb.getReader()
                    const push = () => {
                        // done 为数据流是否接收完成，boolean
                        // value 为返回数据，Uint8Array
                        return reader.read().then(({ done, value }) => {
                            if (done) {
                                options.onclose && options.onclose()
                                return
                            }
                            options.onmessage && options.onmessage(new TextDecoder().decode(value))
                            // 持续读取流信息
                            return push()
                        })
                    }
                    // 开始读取流信息
                    return push()
                })
                .catch((e) => {
                    options.error && options.error(e)
                })
        }