刷新页面会主动断开，服务器单向对客户端推送，基于http协议
简单案例不涉及到token
const es = new EventSource('http://localhost:3000/sse/events');
es.onmessage = (e) => console.log('收到:', e.data);
es.onerror = () => console.log('连接出错，浏览器会自动重连');
或者跟后端协调token这样传
const es = new EventSource('http://localhost:3000/sse/events?token=xxx');
由于原生 EventSource 无法自定义请求头，要携带 token 必须使用 fetch + 流式读取（或 @microsoft/fetch-event-source 库）。不考虑安装库
const subscribeUrl = '/api/hx-policy/policy/common/subscribe'
const controller = new AbortController()
const connect = async () => {
try {
const response = await fetch(subscribeUrl, {
headers: {
'X-Authorization': '你的token',
'Content-type': 'application/json;charset=UTF-8'
},
signal: controller.signal
})
if (!response.ok || !response.body) {
//报错时请求别的逻辑
return
}
const reader = response.body.getReader()
const decoder = new TextDecoder('utf-8')
let buffer = ''
while (true) {
const { value, done } = await reader.read()
if (done) {
break
}
buffer += decoder.decode(value, { stream: true })
const parts = buffer.split('\n\n')
buffer = parts.pop() || ''
parts.forEach(part => {
const dataLines = part
.split('\n')
.filter(line => line.startsWith('data:'))
.map(line => line.slice(5).trimStart())
if (dataLines.length) {
const dataStr = dataLines.join('\n')
try {
const data = JSON.parse(dataStr)
// data 结构示例
// {
// "pendingPolicyCount": 19, // 待审
// "returnedTasksCount": 2 // 呈报
// }
console.log('请求吗')
syncMenuCounts(data)
} catch (e) {
// ignore non-JSON payloads
console.log('请求失败')
}
}
})
}
} catch (e) {
if (!controller.signal.aborted) {
//报错时请求别的逻辑
}
}
}
connect()
只有初始化请求一次接口就可以，剩下的服务器会主动推送数据
服务器主动推送的效果：
服务器主动推送，接口还是初始化第一次请求的接口
