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

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

首先，列一個常用可選的技術清單

websocket

SSE(Server-Sent Event)

輪詢(長輪詢)

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

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

數據推送有兩種替代方案：無更新方案和數據拉取方案。

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

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

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

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

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

// php

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

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

服務端更加簡潔

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


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

參考資料

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

細說websocket - php篇

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


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