WebSocket、event-source、AJAX轮询 等实现保持前后端实时通信的方式

实现保持前后端实时通信的方式

  • WebSocket: IE10以上才支持,Chrome16, FireFox11,Safari7以及Opera12以上完全支持,移动端形势大
  • event-source: IE完全不支持(注意是任何版本都不支持),Edge76,Chrome6,Firefox6,Safari5和Opera以上支持, 移动端形势大好
  • AJAX轮询: 用于兼容低版本的浏览器
  • 永久帧( forever iframe)可用于兼容低版本的浏览器
  • flash socket 可用于兼容低版本的浏览器

这几种方式的优缺点

1.WebSocket

  • 优点:WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,可从HTTP升级而来,浏览器和服务器只需要一次握手,就可以进行持续的,双向的数据传输,因此能显著节约资源和带宽
  • 缺点:1. 兼容性问题:不支持较低版本的IE浏览器(IE9及以下)2.不支持断线重连,需要手写心跳连接的逻辑 3.通信机制相对复杂

2. server-sent-event(event-source)

  • 优点:(1)只需一次请求,便可以stream的方式多次传送数据,节约资源和带宽 (2)相对WebSocket来说简单易用 (3)内置断线重连功能(retry)
  • 缺点: (1)是单向的,只支持服务端->客户端的数据传送,客户端到服务端的通信仍然依靠AJAX,没有”一家人整整齐齐“的感觉(2)兼容性令人担忧,IE浏览器完全不支持

3. AJAX轮询

  • 优点:兼容性良好,对标低版本IE
  • 缺点:请求中有大半是无用的请求,浪费资源

4.Flash Socket

  • 缺点:(1)浏览器开启时flash需要用户确认,(2)加载时间长,用户体验较差 (3)大多数移动端浏览器不支持flash,为重灾区
  • 优点: 兼容低版本浏览器

5. 永久帧( forever iframe)

  • 缺点: iframe会产生进度条一直存在的问题,用户体验差
  • 优点:兼容低版本IE浏览器

综合兼容性和用户体验的问题,我在项目中选用了WebSocket ->server-sent-event -> AJAX轮询这三种方式做从上到下的兼容

有问题反馈加微信:mue233 私聊送一本电子书,绝对受益良多! 微信公众号:慕意,分享创业、使用的软件和教程~
知识星球精选推荐 » WebSocket、event-source、AJAX轮询 等实现保持前后端实时通信的方式