前端SSE（Server-Sent Events）教程

基本用法

        // 当前时间
        let timeStamp = Date.now();
        // 创建一个新的EventSource对象，指向服务器端的SSE接口
        // 构造函数接收两个参数：url和configuration对象
        // configuration对象只有一个选项：withCredentials 默认为false，指示CORS是否包含凭据(credentials)
        let url = "后台推送地址"
        let sse = new EventSource(`${url}?timeStamp=${timeStamp}`, {
            withcredentials: true
        });
        // 监听连接成功
        sse.onopen = function (event) {
            console.log("成功连接")
        }


        // 监听连接错误
        sse.error = function (err) {
            console.log('onerror', err)
        }
        /**
        "message"事件是一个特例，可捕获没有event字段的事件
        以及具有特定类型“event: message"的事件
        不会触发任何其他类型的事件
        */
        // 监听服务端默认的消息事件
        // 第一种写法
        sse.onmessage = function (event) {
            console.log('onmessage', event.data)
        }
        // 第二种写法
        sse.addEventListener("message", (e) => {
            console.log(e)
        })

        /**
        仅仅监听下面的事件
        event: notice
        data: useful data
        id: someid
        */
        sse.addEventListener("periodic", (e) => {
            console.log(e)
        })

        /**
        将监听具有字段 "event: update"的事件
        */
        sse.addEventListener("update", (e) => {
            console.log(e.data)
        })

扩展信息

• 特别注意：如果接收消息中有一个 event 字段，触发的事件与 event 字段的值相同。如果不存在 event 字段，则将触发通用的 message 事件。
• # EventSource MDN使用及参数配置链接
• # 阮一峰Server-Sent Events 教程

插件

1. 如果说场景使用复杂建议使用插件

• event-source-polyfill 插件（event-source-polyfill 是一个用于兼容旧浏览器的 EventSource 垫片库，同时也能提供更简洁的 API 来使用 SSE。）
• sse.js 插件sse.js 是一个轻量级的 JavaScript 库，它对 EventSource 进行了封装，提供了简单易用的 API。