使用SSE主动向浏览器推送消息（轮询以上，websocket未满）_django sse 消息

SSE是什么？

SSE 全称是 Server Sent Event，翻译过来的意思就是 服务器派发事件。
也就是说发送不是api那种一次性的json数据，而是一种流文件，会持续不断的发送，浏览器不会主动关闭连接，由服务端控制是否断开连接，相当于完成一次用时很长的下载。

轮询 vs SSE vs WebSocket

1. 轮询
   轮询是客户端不断向服务端发起请求，会不断向服务端发起握手，断开连接，不够优雅，性能也不好。
2. SSE
   一次HTTP连接，客户端不会关闭连接，等着服务端不断推送。
   客户端不能够推送消息给服务端，故SSE是单向的推送连接
3. WebSocket
   ws协议 基于TCP的协议，可以双向推送连接。

实现

vue

 <div id="result"></div>
mounted() {
if (typeof (EventSource) !== 'undefined') {
                const source = new EventSource('http://127.0.0.1:8001/es/stream/')
                source.onmessage = function(event) {
                    document.getElementById('result').innerHTML += event.data + '<br>'
                }
            } else {
                document.getElementById('result').innerHTML = 'Sorry, your browser does not support server-sent events...'
            }
}
1
2
3
4
5
6
7
8
9
10
11

django

def stream(request):
    def event_stream():
        while True:
            time.sleep(3)
            yield 'data: The server time is: %s\n\n' % datetime.datetime.now()

    return StreamingHttpResponse(event_stream(), content_type='text/event-stream')
1
2
3
4
5
6
7

注意事项

1. ‘data: The server time is: %s\n\n’ % datetime.datetime.now()
   数据以data: 开头， \n\n 结尾，前端vue才能从event.data 获取数据
2. 部署时nginx配置

#eventSource 在配置中新增
location /es/ {
    proxy_pass  http://请求地址/;
    proxy_set_header Connection '';
    proxy_http_version 1.1;
    chunked_transfer_encoding off;
    proxy_buffering off;
    proxy_cache off;
}
1
2
3
4
5
6
7
8
9