前言

首先听到服务端消息推送一般大多数可能都是使用到的 websocket ,但是 websocket 一般主要是用于聊天室，而 SSE（Server-Sent Events) 也是可以基于服务器来与Web页面来进行数据和消息的推送的，但是与 websocket 不同的是，服务器发送事件是单项的，数据只能从服务端发送到客户端。例如我们可以看一下常用的 chatGtp 他的文本输出就是基于服务器的消息推送进行输出的。下面我们见看如何来建立一个通讯连接

EventSource

EventSource 是一个实例，专门用来建立与服务器的连接接收服务器的消息推送的，他会与服务器建立一个 HTTP 的长连接，他会一致保持开启，直到调用 close 关闭连接。ps:他是无法使用 axios 的因为 axios 内部其实使用的是XMLHttpRequest,他是无法支持接收服务端推送的消息的。

我们先实现一个简单的后台服务，然后前台来使用这个实例看一下效果是怎么样的。

const article = `警告：当不使用 HTTP/2 时.....。`
app.get('/chat_typing', (req, res) => {
  // 开启 Server-sent events
  res.setHeader('Content-Type', 'text/event-stream')
  let index = 0
  let timerId = 0
  // 模拟每隔 0.1s 向前端推送一次
  timerId = setInterval(() => {
    // 获取文字
    const data = article[index]
    // 下标累加
    index++
    // 响应结果
    if (data) {
      // data：表示数据内容，\n\n 表示结尾。
      res.write(`data: ${data}\n\n`)
    } else {
      res.end()
      clearInterval(timerId)
    }
  }, 100)
})

这里我们简单实现了一个node服务，主要的就是 Content-Type 这里我们把他设置为了 text/event-stream ,也就是服务端的消息推送，然后我们每100毫秒推送一个字符过去，然后我们再前台看一下接收的效果是什么样子的