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轮询这三种方式做从上到下的兼容