SSE是什么?
SSE 全称是 Server Sent Event,翻译过来的意思就是 服务器派发事件。
也就是说发送不是api那种一次性的json数据,而是一种流文件,会持续不断的发送,浏览器不会主动关闭连接,由服务端控制是否断开连接,相当于完成一次用时很长的下载。
轮询 vs SSE vs WebSocket
- 轮询
轮询是客户端不断向服务端发起请求,会不断向服务端发起握手,断开连接,不够优雅,性能也不好。 - SSE
一次HTTP连接,客户端不会关闭连接,等着服务端不断推送。
客户端不能够推送消息给服务端,故SSE是单向的推送连接 - 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...'
}
}
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')
注意事项
- ‘data: The server time is: %s\n\n’ % datetime.datetime.now()
数据以data: 开头, \n\n 结尾,前端vue才能从event.data 获取数据 - 部署时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;
}