眾所周知，ajax的出現是前端快速發展的乙個標誌，同時也是前後端得以分離的重要基礎。作為乙個c/s網路的web系統，網路通訊在發揮著舉足輕重的作用。
大部分的場景下，我們是主動觸發ajax去調取後端資料，但是總有那麼些場景是後端資料更新了再推送給前端。
本文則試著和讀者一起對這個資料推送的需求進行技術方案的**。
首先，列乙個常用可選的技術清單
資料推送是由服務端選擇向客戶端傳送新資料。
當資料來源有新資料時，服務端能立刻將它傳送給乙個或多個客戶端，而不用等客戶端來請求。
資料推送有兩種替代方案：無更新方案和資料拉取方案。
資料拉取和資料推送的功能目標是一致的:讓使用者看到最新的資料。但資料推送有一些優勢，即更低的延遲。
但是在資料拉取的方式中，權衡會讓你很糾結，要縮短延遲就要提高輪詢的頻次，要節省頻寬和連線就要降低輪詢的頻次。
websocket是html5新引入的技術，允許後台隨時向前端傳送文字或者二進位制訊息，websocket是一種全新的協議，不屬於http無狀態協議，協議名為」ws」，
這意味著乙個websocket連線位址會是這樣的寫法：ws:。ws不是http，所以傳統的web伺服器不一定支援，
需要伺服器與瀏覽器同時支援,websocket才能正常執行，目前的支援還不普遍，需要特別的web伺服器和現代的瀏覽器。
var ws = new websocket("ws://localhost:4000"); // 這裡新建乙個websocket連線，ws此時是乙個websocket控制代碼
ws.onopen = function();
ws.onmessage = function(e);
ws.send("測試")
sse 是 html5 的server-sent events縮寫，伺服器端傳送的事件。網頁自動獲取伺服器端的資料更新。
之前網頁獲取伺服器端更新的資料是需要先想伺服器傳送情況，確定是否有資料變更，然後獲取，而sse是伺服器 一旦有資料更新就主動向網頁傳送資料。
// 前端
var es = new eventsource("sse.php"); // 建立連線,eventsource只能單向通訊，沒有send函式
es.addeventlistener("message", function(e),false);
// php
<?php
header("content-type: text/event-stream");
while(true)
優點：後端程式編寫比較容易。
缺點：請求中有大半是無用，浪費頻寬和伺服器資源。
function poll() );
}, 10000);
}
優點：在無訊息的情況下不會頻繁的請求，耗費資源小。
缺點：伺服器hold連線會消耗資源，返回資料順序無保證，難於管理維護。
websocket是一種更為複雜的服務端實現技術，但它是真正的雙向傳輸技術，既能從服務端向客戶端推送資料，也能從客戶端向服務端推送資料。
websocket和sse的瀏覽器支援率差不多。
sse優勢。
websocket優勢
知乎:websocket 是什麼原理？為什麼可以實現持久連線?
細說websocket - php篇
傳統輪詢、長輪詢、伺服器傳送事件與websocket
h5應用資料加密 H5定製開發方案
正文共計 815字預計 產品特性 快速迭代 h5常用於輕量級應用，例如 活動營銷頁面 拉新等，而這些相對開發成本比較低，也可滿足市場需求進行快速迭代。專屬方案 所想即所得，為客戶量身定製策劃方案 多種定製 提供活動營銷 商業 遊戲有效等多種定製 全新互動 互動性強，視覺效果佳，使用者的感官體驗好，可...
H5 資料儲存localStorage
doctype html html lang en head meta charset utf 8 title title title head body pre localstorage的使用 1.儲存的內容大概20mb 2.不同瀏覽器不能共享資料。但是在同乙個瀏覽器的不同視窗中可以共享資料 3....
OC和H5資料互動之H5給OC發訊息
應用場景 ooc原生webview巢狀乙個h5頁面,這個頁面要實現截圖後儲存到手機的功能.流程如下 001 ocwkwebview 需要增加乙個獲取h5訊息的訊號量 002 通過wkwebview的 方法獲取到h5傳送的訊息 003 根據與h5約定的型別就行截圖和儲存手機操作 如下 wkwebvie...