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

服务端推送技术包括：

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!");
  }
}