对比 http / webSoket

http 是一种即时链接，请求发送给服务器处理完经过四次挥手就断了，服务端没办法再通过链接给客户端服务

SSE 是一种单向长链接，客户端只能发送一次请求建立连接后就不能再请求，而服务端可以一直返回，一般用于可视化大屏项目

webSoket 是一种长链接，能一直和服务端保持通信，双方都能给对方主动发送服务。一般用于实时通讯等

使用的 EventSource() 构造函数

• 第一个参数接收一个URL，只接受 get 请求
• 第二个参数接收一个 options 对象
  • withCredentials：表示是否允许发送 cookie 和 http 认证信息，默认 false
  • headers：表示发送请求头信息
  • retryInterval：表示与服务器失去链接后，重新链接间隔，默认 1000ms

const eventSource = new EventSource("<http://localhost:3000/sse>", {})

// 客户端主动关闭连接
eventSource.close()

// 链接成功钩子
eventSource.onopen = function (event) {
  console.log("链接成功", event)
}

// 链接失败钩子
eventSource.onerror = function (event) {
  console.log("发生错误", event)
}

// 接收到消息钩子，默认监听为message，客户端可以改
eventSource.onmessage = function (event) {
  console.log("接收到消息", event)
}

客户端如何配置 sse

请求头一定要是 text/event-stream

// 设置请求头，才会变成一个sse 的方式
'content-type: text/event-stream'