SSE长连接，服务端推送，web端GET和POST用法及问题处理

1. GET 形式

• 使用的库：event-source-polyfill
• 写法：

let evtSource;

function startSSE() {

    evtSource = new EventSourcePolyfill('http://****/api/***', {

    headers: {

        'Authorization': ''

    }

});

evtSource.addEventListener("custom_event_name", (event) => {

    const newElement = document.createElement("li");

    const eventList = document.getElementById("list");

    newElement.textContent = `收到的数据: ${event.data}`;

    eventList.appendChild(newElement);

    });

}

function closeSSE() {

    evtSource.close()

}

2. POST 形式

• SSE本身是不支持post的方式，通过fetch的方式可以完成post相关操作。具体可以使用开源组件完成需求：https://github.com/Azure/fetch-event-source

npm install @microsoft/fetch-event-source

• 写法

/** * 获取任务列表-SSE传输模式 */

function handlePublishSSE() {

    const params = {};

    let url = "http://****";

    const ctrl = new AbortController();

    fetchEventSource(url, {

    method: "POST",

    headers: {

        Authorization: "",

        "Content-Type": "application/json",

    },

    body: JSON.stringify(params),

    signal: ctrl.signal,

    openWhenHidden: true,

    onmessage(msg: EventSourceMessage) {

        if (msg.event === "custom_event_name") {

            var result = JSON.parse(msg.data);

            // 处理 result 即可

        } else {

            console.log("SSE接收信息 非指定类型", msg);

        }

    },

    onclose() {

        console.log("SSE接收信息 断开");

        // 监听后端断开，前端主动断开

        ctrl.abort();

    },

    onerror(err: any) {

        console.log("SSE接收信息 异常");

        throw err;

        //必须throw才能停止

        },

    });

}

注意事项：

• 问题现象：web端本地起服务正常，部署到服务器上。无法实现流形式，数据最后一次性返回。

• 问题分析：应该是nginx默认开启缓存引起的。

  
  image

• 解决方式：Nginx的配置文件增加以下配置：

#SSE 连接时的超时时间

proxy read timeout 86400s;

#取消缓冲

proxy buffering off;

#关闭代理缓存

proxy cache off;