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;
