Web端即時通訊

服務器端可以即時地將數據的更新或變化反應到客戶端，例如消息即時推送等功能。

但是在Web中，由于瀏覽器的限制，實現即時通訊需要借助一些方法。

這種限制出現的主要原因是：

• 一般的Web通信都是瀏覽器先發(fā)送請求到服務器，服務器再進行響應完成數據的現實更新。

實現Web端即時通訊方法

主要有四種方式：短輪詢、長輪詢、SSE、WebSocket。

四種Web即時通信技術比較

從兼容性角度考慮：

• 短輪詢>長輪詢>SSE>WebSocket。

從性能方面考慮:

• WebSocket>SSE>長輪詢>短輪詢。

短輪詢

輪詢是一種客戶端定期向服務器發(fā)送HTTP請求，服務器實時返回數據給瀏覽器，用以檢查是否有新的數據或更新的方式。

客戶端會設置一個固定的時間間隔，不停地向服務器發(fā)起HTTP請求，無論是否有新數據返回，都會獲取響應。

適用場景

輪詢適用于以下幾種場景：

無需實時更新：

• 系統不需要實時獲取數據，只需要間歇性地同步，例如股票價格更新或新聞客戶端的刷新。

輕量級更新：

• 服務器資源有限，無法承受高并發(fā)的長連接。

缺點

高資源消耗：

• 如果輪詢間隔太短，服務器可能會承受大量無效請求。

時效性差：

• 數據的更新不是實時的，而是基于設定的輪詢間隔。

長輪詢

長輪詢是一種改進的輪詢方式。

客戶端發(fā)出請求后，服務器保持連接（會阻塞請求）直到有新的數據產生才返回響應。

一旦有新數據，服務器響應客戶端，并在客戶端處理完數據后，客戶端立即再次發(fā)起請求，維持類似推的效果。

適用場景

需要近實時數據：

• 應用場景需要快速更新數據，例如聊天系統、通知提醒等。

減少不必要的請求：

• 相比于傳統輪詢，長輪詢能夠減少無效請求。

優(yōu)點

減少無效請求：

• 只有在有新數據時才會返回響應，避免了傳統輪詢中的頻繁無效請求。

近實時更新：

• 由于服務器只在有新數據時才返回，可以實現準實時的數據同步。

缺點

長時間保持連接：

• 在某些場景下可能會導致服務器的連接資源被大量占用。

不適合高頻更新的場景：

• 如果數據更新頻繁，長輪詢的頻繁重新連接可能反而成為負擔。

注意事項

網絡超時：

在長輪詢中，客戶端的請求會保持較長時間，因此需要確?？蛻舳伺c服務器的超時設置合適。

負載問題：

長輪詢雖然比普通輪詢更節(jié)省資源，但對于高并發(fā)場景下，服務器的連接數可能很快耗盡，需要合理設計資源管理機制。

• 或者考慮使用WebSocket等更合適的技術。

重連機制：

無論是普通輪詢還是長輪詢，都需要設計合理的重連機制，確?？蛻舳嗽谡埱笫『竽芾^續(xù)請求而不會中斷。

SSE

SSE在服務器和瀏覽器之間打開了一個單向通道。

服務器響應的不再是一次性的數據包，而是text/event-stream類型的數據流信息。

服務器在數據變更將數據流式傳輸到客戶端。

SSE原理

SSE允許服務器通過一個持久的HTTP連接，不斷向客戶端推送更新。

客戶端只需要建立一次連接，服務器就可以不斷推送數據，而客戶端會持續(xù)接收數據。

場景：

適用于單向數據流的應用，例如實時通知、股票價格、社交媒體推送、消息系統等需要頻繁數據更新的場景。

優(yōu)點：

實現簡單，支持自動重連。

缺點：

瀏覽器兼容性問題，無法實現雙向通信。

模擬一種網絡支付場景，使用SSE，該如何實現這個過程呢？

用戶掃碼向支付系統（微信、支付寶、蘋果）進行支付。

支付完成之后，告知服務端我已經發(fā)起支付了（建立SSE連接）。

支付系統告訴服務端，或者客戶端將支付憑證傳給服務器做校驗，這個用戶確實支付成功了。

服務端向用戶發(fā)送消息：你已經支付成功，跳轉到支付成功頁面。

• 通過SSE連接，由服務器端告知用戶客戶端瀏覽器。

圖片

模擬服務端:

圖片

WebSocket

WebSocket是一種基于TCP連接上進行全雙工通信的協議：

• 全雙工：允許數據在兩個方向上同時傳輸。
• 半雙工：允許數據在兩個方向上傳輸，但是同一個時間段內只允許一個方向上傳輸。

WebSocket協議建立在TCP協議的基礎上，所以服務器端也容易實現，不同的語言都有支持。

優(yōu)點：

低延遲，適用于實時通信。

缺點：

在某些網絡環(huán)境下可能受限。

使用SpringBoot實現WebSocket

引入依賴：

implementation 'org.springframework.boot:spring-boot-starter-websocket'

實現類：

圖片

圖片

圖片

Spring配置:

圖片

啟動與測試:

執(zhí)行Main方法啟動應用程序。

測試使用WebSocket在線調試工具：http://coolaf.com/tool/chattest

圖片

結論

在選擇服務端通信技術時，應考慮應用的具體需求和場景。

WebSocket 適合需要高實時性和雙向通信的應用。

SSE 適用于簡單的單向數據推送。

短輪詢和長輪詢適用于更新頻率不高的場景。

選擇合適的技術可以顯著提高用戶體驗和應用性能。