前端

EventSource入门

EventSource 接口是 web 内容与服务器发送事件通信的接口。一个 EventSource 实例会对 HTTP 服务器开启一个持久化的连接，以 text/event-stream 格式发送事件。

与 WebSocket 不同的是，服务器发送事件是单向的。数据消息只能从服务端到发送到客户端（如用户的浏览器）。这使其成为不需要从客户端往服务器发送消息的情况下的最佳选择。

前端示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let source = new EventSource('/api/hello')
// 连接建立完成
source.onopen = function () {
  console.log('Connection was opened.');
}
// 收到消息，event：message
source.onmessage = function (event) {
  console.log('on message: ', event.data);
}
// 连接失败/关闭
source.onerror = function (event) {
  console.log('on error: ', event)
  // 可以手动 close()，禁止默认的自动重连机制
  source.close()
}
// 指定 event 的处理，event: ping
source.addEventListener('ping', function (event) {
  console.log('ping: ', event.data);
})

Python代码，Django 示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
from django.http import StreamingHttpResponse
import json

def hello(request):
    # 生成器函数
    def handle_data():
      for i in range(int(last_id or -1) + 1, 100):
          # 触发前端的 onmessage 回调函数，默认 event：message
          yield f'data:data is {i}\n\n'
          # 返回复杂数据（转JSON字符串）
          data = {'a': 1, 'b': 2}
          yield f'data:{json.dumps(data)}\n\n'
          # 触发前端的 addEventListener('ping')，event：ping
          yield f'event:ping\ndata: ping data...\n\n'

    response = StreamingHttpResponse(handle_data(), content_type='text/event-stream')
    response['Cache-Control'] = 'no-cache'
    return response