SSE长连接

刷新页面会主动断开，服务器单向对客户端推送，基于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()

只有初始化请求一次接口就可以，剩下的服务器会主动推送数据

服务器主动推送的效果：

服务器主动推送，接口还是初始化第一次请求的接口