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

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

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

websocket

SSE(Server-Sent Event)

輪詢(長輪詢)

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

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

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

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

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

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

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

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

// php

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

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

服務(wù)端更加簡潔

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


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

參考資料

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

細說websocket - php篇

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


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