Server-Send Events (SSE)

特点

• 基于 http 协议

客户端

const source = new EventSource('https://example.com/xxx')

source.readyState 有有 3 种状态：

• 0：未连接。等同于 EventSource.CONNECTING
• 1：已连接。等同于 EventSource.OPEN
• 2：已关闭。等同于 EventSource.CLOSED

source 有 3 种事件：

• onopen：客户端与服务器建立连接时触发
• onmessage：服务器向客户端推送消息时触发
• onerror：客户端与服务器连接出错时触发

服务端

import http from 'node:http'

const server = http.createServer((req, res) => {
  conset url = req.url
  if(url === '/xxx') {
    res.writeHead(200, {
      "Access-Control-Allow-Origin": "*", // 允许跨域
      "Content-Type": "text/event-stream", // 告诉客户端发送的是数据流
      "cache-control": "no-cache", // 告诉客户端不要缓存数据
      "Connection": "keep-alive", // 长连接
    })

    // 向客户端发送数据（SSE 有格式要求）
    // 每一条数据 message 必须使用 \n\n 分割
    // 每个 message 由若干行组成，格式：
    // filed: value
    // filed: id data retry event
    res.write("retriy: 1000\n")
    setInterval(() => {
      res.write("data: hello world\n\n")
    }, 5000)
  }
})

server.listen(3000, () => {
  console.log('server is running at http://localhost:3000')
})