摘要：本文則試著和讀者一起對(duì)這個(gè)數(shù)據(jù)推送的需求進(jìn)行技術(shù)方案的探究。數(shù)據(jù)推送有兩種替代方案無(wú)更新方案和數(shù)據(jù)拉取方案。數(shù)據(jù)拉取和數(shù)據(jù)推送的功能目標(biāo)是一致的讓用戶看到最新的數(shù)據(jù)。但數(shù)據(jù)推送有一些優(yōu)勢(shì)，即更低的延遲。

眾所周知，AJAX的出現(xiàn)是前端快速發(fā)展的一個(gè)標(biāo)志，同時(shí)也是前后端得以分離的重要基礎(chǔ)。作為一個(gè)C/S網(wǎng)絡(luò)的web系統(tǒng)，網(wǎng)絡(luò)通信在發(fā)揮著舉足輕重的作用。
大部分的場(chǎng)景下，我們是主動(dòng)觸發(fā)AJAX去調(diào)取后端數(shù)據(jù)，但是總有那么些場(chǎng)景是后端數(shù)據(jù)更新了再推送給前端。
本文則試著和讀者一起對(duì)這個(gè)數(shù)據(jù)推送的需求進(jìn)行技術(shù)方案的探究。

首先，列一個(gè)常用可選的技術(shù)清單

websocket

SSE(Server-Sent Event)

輪詢(長(zhǎng)輪詢)

數(shù)據(jù)推送是由服務(wù)端選擇向客戶端發(fā)送新數(shù)據(jù)。

當(dāng)數(shù)據(jù)源有新數(shù)據(jù)時(shí)，服務(wù)端能立刻將它發(fā)送給一個(gè)或多個(gè)客戶端，而不用等客戶端來(lái)請(qǐng)求。

數(shù)據(jù)推送有兩種替代方案：無(wú)更新方案和數(shù)據(jù)拉取方案。

數(shù)據(jù)拉取和數(shù)據(jù)推送的功能目標(biāo)是一致的:讓用戶看到最新的數(shù)據(jù)。但數(shù)據(jù)推送有一些優(yōu)勢(shì)，即更低的延遲。
但是在數(shù)據(jù)拉取的方式中，權(quán)衡會(huì)讓你很糾結(jié)，要縮短延遲就要提高輪詢的頻次，要節(jié)省帶寬和連接就要降低輪詢的頻次。

webSocket是html5新引入的技術(shù)，允許后臺(tái)隨時(shí)向前端發(fā)送文本或者二進(jìn)制消息，WebSocket是一種全新的協(xié)議，不屬于http無(wú)狀態(tài)協(xié)議，協(xié)議名為”ws”，
這意味著一個(gè)websocket連接地址會(huì)是這樣的寫(xiě)法：ws://wilsonliu.cn:8080/webSocketServer。ws不是http，所以傳統(tǒng)的web服務(wù)器不一定支持，
需要服務(wù)器與瀏覽器同時(shí)支持,WebSocket才能正常運(yùn)行，目前的支持還不普遍，需要特別的web服務(wù)器和現(xiàn)代的瀏覽器。

// 在這里略去服務(wù)端實(shí)現(xiàn),著重于比較客戶端。 客戶端實(shí)現(xiàn)可參考[參考鏈接2]
var ws = new WebSocket("ws://localhost:4000"); // 這里新建一個(gè)websocket連接，ws此時(shí)是一個(gè)websocket句柄
ws.onopen = function(){ // 常見(jiàn)的前端事件回調(diào)
    console.log("握手成功");
};
ws.onmessage = function(e){ // 事件有 open,close,error,message
    console.log("信息:" + e.data); // 輸出后臺(tái)返回的信息
};
ws.send("測(cè)試")

SSE 是 HTML5 的 Server-Sent Events縮寫(xiě)，服務(wù)器端發(fā)送的事件。網(wǎng)頁(yè)自動(dòng)獲取服務(wù)器端的數(shù)據(jù)更新。
之前網(wǎng)頁(yè)獲取服務(wù)器端更新的數(shù)據(jù)是需要先想服務(wù)器發(fā)送情況，確定是否有數(shù)據(jù)變更，然后獲取，而SSE是服務(wù)器 一旦有數(shù)據(jù)更新就主動(dòng)向網(wǎng)頁(yè)發(fā)送數(shù)據(jù)。

// 前端
    var es = new EventSource("sse.php"); // 建立連接,EventSource只能單向通信，沒(méi)有send函數(shù)
    es.addEventListener("message", function(e){ // EventSource有3個(gè)事件， open,error,message
      console.log(e.data);
      },false);

// php

輪詢
輪詢：客戶端定時(shí)向服務(wù)器發(fā)送Ajax請(qǐng)求，服務(wù)器接到請(qǐng)求后馬上返回響應(yīng)信息并關(guān)閉連接。 
優(yōu)點(diǎn)：后端程序編寫(xiě)比較容易。 
缺點(diǎn)：請(qǐng)求中有大半是無(wú)用，浪費(fèi)帶寬和服務(wù)器資源。
function poll() {
    setTimeout(function() {
        $.get("/path/to/server", function(data, status) {
            console.log(data);
            // 發(fā)起下一次請(qǐng)求
            poll();
        });
    }, 10000);
}
長(zhǎng)輪詢：客戶端向服務(wù)器發(fā)送Ajax請(qǐng)求，服務(wù)器接到請(qǐng)求后hold住連接，直到有新消息才返回響應(yīng)信息并關(guān)閉連接，客戶端處理完響應(yīng)信息后再向服務(wù)器發(fā)送新的請(qǐng)求。 
優(yōu)點(diǎn)：在無(wú)消息的情況下不會(huì)頻繁的請(qǐng)求，耗費(fèi)資源小。 
缺點(diǎn)：服務(wù)器hold連接會(huì)消耗資源，返回?cái)?shù)據(jù)順序無(wú)保證，難于管理維護(hù)。
SSE與websocket的對(duì)比
websocket是一種更為復(fù)雜的服務(wù)端實(shí)現(xiàn)技術(shù)，但它是真正的雙向傳輸技術(shù)，既能從服務(wù)端向客戶端推送數(shù)據(jù)，也能從客戶端向服務(wù)端推送數(shù)據(jù)。
websocket和SSE的瀏覽器支持率差不多。
SSE優(yōu)勢(shì)。

既存基礎(chǔ)設(shè)施優(yōu)勢(shì)：不需要添加任何新組件，也不需要新建虛擬機(jī)，弄一個(gè)新的IP或新的端口號(hào)。

服務(wù)端更加簡(jiǎn)潔

文本協(xié)議，更方便調(diào)試


websocket優(yōu)勢(shì)
雙向數(shù)據(jù)流(使用SSE時(shí)，一般通過(guò)獨(dú)立的AJAX請(qǐng)求從客戶端向服務(wù)端傳送數(shù)據(jù))

參考資料

知乎:WebSocket 是什么原理？為什么可以實(shí)現(xiàn)持久連接?

細(xì)說(shuō)websocket - php篇

傳統(tǒng)輪詢、長(zhǎng)輪詢、服務(wù)器發(fā)送事件與WebSocket


WilsonLiu"s blog首發(fā)地址：http://blog.wilsonliu.cn