隨著 互聯網的開展，web前端技術也開展的特別好。用戶關於 Web 的實時推送請求也越來越高 ，比方，工業運轉監控、Web 在線通訊、即時報價系統、在線遊戲等，都需求將後臺發作的變化主動地、實時地傳送到閱讀器端，而不需求用戶手動地刷新頁面。本文對過去和如今盛行的 Web 實時推送技術停止了比擬與總結。
一、雙向通訊
HTTP 協議有一個缺陷：通訊只能由客戶端發起。舉例來說，我們想理解今天的天氣，只能是客戶端向效勞器發出懇求，效勞器返回查詢結果。HTTP 協議做不到效勞器主意向客戶端推送信息。這種單向懇求的特性，必定了假如效勞器有連續的狀態變化，客戶端要獲知就十分費事。在WebSocket協議之前，有三種完成雙向通訊的方式：輪詢（polling）、長輪詢（long-polling）和iframe流（streaming）。
1.輪詢（polling）
輪詢是客戶端和效勞器之間會不斷停止銜接，每隔一段時間就訊問一次。其缺陷也很明顯：銜接數會很多，一個承受，一個發送。而且每次發送懇求都會有Http的Header，會很耗流量，也會耗費CPU的應用率。
- 優點：完成簡單，無需做過多的更改
- 缺陷：輪詢的距離過長，會招致用戶不能及時接納到更新的數據；輪詢的距離過短，會招致查詢懇求過多，增加效勞器端的擔負
啟動本地服務，打開http://localhost:8080/1.html,得到如下結果：
2.長輪詢（long-polling）
長輪詢是對輪詢的改良版，客戶端發送HTTP給效勞器之後，看有沒有新音訊，假如沒有新音訊，就不斷等候。當有新音訊的時分，才會返回給客戶端。在某種水平上減小了網絡帶寬和CPU應用率等問題。由於http數據包的頭部數據量常常很大（通常有400多個字節），但是真正被效勞器需求的數據卻很少（有時只要10個字節左右），這樣的數據包在網絡上週期性的傳輸，難免對網絡帶寬是一種糜費。
- 優點：比 Polling 做了優化，有較好的時效性
- 缺陷：堅持銜接會耗費資源; 效勞器沒有返回有效數據，程序超時。
3.iframe流（streaming）
iframe流方式是在頁面中插入一個躲藏的iframe，應用其src屬性在效勞器和客戶端之間創立一條長銜接，效勞器向iframe傳輸數據（通常是HTML，內有擔任插入信息的javascript），來實時更新頁面。
- 優點：音訊可以實時抵達；閱讀器兼容好
- 缺陷：效勞器維護一個長銜接會增加開支；IE、chrome、Firefox會顯現加載沒有完成，圖標會不停旋轉。
啟動本地服務，打開http://localhost:8080/3.html,得到如下結果：
上述代碼中，客戶端只懇求一次，但是效勞端卻是源源不時向客戶端發送數據，這樣效勞器維護一個長銜接會增加開支。
以上我們引見了三種實時推送技術，但是各自的缺陷很明顯，運用起來並不理想，接下來我們著重引見另一種技術--websocket,它是比擬理想的雙向通訊技術。
二、WebSocket
1.什麼是websocket
WebSocket是一種全新的協議，隨著HTML5草案的不時完善，越來越多的現代閱讀器開端全面支持WebSocket技術了，它將TCP的Socket（套接字）應用在了webpage上，從而使通訊雙方樹立起一個堅持在活動狀態銜接通道。
一旦Web效勞器與客戶端之間樹立起WebSocket協議的通訊銜接，之後一切的通訊都依託這個專用協議停止。通訊過程中可相互發送JSON、XML、HTML或圖片等恣意格式的數據。由於是樹立在HTTP根底上的協議，因而銜接的發起方仍是客戶端，而一旦確立WebSocket通訊銜接，不管效勞器還是客戶端，恣意一方都可直接向對方發送報文。
初次接觸 WebSocket 的人，都會問同樣的問題：我們曾經有了 HTTP 協議，為什麼還需求另一個協議？
2.HTTP的侷限性
- HTTP是半雙工協議，也就是說，在同一時辰數據只能單向活動，客戶端向效勞器發送懇求(單向的)，然後效勞器響應懇求(單向的)。
- 效勞器不能主動推送數據給閱讀器。這就會招致一些高級功用難以完成，諸如聊天室場景就沒法完成。
3.WebSocket的特性
- 支持雙向通訊，實時性更強
- 能夠發送文本，也能夠發送二進制數據
- 減少通訊量：只需樹立起WebSocket銜接，就希望不斷堅持銜接狀態。和HTTP相比，不但每次銜接時的總開支減少，而且由於WebSocket的首部信息很小，通訊量也相應減少了
相關於傳統的HTTP每次懇求-應對都需求客戶端與效勞端樹立銜接的形式，WebSocket是相似Socket的TCP長銜接的通訊形式，一旦WebSocket銜接樹立後，後續數據都以幀序列的方式傳輸。在客戶端斷開WebSocket銜接或Server端斷掉銜接前，不需求客戶端和效勞端重新發起銜接懇求。在海量併發和客戶端與效勞器交互負載流量大的狀況下，極大的儉省了網絡帶寬資源的耗費，有明顯的性能優勢，且客戶端發送和承受音訊是在同一個耐久銜接上發起，實時性優勢明顯。
接下來我看下websocket如何完成客戶端與效勞端雙向通訊：
啟動本地服務，打開http://localhost:3000/websocket.html,得到如下結果：
三、Web 實時推送技術的比較
綜上所述：Websocket協議不只處理了HTTP協議中效勞端的被動性，即通訊只能由客戶端發起，也處理了數據同步有延遲的問題，同時還帶來了明顯的性能優勢，所以websocket 是Web 實時推送技術的比擬理想的計劃，但假如要兼容低版本閱讀器，能夠思索用輪詢來完成。
閱讀更多 指尖上的代碼 的文章
