EventSource 是客户端针对 SSE 提供的接口。

基础使用方式为（下文中 EventSource 实例均以 source 替代）：

const source = new EventSource(url, [options])

其中：

• url 表示后端服务路径；
• options 可设置参数如下：
  1. withCredentials 表示 CORS 是否携带 Cookie。

1.实例属性

1-1.readyState

readyState 表示连接状态。

具有以下几种值：

• 0 连接中
• 1 连接成功
• 2 连接失败

1-2.url

url 表示后端服务路径。

1-3.withCredentials

withCredentials 表示 CORS 是否携带 Cookie。

2.实例方法

2-1.close()

close() 方法用以关闭 SSE 连接。

当该方法被调用时，SSE 的 readyState 值会变化为 2。

source.close()

3.事件监听

3-1.open

open 事件用以监听 SSE 连接的建立。

source.addEventListener('open', () => {
  console.log('Event source open...')
})

3-2.message

message 事件用以监听 SSE 连接的信息传输。

source.addEventListener('message', () => {
  console.log('Event source message...')
})

3-3.error

error 事件用以监听 SSE 连接的出错。

source.addEventListener('error', () => {
  console.log('Event source error...')
})

TIP

express 中的 res.send() 方法会中断 SSE 连接，从而触发 error 事件监听。

3-4.自定义事件

除了以上 3 种的内置事件，我们也可以自定义实例监听事件。

只要保证 Server 端定义对应 event 字段触发即可。

譬如：

source.addEventListener('foo', () => {
  console.log('Event source foo...')
})

TIP

只能使用 addEventListener 进行监听。

source.onfoo = () => {} 形式的监听不会工作。

server 端使用 express 如下：

const data = { message: 'Message from foo.' }
res.write(`event: 'foo'\ndata:${JSON.stringify(data)}\n\n`)