摘要:本文則試著和讀者一起對這個數據推送的需求進行技術方案的探究。數據推送有兩種替代方案無更新方案和數據拉取方案。數據拉取和數據推送的功能目標是一致的讓用戶看到最新的數據。但數據推送有一些優勢,即更低的延遲。
前言
眾所周知,AJAX的出現是前端快速發展的一個標志,同時也是前后端得以分離的重要基礎。作為一個C/S網絡的web系統,網絡通信在發揮著舉足輕重的作用。
大部分的場景下,我們是主動觸發AJAX去調取后端數據,但是總有那么些場景是后端數據更新了再推送給前端。
本文則試著和讀者一起對這個數據推送的需求進行技術方案的探究。
首先,列一個常用可選的技術清單
websocket
SSE(Server-Sent Event)
輪詢(長輪詢)
數據推送數據推送是由服務端選擇向客戶端發送新數據。
當數據源有新數據時,服務端能立刻將它發送給一個或多個客戶端,而不用等客戶端來請求。
數據推送有兩種替代方案:無更新方案和數據拉取方案。
數據拉取和數據推送的功能目標是一致的:讓用戶看到最新的數據。但數據推送有一些優勢,即更低的延遲。
但是在數據拉取的方式中,權衡會讓你很糾結,要縮短延遲就要提高輪詢的頻次,要節省帶寬和連接就要降低輪詢的頻次。
webSocket是html5新引入的技術,允許后臺隨時向前端發送文本或者二進制消息,WebSocket是一種全新的協議,不屬于http無狀態協議,協議名為”ws”,
這意味著一個websocket連接地址會是這樣的寫法:ws://wilsonliu.cn:8080/webSocketServer。ws不是http,所以傳統的web服務器不一定支持,
需要服務器與瀏覽器同時支持,WebSocket才能正常運行,目前的支持還不普遍,需要特別的web服務器和現代的瀏覽器。
// 在這里略去服務端實現,著重于比較客戶端。 客戶端實現可參考[參考鏈接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
SSE 是 HTML5 的 Server-Sent Events縮寫,服務器端發送的事件。網頁自動獲取服務器端的數據更新。
之前網頁獲取服務器端更新的數據是需要先想服務器發送情況,確定是否有數據變更,然后獲取,而SSE是服務器 一旦有數據更新就主動向網頁發送數據。
// 前端 var es = new EventSource("sse.php"); // 建立連接,EventSource只能單向通信,沒有send函數 es.addEventListener("message", function(e){ // EventSource有3個事件, open,error,message console.log(e.data); },false); // php 輪詢輪詢:客戶端定時向服務器發送Ajax請求,服務器接到請求后馬上返回響應信息并關閉連接。
優點:后端程序編寫比較容易。
缺點:請求中有大半是無用,浪費帶寬和服務器資源。function poll() { setTimeout(function() { $.get("/path/to/server", function(data, status) { console.log(data); // 發起下一次請求 poll(); }); }, 10000); }長輪詢:客戶端向服務器發送Ajax請求,服務器接到請求后hold住連接,直到有新消息才返回響應信息并關閉連接,客戶端處理完響應信息后再向服務器發送新的請求。
SSE與websocket的對比
優點:在無消息的情況下不會頻繁的請求,耗費資源小。
缺點:服務器hold連接會消耗資源,返回數據順序無保證,難于管理維護。websocket是一種更為復雜的服務端實現技術,但它是真正的雙向傳輸技術,既能從服務端向客戶端推送數據,也能從客戶端向服務端推送數據。
websocket和SSE的瀏覽器支持率差不多。SSE優勢。
既存基礎設施優勢:不需要添加任何新組件,也不需要新建虛擬機,弄一個新的IP或新的端口號。
服務端更加簡潔
文本協議,更方便調試
websocket優勢
雙向數據流(使用SSE時,一般通過獨立的AJAX請求從客戶端向服務端傳送數據)
參考資料知乎:WebSocket 是什么原理?為什么可以實現持久連接?
細說websocket - php篇
傳統輪詢、長輪詢、服務器發送事件與WebSocket
WilsonLiu"s blog首發地址:http://blog.wilsonliu.cn
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/22123.html
摘要:本地安全問題在之前引入了本地這個東西,但是后面被廢除了,他的安全點和后臺數據庫的關注點差不多,就是要防止在數據中混入查詢指令。僵尸網絡風險中解決了單線程問題,提出了機制,它為提供多線程支持,但是多線程帶來了一個非常可怕的危險僵尸網絡。 HTML5 安全問題解析 標簽: html html5 web安全 本文參考: w3school:html5相關基礎知識(w3school.com.c...
閱讀 1228·2021-11-15 11:37
閱讀 2246·2021-09-30 09:55
閱讀 4483·2021-09-22 15:51
閱讀 3741·2021-09-22 15:46
閱讀 2766·2019-08-30 15:52
閱讀 423·2019-08-29 16:20
閱讀 2889·2019-08-29 15:12
閱讀 1130·2019-08-26 18:27