Web端即時(shí)通訊

服務(wù)器端可以即時(shí)地將數(shù)據(jù)的更新或變化反應(yīng)到客戶端，例如消息即時(shí)推送等功能。

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

這種限制出現(xiàn)的主要原因是：

• 一般的Web通信都是瀏覽器先發(fā)送請(qǐng)求到服務(wù)器，服務(wù)器再進(jìn)行響應(yīng)完成數(shù)據(jù)的現(xiàn)實(shí)更新。

實(shí)現(xiàn)Web端即時(shí)通訊方法

主要有四種方式：短輪詢、長(zhǎng)輪詢、SSE、WebSocket。

四種Web即時(shí)通信技術(shù)比較

從兼容性角度考慮：

• 短輪詢>長(zhǎng)輪詢>SSE>WebSocket。

從性能方面考慮:

• WebSocket>SSE>長(zhǎng)輪詢>短輪詢。

短輪詢

輪詢是一種客戶端定期向服務(wù)器發(fā)送HTTP請(qǐng)求，服務(wù)器實(shí)時(shí)返回?cái)?shù)據(jù)給瀏覽器，用以檢查是否有新的數(shù)據(jù)或更新的方式。

客戶端會(huì)設(shè)置一個(gè)固定的時(shí)間間隔，不停地向服務(wù)器發(fā)起HTTP請(qǐng)求，無(wú)論是否有新數(shù)據(jù)返回，都會(huì)獲取響應(yīng)。

適用場(chǎng)景

輪詢適用于以下幾種場(chǎng)景：

無(wú)需實(shí)時(shí)更新：

• 系統(tǒng)不需要實(shí)時(shí)獲取數(shù)據(jù)，只需要間歇性地同步，例如股票價(jià)格更新或新聞客戶端的刷新。

輕量級(jí)更新：

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

缺點(diǎn)

高資源消耗：

• 如果輪詢間隔太短，服務(wù)器可能會(huì)承受大量無(wú)效請(qǐng)求。

時(shí)效性差：

• 數(shù)據(jù)的更新不是實(shí)時(shí)的，而是基于設(shè)定的輪詢間隔。

長(zhǎng)輪詢

長(zhǎng)輪詢是一種改進(jìn)的輪詢方式。

客戶端發(fā)出請(qǐng)求后，服務(wù)器保持連接（會(huì)阻塞請(qǐng)求）直到有新的數(shù)據(jù)產(chǎn)生才返回響應(yīng)。

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

適用場(chǎng)景

需要近實(shí)時(shí)數(shù)據(jù)：

• 應(yīng)用場(chǎng)景需要快速更新數(shù)據(jù)，例如聊天系統(tǒng)、通知提醒等。

減少不必要的請(qǐng)求：

• 相比于傳統(tǒng)輪詢，長(zhǎng)輪詢能夠減少無(wú)效請(qǐng)求。

優(yōu)點(diǎn)

減少無(wú)效請(qǐng)求：

• 只有在有新數(shù)據(jù)時(shí)才會(huì)返回響應(yīng)，避免了傳統(tǒng)輪詢中的頻繁無(wú)效請(qǐng)求。

近實(shí)時(shí)更新：

• 由于服務(wù)器只在有新數(shù)據(jù)時(shí)才返回，可以實(shí)現(xiàn)準(zhǔn)實(shí)時(shí)的數(shù)據(jù)同步。

缺點(diǎn)

長(zhǎng)時(shí)間保持連接：

• 在某些場(chǎng)景下可能會(huì)導(dǎo)致服務(wù)器的連接資源被大量占用。

不適合高頻更新的場(chǎng)景：

• 如果數(shù)據(jù)更新頻繁，長(zhǎng)輪詢的頻繁重新連接可能反而成為負(fù)擔(dān)。

注意事項(xiàng)

網(wǎng)絡(luò)超時(shí)：

在長(zhǎng)輪詢中，客戶端的請(qǐng)求會(huì)保持較長(zhǎng)時(shí)間，因此需要確保客戶端與服務(wù)器的超時(shí)設(shè)置合適。

負(fù)載問(wèn)題：

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

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

重連機(jī)制：

無(wú)論是普通輪詢還是長(zhǎng)輪詢，都需要設(shè)計(jì)合理的重連機(jī)制，確保客戶端在請(qǐng)求失敗后能繼續(xù)請(qǐng)求而不會(huì)中斷。

SSE

SSE在服務(wù)器和瀏覽器之間打開了一個(gè)單向通道。

服務(wù)器響應(yīng)的不再是一次性的數(shù)據(jù)包，而是text/event-stream類型的數(shù)據(jù)流信息。

服務(wù)器在數(shù)據(jù)變更將數(shù)據(jù)流式傳輸?shù)娇蛻舳恕?/p>

SSE原理

SSE允許服務(wù)器通過(guò)一個(gè)持久的HTTP連接，不斷向客戶端推送更新。

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

場(chǎng)景：

適用于單向數(shù)據(jù)流的應(yīng)用，例如實(shí)時(shí)通知、股票價(jià)格、社交媒體推送、消息系統(tǒng)等需要頻繁數(shù)據(jù)更新的場(chǎng)景。

優(yōu)點(diǎn)：

實(shí)現(xiàn)簡(jiǎn)單，支持自動(dòng)重連。

缺點(diǎn)：

瀏覽器兼容性問(wèn)題，無(wú)法實(shí)現(xiàn)雙向通信。

模擬一種網(wǎng)絡(luò)支付場(chǎng)景，使用SSE，該如何實(shí)現(xiàn)這個(gè)過(guò)程呢？

用戶掃碼向支付系統(tǒng)（微信、支付寶、蘋果）進(jìn)行支付。

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

支付系統(tǒng)告訴服務(wù)端，或者客戶端將支付憑證傳給服務(wù)器做校驗(yàn)，這個(gè)用戶確實(shí)支付成功了。

服務(wù)端向用戶發(fā)送消息：你已經(jīng)支付成功，跳轉(zhuǎn)到支付成功頁(yè)面。

• 通過(guò)SSE連接，由服務(wù)器端告知用戶客戶端瀏覽器。

圖片

模擬服務(wù)端:

圖片

WebSocket

WebSocket是一種基于TCP連接上進(jìn)行全雙工通信的協(xié)議：

• 全雙工：允許數(shù)據(jù)在兩個(gè)方向上同時(shí)傳輸。
• 半雙工：允許數(shù)據(jù)在兩個(gè)方向上傳輸，但是同一個(gè)時(shí)間段內(nèi)只允許一個(gè)方向上傳輸。

WebSocket協(xié)議建立在TCP協(xié)議的基礎(chǔ)上，所以服務(wù)器端也容易實(shí)現(xiàn)，不同的語(yǔ)言都有支持。

優(yōu)點(diǎn)：

低延遲，適用于實(shí)時(shí)通信。

缺點(diǎn)：

在某些網(wǎng)絡(luò)環(huán)境下可能受限。

使用SpringBoot實(shí)現(xiàn)WebSocket

引入依賴：

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

實(shí)現(xiàn)類：

圖片

圖片

圖片

Spring配置:

圖片

啟動(dòng)與測(cè)試:

執(zhí)行Main方法啟動(dòng)應(yīng)用程序。

測(cè)試使用WebSocket在線調(diào)試工具：http://coolaf.com/tool/chattest

圖片

結(jié)論

在選擇服務(wù)端通信技術(shù)時(shí)，應(yīng)考慮應(yīng)用的具體需求和場(chǎng)景。

WebSocket 適合需要高實(shí)時(shí)性和雙向通信的應(yīng)用。

SSE 適用于簡(jiǎn)單的單向數(shù)據(jù)推送。

短輪詢和長(zhǎng)輪詢適用于更新頻率不高的場(chǎng)景。

選擇合適的技術(shù)可以顯著提高用戶體驗(yàn)和應(yīng)用性能。