一 短輪詢
1.1 定義
http端輪詢是服務器收到請求不管是否有數據都直接響應 http 請求;
其實就是普通的輪詢。指在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP request，然后由服務器返回最新的數據給客戶端的瀏覽器。
1.2 應用場景
傳統的web通信模式。后台處理數據，需要一定時間，前端想要知道后端的處理結果，就要不定時的向后端發出請求以獲得最新情況。
1.3 優點
前后端程序編寫比較容易。
1.4 缺點
- 請求中有大半是無用，難於維護，浪費帶寬和服務器資源；
- 響應的結果沒有順序（因為是異步請求，當發送的請求沒有返回結果的時候，后面的請求又被發送。而此時如果后面的請求比前面的請 求要先返回結果，那么當前面的請求返回結果數據時已經是過時無效的數據了）。
1.5 實例：適於小型應用。
1.6 前端實現：
var xhr = new XMLHttpRequest();
setInterval(function(){
xhr.open('GET','/user');
xhr.onreadystatechange = function(){
};
xhr.send();
},1000)
二 長輪詢
2.1 定義
客戶端向服務器發送Ajax請求，服務器接到請求后hold住連接，直到有新消息才返回響應信息並關閉連接，客戶端處理完響應信息后再向服務器發送新的請求。
2.2 優點
在無消息的情況下不會頻繁的請求，耗費資源小。
2.3 缺點
- 服務器hold連接會消耗資源
- 返回數據順序無保證，難於管理維護。
- 瀏覽器端對統一服務器同時 http 連接有最大限制, 最好同一用戶只存在一個長輪詢;
2.4 實例：WebQQ、Hi網頁版、Facebook IM。
2.5 前端實現：
function ajax(){
var xhr = new XMLHttpRequest();
xhr.open('GET','/user');
xhr.onreadystatechange = function(){
ajax();
};
xhr.send();
}
長輪訓和短輪訓
相同點：
- 可以看出 http 長輪詢和 http 短輪詢的都會 hold 一段時間;
不同點
- 間隔發生在服務端還是瀏覽器端: http 長輪詢在服務端會 hold 一段時間, http 短輪詢在瀏覽器端 “hold”一段時間;
三 http 長連接
目前 http 協議普遍使用的是 1.1 版本, 之前有個 1.0 版本,兩者之間的一個區別是 1.1 支持 http 長連接, 或者叫持久連接。
1.0 不支持 http 長連接, 每次一個 http請求響應后都關閉 tcp 連接, 下個 http 請求會重新建立 tcp 連接.
3.1定義
多個 http 請求共用一個 tcp 連接; 這樣可以減少多次臨近 http 請求導致 tcp建立關閉所產生的時間消耗.
http 1.1 中在請求頭和相應頭中用 connection字段標識是否是 http長連接, connection: keep-alive, 表明是 http 長連接; connection:closed, 表明服務器關閉 tcp 連接
與 connection 對應的一個字段是 keep-live, http 響應頭中出現, 他的格式是 timeout=30,max=5, timeout 是兩次 http 請求保持的時間(s), , max 是這個 tcp 連接最多為幾個 http請求重用
3.2優點
消息即時到達，不發無用請求；管理起來也相對方便。
3.3 缺點
服務器維護一個長連接會增加開銷。
3.4實例：Gmail聊天
四 Web Socket
4.1定義
Websocket是基於HTTP協議的，在和服務端建立了鏈接后，服務端有數據有了變化后會主動推送給前端。
4.2優點
請求響應快，不浪費資源。（傳統的http請求，其並發能力都是依賴同時發起多個TCP連接訪問服務器實現的(因此並發數受限於瀏覽器允許的並發連接數)，而websocket則允許我們在一條ws連接上同時並發多個請求，即在A請求發出后A響應還未到達，就可以繼續發出B請求。由於TCP的慢啟動特性（新連接速度上來是需要時間的），以及連接本身的握手損耗，都使得websocket協議的這一特性有很大的效率提升；http協議的頭部太大，且每個請求攜帶的幾百上千字節的頭部大部分是重復的，websocket則因為復用長連接而沒有這一問題。）
4.3缺點：
- 主流瀏覽器支持的Web Socket版本不一致；
- 服務端沒有標准的API。
4.4實例：實現即時通訊:如股票交易行情分析、聊天室、在線游戲等，替代輪詢和長輪詢
4.5 解決：解決了http協議的兩個問題。
- 1.服務端的被動性。http協議是只有客戶端詢問之后才回復。解決了同步有延遲的問題
- 2.解決了服務器上消耗資源的問題
4.6 實現：
//需要先npm install ws
//服務器端
var Server = require('ws').Server;
var wss = new Server({
port:2000
});
wss.on('connection',function(ws){
ws.on('message',function(data){
ws.send('你好,客戶端,我是服務器!');
console.log(data);
})
});
//node客戶端
var WebSocket = require('ws');
var socket = new WebSocket('ws://localhost:2000/');
socket.on('open',function(){
socket.send('你好，服務器,我是客戶端');
});
socket.on('message',function(event){
console.log(event);
})
//html客戶端(注:瀏覽器客戶端與node客戶端只需要一種)
<script>
var socket = new WebSocket('ws://localhost:2000/');
socket.onopen = function(){
};
socket.onmessage = function(event){
console.log(event.data)
}
</script>
4.7 WebSocket四個事件操作
- onmessage收到服務器響應時執行
- onerroe 出現異常時執行
- onopen 建立起連接時執行
- onclose 斷開連接時執行