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;
来源：
互联网
本文观点不代表码客-全球程序员交流社区立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表