前后端消息推送

299 阅读1分钟

需求背景

我们在页面上有一些数据需要实时或者近实时的数据需要进行展示(例如秒杀的商品库存)

方案

Client Polling

客户端短轮询

浏览器开发定时任务进行 Ajax 的请求,后端提供查询的 API

  • 客户端定时轮询,但是如果服务端没有更新,那么此次轮询就是浪费的。
  • 可能会导致请求不断的建立和释放
image.png

客户端长轮询

TCP建立完连接之后,只要不发送 FIN 标志,连接就会保持

image.png

我们复用连接,定时发消息轮询

image.png

websocket

  • websocket 是全双工,双方都可以发消息(适合IM系统)
  • websocket 是一个新的应用层协议,需要引入新的包
  • 浏览器兼容性差,下面支持websocket协议的浏览器 image.png

websocket 帧格式

image.png image.png

HTML Server Sent Event (SSE)

html5 提供了新的接口

  • 只需要建立一次连接(单向)
  • 只有数据发生变更,server端才会推送
image.png

HTTP2 server push

对比

时延利用率通道
短轮训每次请求前,都有3RTT

一次TCP握手+SSL+GET请求

无效请求多单向,客户端轮询
长轮训每次请求前,都有2RTT占用资源单向,客户端轮询
SSE1RTT轻量,浏览器兼容性好单向,server push
image.png

参考:

(1)www.bilibili.com/video/BV1Vv…

(2)www.bilibili.com/video/BV1Ke…