Netty学习之实战WebSocket框架

　　说到WebSocket技术，其实源于服务器推送技术，在现实中很多时候需要的数据是不断变化的，比如股市数据、聊天软件，因此就需要一种客户端想要在不刷新页面的情况下实时获取到服务器端最新数据的技术，而以往的数据获取都是基于客户端主动请求，服务端返回对应数据。因此就有了服务器推送技术。

　　服务器推送技术主要由以下几种：Ajax短轮询、Ajax长轮询、SSE、HTTP流、WebSocket。

一、服务器推送技术

　　1、Ajax短轮询

　　实现简单，客户端（浏览器）定时向服务器端发送请求，获取最新的数据。可以通过在一个定时器中触发ajax请求来实现。

　　优点：实现非常简单，JS端进行一些更改即可，无需后端服务任何改动；

　　缺点：轮询的间隔过长，会导致用户不能及时接收到更新的数据；轮询的间隔过短，会导致查询请求过多，增加服务器端的负担。

　　代码如下：

//每两秒触发一次ajax请求，获取最新的数据
setInterval(function(){
   //do some ajax call here to retrieve latest data
},2000);

　　2、Ajax长轮询

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

客户端发起一个请求到服务器端(http request)
服务器端一直保持连接打开，直到有数据数据可发送给客户端，再返回这个请求(http response)
客户端收到服务器端返回的数据后，处理数据，并立马发起一个新的请求

　　优点：

可以及时获取到最新的数据
相较于轮询策略，减少了请求数量

　　缺点：

　　服务器端要一直保持连接，不能释放，由于一个服务器能够处理的连接数有限，当达到服务器处理的上限的时候，服务器将无法响应新的请求

　　代码如下：　　

function async() {
    $.ajax({
        url: 'http://api.3g.qq.com',
        success: function() {
            async();
            //success code
        }
    });
}

　　Servlet3 里的异步任务以及Spring带来的DeferedResult都是使用Ajax的长连接。

　　3、HTTP流

　　HTTP流区别于轮询和长轮询方法，它在客户端网页的生命周期内，只需要使用一个HTTP连接，也就是只会向服务器发送一个请求，对于这个请求，服务器会保持HTTP连接（不返回response），然后周期性的向浏览器发送数据。

//server端示例(nodejs)
let express = require("express");
let app = express();

app.use(express.static("resources"));
app.get("/httpstream",function(req, res){
    var x = 0;
    res.setHeader('Connection', 'Transfer-Encoding');
  res.setHeader('Content-Type', 'text/html; charset=utf-8');
  res.setHeader('Transfer-Encoding', 'chunked');//声明数据传输编码为chunked，让浏览器及时处理
    setInterval(function(){
        res.write(x+++"|"); //每隔2s向客户端发送一次数据
    },2000);
});

app.listen(3000);

　　服务器端接收到请求后，每隔两秒向客户端输出一点文字，但是不会使用res.end()或者res.send()结束当前http请求。

//客户端示例js
var xhr = new XMLHttpRequest();
var received = 0;
var result = "";
xhr.open("get","/httpstream",true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 3) { //readystate 3 表示正在解析数据
    result = xhr.responseText.substring(received);//截取最新的数据
    received += result.length;
    console.log(result);
  }
}
xhr.send();

　　随着不断从服务器端接收到数据，客户端的 readyState会周期性的变成 3， responseText包含所有的数据源。通过 received来记录之前已经处理过的数据长度，然后在 responseText中截取最新的数据。

　　优点：

　　页面的整个生命周期内，只需要建立一个http连接。

　　缺点：

如果接入的客户端过多，服务器端会因为http连接有限而无法为新的客户端提供服务。
客户端接收到的数据流会越来越大，最终可能会引发页面的性能问题

　　4、SSE(Server-Sent-Events)

　　SSE(Server-Sent Events)是基于HTTP实现的一套服务器向客户端发送数据的API。他是针对上面说到的三种方法（轮询，长轮询，HTTP流）的一个标准API实现。使用SSE API可以创建到服务器端的单向连接，服务器可以通过这个连接发送任意数据。它有以下特点：

断开自动连接
服务器响应的MIME类型必须是text/event-stream
需要浏览器API支持(参考浏览器兼容性)

　　使用方法如下：

//客户端js
var source = new EventSource(url);
//建立连接时触发
source.onopen = function () {
  //do something here
};
//从服务器端接收到新的事件时触发
source.onmessage = function (event) {
  var data = event.data; //服务器返回的数据存放在event.data中
};
//连接异常时触发
source.onerror = function () {
  //do something here
};

　　客户端创建一个EventSource对象，绑定到对应的url，然后监听该对象的onmessage事件就可以获取到最新的数据。

//server端示例(nodejs)
let express = require("express");
let app = express();

app.use(express.static("resources"));
app.get("/httpstream",function(req, res){
    var x = 0;
  res.writeHead(200, {
      "Content-Type":"text/event-stream",
      "Cache-Control":"no-cache",
      "Connection":"keep-alive"
    });
  //每个1s往客户端发送一条数据
  setInterval(function(){
      res.write("data: " + x++ + "\n\n");//发送的数据格式必须是"data: <内容>/n/n"
  },1000);
});

app.listen(3000);