服务端推送通信技术解决方案，及其优劣势

服务端推送技术包括：

1、Ajax 轮询

2、Ajax 长轮询

3、WebSocket

 

一、Ajax 轮询

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

1、优点：开发简单，客户端实现即可，不需要服务端配合

2、缺点：数据同步不及时；大多数情况下无用请求，占用服务端资源

3、实现方式：客户端每隔一段时间调用接口，无论有没有数据，接口立即返回.

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

//前端    
setInterval(function() {
  $.ajax({
    url: 'https://www.baidu.com/',
    success: function() {
      //success code
    }
  });
}, 3000);       //每隔固定时间请求一次
 
 
//服务端    
public ActionResult NoLongPolling(){
    return Content(DateTime.Now.ToString());      //请求即响应
}

 

二、Ajax长轮询

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

1、优点：通信及时，命中率高，服务端资源消耗少

2、缺点：服务端和客户端需要同时改造，消息会有部分延迟（发生在请求交替之时）

3、实现方式：客户端在上次请求返回后，再发送下次请求，服务端当有数据或者超时后返回，没有数据时请求挂起（超时时间需要综合考虑服务器性能和及时性做出平衡，有代理的话需要考虑代理对于链接的超时机制）。

3、使用场景：扫码登录，微信网页端获取消息等。

//前端
function async () {
  $.ajax({
    url: 'http://www.baidu.com/',
    success: function() {
      async ();       收到服务器响应后再请求
      //code from here
    } 
  });
}
 
//服务端
public ActionResult LongPolling() {
   while (true) {
      Thread.Sleep(1000);       // 模拟挂起的操作，
      return Content(DateTime.Now.ToString());   //服务器每秒会有更新，然后返回给客户端实时数据
   }
}

三、WebSocket

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

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

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

3、实现方式：浏览器通过JS向服务端发出建立WebSocket连接的请求，在WebSocket连接建立成功后，客户端和服务端就可以通过 TCP连接传输数据

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

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

 

 

 

参考：轮询与长轮询

NowCoder-我的笔记

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