HTTP协议遵循经典的客户端-服务器模型，客户端发送一个请求，然后等待服务器端的响应，服务器端只能在接收到客户端的请求之后进行响应，不能主动的发送数据到客户端。
客户端想要在不刷新页面的情况下实时获取到服务器端最新的数据，可以通过以下途径:
- 轮询
- 长轮询
- HTTP流
- SSE
- Web Sockets
1. 轮询
客户端（浏览器）定时向服务器端发送请求，获取最新的数据。可以通过在一个定时器中触发ajax请求来实现：
//每两秒触发一次ajax请求，获取最新的数据
setInterval(function(){
//do some ajax call here to retrieve latest data
},2000);
优点：
实现简单，JS端进行一些更改即可，无需后端服务任何改动
缺点：
轮询的间隔过长，会导致用户不能及时接收到更新的数据；轮询的间隔过短，会导致查询请求过多，增加服务器端的负担
2. 长轮询
长轮询方法实现原理如下：
- 客户端发起一个请求到服务器端(http request)
- 服务器端一直保持连接打开，直到有数据数据可发送给客户端，再返回这个请求(http response)
- 客户端收到服务器端返回的数据后，处理数据，并立马发起一个新的请求
- ...
//server端示例(nodejs)
var aTargets = [];
app.get('/notification', function(req, res) {
aTargets.push(res);
//res.end(); 这里不调用res.end(),让http request连接一直存活着
})
//此方法会在有新的数据时调用
onNewNotification : function (data) {
aTargets.forEach(function(res){
res.send(data);//当有新的数据时，再调用res.send(data)返回最新的数据,结束一次http请求
})
}
优点：
- 可以及时获取到最新的数据
- 相较于轮询策略，减少了请求数量
缺点：
服务器端要一直保持连接，不能释放，由于一个服务器能够处理的连接数有限，当达到服务器处理的上限的时候，服务器将无法响应新的请求
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
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);
5. Web Sockets
不同于SSE，Web Sockets 采用了一套全新的协议（ws/wss）来建立客户端到服务器端的全双工、双向通信连接。
关于web sockets的使用，这篇文章：http://www.ruanyifeng.com/blog/2017/05/websocket.html 已经介绍的非常全面了，我就不再赘述。
优点：
- 双向通信，实时连接
- 相较于HTTP请求更加高效(不需要握手，连接始终存在；无需携带头部信息)
缺点：
- 稳定性和成熟度问题
建议：
在使用的过程中，请根据产品将来的使用环境(支持的浏览器类型、版本)，使用场景(双向通信、单向通信)这些点，并结合每一种方法的优缺点去考虑，然后选取对应的策略。
