Web应用从服务端主动推送数据到客户端的方式有哪些？
HTTP协议遵循经典的客户端-服务器模型，客户端发送一个请求，然后等待服务器端的响应，服务器端只能在接收到客户端的请求之后进行响应，不能主动的发送数据到客户端。
客户端想要在不刷新页面的情况下实时获取到服务器端最新的数据，可以通过以下途径:
- 轮询
- 长轮询
- HTTP流
- SSE
- Web Sockets
1. 轮询
轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求，然而HTTP request 的header是非常长的，里面包含的有用数据可能只是一个很小的值，这样会占用很多的带宽。
客户端（浏览器）定时向服务器端发送请求，获取最新的数据。可以通过在一个定时器中触发ajax请求来实现：
function showUnreadNews() {
$(document).ready(function() {
$.ajax({
type: "POST",
url: "unread_list.js",
dataType: "json",
success: function(data) {
alert(data);
}
});
});
}
setInterval('showUnreadNews()',5000); //轮询执行，5000ms一次 优点：
实现简单，JS端进行一些更改即可，无需后端服务任何改动
缺点：
轮询的间隔过长，会导致用户不能及时接收到更新的数据；轮询的间隔过短，会导致查询请求过多，增加服务器端的负担
2. 长轮询
长轮询方法实现原理如下：
- 客户端发起一个请求到服务器端(http request)
- 服务器端一直保持连接打开，直到有数据数据可发送给客户端，再返回这个请求(http response)
- 客户端收到服务器端返回的数据后，处理数据，并立马发起一个新的请求
//客户端示例js
function showUnreadNews() {
$.ajax({
type: "POST",
url: "unread_list.js",
dataType: "json",
success: function(data) {
//处理返回数据
alert(data);
//再次请求
showUnreadNews();
},
complete:function(XMLHttpRequest,textStatus){
if(textStatus=='timeout'){//判断是否超时
showUnreadNews();//超时，重新请求
}
}
});
}//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）来建立客户端到服务器端的全双工、双向通信连接。
WebSocket的定义：
WebSocket是Web应用程序的传输协议，它提供了双向的，按序到达的数据流。他是一个Html5协议，WebSocket的连接是持久的，他通过在客户端和服务器之间保持双工连接，服务器的更新可以被及时推送给客户端，而不需要客户端以一定时间间隔去轮询
为什么需要WebSocket？
- HTTP 协议是一种无状态的、无连接的、单向的应用层协议；
- 它采用了请求/响应模型；
- 通信请求只能由客户端发起，服务端对请求做出应答处理；
- 这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户端发起消息；
- 这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦；
- 大多数 Web 应用程序将通过频繁的异步JavaScript和XML（AJAX）请求实现长轮询；
- 轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开），因此WebSocket应运而生，需要一种可以保持连接、进行全双工通信的协议；
- WebSocket 连接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端；
- WebSocket 只需要建立一次连接，就可以一直保持连接状态，这相比于轮询方式的不停建立连接显然效率要大大提高。
WebSocket的应用场景：
实时性要求高的场景：社交聊天、弹幕、多玩家游戏、协同编辑、股票基金实时报价、体育实况更新、视频会议/聊天、基于位置的应用、在线教育、智能家居等需要高实时的场景。
WebSocket表示当前状态的readyState属性，属性值如下：
WebSocket.OPENING(0)：正在连接
WebSocket.OPEN(1):已经建立连接
WebSocket.CLOSING(2):正在关闭连接
WebSocket.CLOSE(3)：已经关闭连接WebSocket发送数据：send(任意字符串)，复杂数据需要将数据系列化，如下面所示：
var message ={
time:new Date(),
text:'hi'
}
socket.send(JSON.stringify(message));WebSocket接收数据：服务器向客户端发送信息，触发message()事件，把数据存在event.data中
socket.onmessage=function(event){
var data = event.data;
}var ws;
function WebSocketTest(){
if ("WebSocket" in window){
alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
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("数据已接收..." + received_msg);
};
ws.onerror = function (evt) {
//出错
alert(JSON.stringify(evt));
}
ws.onclose = function(){
// 关闭 websocket
alert("连接已关闭...");
};
}
else{
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}
ws.close();//关闭连接WebSocket其他事件：
open():在成功建立连接时触发
error():在发生错误时触发，连接不能持续
close():在连接关闭时触发
优点：
- 双向通信，实时连接
- 相较于HTTP请求更加高效(不需要握手，连接始终存在；无需携带头部信息)
缺点：
- 稳定性和成熟度问题
建议：
在使用的过程中，请根据产品将来的使用环境(支持的浏览器类型、版本)，使用场景(双向通信、单向通信)这些点，并结合每一种方法的优缺点去考虑，然后选取对应的策略。
