前端如何實現即時通訊?

短輪詢

短輪詢的原理很簡單,每隔一段時間客戶端就發出一個請求,去獲取服務器最新的數據,一定程度上模擬實現了即時通訊。

  • 優點:兼容性強,實現非常簡單
  • 缺點:延遲性高,非常消耗請求資源,影響性能

Websocket

使用指南請看WebSocket 教程

Websocket是一個全新的、獨立的協議,基於TCP協議,與http協議兼容、卻不會融入http協議,僅僅作爲html5的一部分,其作用就是在服務器和客戶端之間建立實時的雙向通信。

  • 優點:真正意義上的實時雙向通信,性能好,低延遲
  • 缺點:獨立與http的協議,因此需要額外的項目改造,使用複雜度高,必須引入成熟的庫,無法兼容低版本瀏覽器

2019-06-22-12-33-43


comet

comet有兩種主要實現手段,一種是基於 AJAX 的長輪詢(long-polling)方式,另一種是基於 Iframe 及 htmlfile 的流(streaming)方式,通常被叫做長連接。

具體兩種手段的操作方法請移步Comet技術詳解:基於HTTP長連接的Web端實時通信技術

長輪詢優缺點:

  • 優點:兼容性好,資源浪費較小
  • 缺點:服務器hold連接會消耗資源,返回數據順序無保證,難於管理維護

長連接優缺點:

  • 優點:兼容性好,消息即時到達,不發無用請求
  • 缺點:服務器維護長連接消耗資源

SSE

使用指南請看Server-Sent Events 教程

SSE(Server-Sent Event,服務端推送事件)是一種允許服務端向客戶端推送新數據的HTML5技術。

  • 優點:基於HTTP而生,因此不需要太多改造就能使用,使用方便,而websocket非常複雜,必須藉助成熟的庫或框架
  • 缺點:基於文本傳輸效率沒有websocket高,不是嚴格的雙向通信,客戶端向服務端發送請求無法複用之前的連接,需要重新發出獨立的請求

2019-06-22-12-33-19

 

Web Worker

後面性能優化部分會用到,先做了解

Web Worker 的作用,就是爲 JavaScript 創造多線程環境,允許主線程創建 Worker 線程,將一些任務分配給後者運行

Web Worker教程

Service workers

後面性能優化部分會用到,先做了解

Service workers 本質上充當Web應用程序與瀏覽器之間的代理服務器,也可以在網絡可用時作爲瀏覽器和網絡間的代理,創建有效的離線體驗。

Service workers教程

 


 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章