vue配合sse 长连接避免轮询问题。

Server-Send-Event

Server-Sent-Events(SSE)是一种HTML5 API,用于在服务器和客户端之间实时推送数据流。 它基于HTTP协议,通过建立一个持久连接,服务器可以推送消息给客户端,而无需客户端发起请求。 这使得服务器可以实时向客户端发送数据,而不需要客户端轮询服务器。SSE可以用于实现实时通知、实时聊天、实时数据更新和实时监控等功能。

技术上:

  1. SSE是基于HTTP长连接实现的,由客户端发起一次请求,服务器端保持连接打开,随时可以向客户端推送数据,直到客户端关闭连接。
  2. SSE使用的是text/event-streamMIME类型,服务器端通过这个MIME类型告诉客户端它将发送一系列事件流。
  3. 服务器可以发送多个事件流,每个事件流以event关键字开始(如果没有event字段则前端只能通过onmessage监听 ), 数据字段以data关键字开始,并以一个换行符结束。整个事件流以连续两个换行符结束。
  4. 服务器可以发送一个retry字段,用来指定在连接断开后重新连接的时间间隔。
event: ${eventName}
id: 1
retry: 5000
data: ${dataString}
  1. 客户端通过EventSourceAPI接收SSE。


如果前端或后端是通过nginx代理出去的,要保证sse连接,nginx配置要做特出处理,

一:nginx 反向代理配置端


nginx 代理 Server-Send-Events

如果需要使用nginx对Server-Send-Events进行反向代理的话,需要进行如下额外配置:

proxy_http_version 1.1; # proxy_pass 默认是使用 http v1.0连接后端的,v1.0 不支持keepalive ,所以换成http v1.1
proxy_set_header Connection "";
proxy_buffering off;


如果vue使用开发调试模式,需要在devserver{compress:false}, 关闭压缩选项,因为压缩会导致SSE的换行符出问题。

  1. 以前遇到过一个 SSE 的问题是 gzip 导致的,不确定你这里是否是同样的问题。你可以先试试在 webpack-dev-server 配置里把 gzip 关掉看看。
  1. SSE 依赖的是换行符。gzip 会破坏这种依赖。


请先 登录 后评论
  • 0 关注
  • 0 收藏,584 浏览
  • shitian 提出于 2023-08-16 14:10

相似问题