服务端推送通信技术及其优劣势

• 2019 年 10 月 6 日
• 筆記

服务端推送技术包括：

1、Ajax 轮询

2、Ajax 长轮询

3、WebSocket

一、Ajax 轮询

利用 XHR，通过 setInterval 定时向后端发送请求

1、优点：实现简单

2、缺点：数据同步不及时，增加后端处理压力

3、场景：适用于对消息及时性要求不高且服务器资源充足的开发

setInterval(function() {    $.ajax({      url: 'https://www.baidu.com/',      success: function() {        //success code      }    });  }, 3000);

二、Ajax长轮询

在 Ajax 轮询的基础上做的改进，在后端数据没有更新的时不再返回空响应，而且后端一直保存连接，直到后端有数据变化，则相应请求并且关闭连接，前端收到数据后，再次向后端发起请求，并处理刚刚收到的数据

1、优点：通信及时，服务端资源消耗低

2、缺点：请求交替时消息会延迟

3、场景：扫码登录

function async () {    $.ajax({      url: 'http://www.baidu.com/',      success: function() {        async ();        //code from here      }    });  }

三、WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议，允许服务端主动向客户端发送数据，浏览器和服务器只需要完成一次握手，就可以创建持久性的连接，并进行双向数据传输

1、优点：通信及时，采用双工的通信模式

2、缺点：服务端资源消耗高

3、场景：对及时性要求高，如股票系统

function WebSocketTest() {    if ("WebSocket" in window) {      alert("您的浏览器支持 WebSocket!");        // 打开一个 web socket      var ws = new WebSocket("ws://localhost:9998/echo");        ws.onopen = function() {        // Web Socket 已连接上，使用 send() 方法发送数据        ws.send("发送数据");        alert("数据发送中...");      };        ws.onmessage = function(evt) {        var received_msg = evt.data;        alert("数据已接收...");      };        ws.onclose = function() {        // 关闭 websocket        alert("连接已关闭...");      };    } else {      // 浏览器不支持 WebSocket      alert("您的浏览器不支持 WebSocket!");    }  }