建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
前面為大家講述了 Spring Boot的整合Redis、RabbitMQ、Elasticsearch等各種框架組件；隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，服務(wù)端消息數(shù)據(jù)推送已經(jīng)是一個(gè)非常重要、非常普遍的基礎(chǔ)功能。今天就和大家聊聊在SpringBoot輕松整合WebSocket，實(shí)現(xiàn)Web在線(xiàn)聊天室，希望能對(duì)大家有所幫助。
創(chuàng)新互聯(lián)從2013年成立，先為容城等服務(wù)建站，容城等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為容城企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
一、WebSocket簡(jiǎn)介
1.1 什么是WebSocket？
WebSocket協(xié)議是基于TCP的一種網(wǎng)絡(luò)協(xié)議，它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工（Full-duplex）通信。它允許服務(wù)端主動(dòng)向客戶(hù)端推送數(shù)據(jù)，這使得客戶(hù)端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡(jiǎn)單高效。在WebSocket API中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。
WebSocket 在握手之后便直接基于 TCP 進(jìn)行消息通信，只是 TCP的基礎(chǔ)上的一層非常輕的封裝，它只是將TCP的字節(jié)流轉(zhuǎn)換成消息流（文本或二進(jìn)制），至于怎么解析這些消息的內(nèi)容完全依賴(lài)于應(yīng)用本身。
1.2 為什么需要 WebSocket？
我們知道HTTP 協(xié)議有一個(gè)缺陷：通信只能由客戶(hù)端發(fā)起，服務(wù)器端無(wú)法向某個(gè)客戶(hù)端推送數(shù)據(jù)。然而，在某些場(chǎng)景下，數(shù)據(jù)推送是非常必要的功能，為了實(shí)現(xiàn)推送技術(shù)，所用的技術(shù)都是輪詢(xún)，即：客戶(hù)端在特定的的時(shí)間間隔（如每 1 秒），由瀏覽器對(duì)服務(wù)器發(fā)出 HTTP 請(qǐng)求，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶(hù)端的瀏覽器。
例如，在外賣(mài)場(chǎng)景下，當(dāng)騎手位置更新時(shí)，服務(wù)器端向客戶(hù)端推送騎手位置數(shù)據(jù)。如果使用HTTP協(xié)議，那么就只能輪詢(xún)。輪詢(xún)模式具有很明顯的缺點(diǎn)，即瀏覽器需要不斷地向服務(wù)器發(fā)出請(qǐng)求，然而 HTTP 請(qǐng)求可能包含較長(zhǎng)的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會(huì)浪費(fèi)很多的帶寬等資源，同樣，數(shù)據(jù)時(shí)效性較低，存在一定的數(shù)據(jù)延遲。
在這種情況下，WebSocket 出現(xiàn)了，使用 WebSocket 協(xié)議可以實(shí)現(xiàn)由服務(wù)端主動(dòng)向客戶(hù)端推送消息，同時(shí)也可以實(shí)現(xiàn)客戶(hù)端向服務(wù)器端發(fā)送消息。這樣能更好得節(jié)省服務(wù)器資源和帶寬；并且能夠更實(shí)時(shí)地進(jìn)行通訊。隨著HTML 5 的流行， WebSocket已經(jīng)成為國(guó)際標(biāo)準(zhǔn)，目前主流的瀏覽器都已經(jīng)支持。
1.3 WebSocket的優(yōu)點(diǎn)
- 較少的控制開(kāi)銷(xiāo)。在連接建立后，服務(wù)端和客戶(hù)端之間交換數(shù)據(jù)時(shí)，用于協(xié)議控制的數(shù)據(jù)包頭部相對(duì)較小。在不包含擴(kuò)展的情況下，對(duì)于服務(wù)器到客戶(hù)端的內(nèi)容，此頭部大小只有 2 至 10 字節(jié)（和數(shù)據(jù)包長(zhǎng)度有關(guān)）；對(duì)于客戶(hù)端到服務(wù)器的內(nèi)容，此頭部還需要加上額外的 4 字節(jié)的掩碼。這相對(duì)于 HTTP 協(xié)議每次都要攜帶完整的頭部信息，此項(xiàng)開(kāi)銷(xiāo)顯著減少了。
- 更強(qiáng)的實(shí)時(shí)性。由于WebSocket協(xié)議是全雙工的，所以服務(wù)器可以隨時(shí)主動(dòng)向客戶(hù)端推送數(shù)據(jù)。相對(duì)于 HTTP 請(qǐng)求必須等待客戶(hù)端發(fā)起請(qǐng)求服務(wù)端才能響應(yīng)，延遲明顯更少；即使是和Comet 等類(lèi)似的長(zhǎng)輪詢(xún)比較，WebSocket也能在短時(shí)間內(nèi)更高效的傳遞數(shù)據(jù)。
- 保持連接狀態(tài)。與 HTTP 不同的是， Websocket 需要先創(chuàng)建連接，這就使得其成為一種有狀態(tài)的協(xié)議，之后通信時(shí)可以省略部分狀態(tài)信息，而 HTTP 請(qǐng)求需要在每個(gè)請(qǐng)求都攜帶狀態(tài)信息（如Token等）。
- 更好的二進(jìn)制支持。 Websocket 定義了二進(jìn)制幀，相對(duì) HTTP，可以更輕松地處理二進(jìn)制數(shù)據(jù)。Websocket 定義了擴(kuò)展，用戶(hù)可以擴(kuò)展協(xié)議、實(shí)現(xiàn)部分自定義的子協(xié)議。如部分瀏覽器支持Gzip壓縮等。
- 更好的壓縮效果。相對(duì)于 HTTP 壓縮， Websocket 在適當(dāng)?shù)臄U(kuò)展支持下，可以沿用之前內(nèi)容的上下文，在傳遞類(lèi)似的數(shù)據(jù)時(shí)，可以顯著地提高壓縮率。
1.4 WebSocket的應(yīng)用場(chǎng)景
隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，WebSocket的使用越來(lái)越廣泛?；旧现灰菚r(shí)效性要求高的業(yè)務(wù)場(chǎng)景都可以使用WebSocket，例如：
- 協(xié)同編輯
- 基于位置的應(yīng)用
- 體育實(shí)況更新
- 股票基金報(bào)價(jià)實(shí)時(shí)更新
- 多玩家游戲
- 音視頻聊天
- 視頻會(huì)議
- 在線(xiàn)教育
- 社交訂閱
除此之外，還有系統(tǒng)消息通知、用戶(hù)上下線(xiàn)提醒、客戶(hù)端數(shù)據(jù)同步，實(shí)時(shí)數(shù)據(jù)更新，多屏幕同步，用戶(hù)在線(xiàn)狀態(tài)，消息掃描二維碼登錄/二維碼支付，彈幕、各類(lèi)信息提醒，在線(xiàn)選座，實(shí)時(shí)監(jiān)控大屏等等；
二、WebSocket的事件
我們知道HTTP協(xié)議使用http和https的統(tǒng)一資源標(biāo)志符。WebSocket與HTTP類(lèi)似，使用的是 ws 或 wss（類(lèi)似于 HTTPS），其中 wss 表示在 TLS 之上的Websocket。例如：
ws://cdxwcx.com/wsapiwss://secure.cdxwcx.com/
WebSocket 使用和 HTTP 相同的 TCP 端口，可以繞過(guò)大多數(shù)防火墻的限制。默認(rèn)情況下， WebSocket 協(xié)議使用80 端口；運(yùn)行在 TLS 之上時(shí)，默認(rèn)使用 443 端口。
WebSocket 只是在 Socket 協(xié)議的基礎(chǔ)上，非常輕的一層封裝。在WebSocket API中定義了open、close、error、message等幾個(gè)基本事件，這就使得WebSocket使用起來(lái)非常簡(jiǎn)單。 下面是在WebSocket API定義的事件：
|
事件 |
事件處理程序 |
描述 |
|
open |
Sokcket onopen |
連接建立時(shí)觸發(fā) |
|
message |
Sokcket onmessage |
客戶(hù)端接收服務(wù)端數(shù)據(jù)時(shí)觸發(fā) |
|
error |
Sokcket onerror |
通訊發(fā)生錯(cuò)誤時(shí)觸發(fā) |
|
close |
Sokcket onclose |
連接關(guān)閉時(shí)觸發(fā) |
三、Spring Boot整合WebSocket實(shí)現(xiàn)聊天室
Spring Boot 提供了 Websocket 組件 spring-boot-starter-websocket，用來(lái)支持在 Spring Boot環(huán)境下對(duì)Websocket 的使用。
下面我們就以多人在線(xiàn)聊天室為例，演示 Spring Boot 是如何整合Websocket 實(shí)現(xiàn)服務(wù)端消息推送的。
3.1 創(chuàng)建前端頁(yè)面
首先，創(chuàng)建spring boot項(xiàng)目：spring-boot-starter-websocket。接下來(lái)，我們構(gòu)建前臺(tái)交互頁(yè)面，創(chuàng)建index.html頁(yè)面并在 js 中實(shí)現(xiàn)WebSocket通訊，完整頁(yè)面代碼如下所示：
Chat Room
上面的示例中，js中定義了WebSocket通訊相關(guān)的代碼，如：ws.onopen、ws.onmessage、ws.onclose等事件。
3.2 創(chuàng)建后端服務(wù)
接下來(lái)，我們開(kāi)始創(chuàng)建后臺(tái)WebSocket服務(wù)，實(shí)現(xiàn)WebSocket后臺(tái)通訊服務(wù)。
step 1 ：引入相關(guān)依賴(lài)
首先，修改項(xiàng)目的pom.xml文件，主要添加 Web 和 Websocket 組件。具體代碼如下所示：
org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-websocket org.springframework.boot spring-boot-starter-test test
step2：消息接收
首先創(chuàng)建ChatServerEndpoint類(lèi)，并使用@ServerEndpoint注解創(chuàng)建WebSocket EndPoint實(shí)現(xiàn)客戶(hù)端連接、消息的接收、等事件。具體示例代碼如下所示：
@RestController@ServerEndpoint("/chat/{username}")public class ChatServerEndpoint { private static final Logger logger = LoggerFactory.getLogger(ChatRoomServerEndpoint.class);
@OnOpen public void openSession(@PathParam("username") String username, Session session) { ONLINE_USER_SESSIONS.put(username, session); String message = "歡迎用戶(hù)[" + username + "] 來(lái)到聊天室！"; logger.info("用戶(hù)登錄："+message); sendMessageAll(message); }
@OnMessage public void onMessage(@PathParam("username") String username, String message) { logger.info("發(fā)送消息："+message); sendMessageAll("用戶(hù)[" + username + "] : " + message); }
@OnClose public void onClose(@PathParam("username") String username, Session session) { //當(dāng)前的Session 移除 ONLINE_USER_SESSIONS.remove(username); //并且通知其他人當(dāng)前用戶(hù)已經(jīng)離開(kāi)聊天室了 sendMessageAll("用戶(hù)[" + username + "] 已經(jīng)離開(kāi)聊天室了！"); try { session.close(); } catch (IOException e) { logger.error("onClose error",e); } }
@OnError public void onError(Session session, Throwable throwable) { try { session.close(); } catch (IOException e) { logger.error("onError excepiton",e); } logger.info("Throwable msg "+throwable.getMessage()); }}上面的示例中，我們使用 @ServerEndpoint("/chat/{username}") 注解監(jiān)聽(tīng)此地址的 WebSocket 信息，客戶(hù)端也是通過(guò)此地址向服務(wù)端接收和發(fā)送消息。同時(shí)使用@OnOpen?注解實(shí)現(xiàn)客戶(hù)端連接事件，@OnMessage?注解實(shí)現(xiàn)消息發(fā)送事件，@OnClose?注解實(shí)現(xiàn)客戶(hù)端連接關(guān)閉事件，@OnError注解實(shí)現(xiàn)消息錯(cuò)誤事件。
step3：消息發(fā)送
我們先創(chuàng)建一個(gè) WebSocketUtils 工具類(lèi)，用來(lái)存儲(chǔ)聊天室在線(xiàn)的用戶(hù)信息，以及向客戶(hù)端發(fā)送消息的功能。具體代碼如下所示：
public final class WebSocketUtils { private static final Logger logger = LoggerFactory.getLogger(WebSocketUtils.class);
// 存儲(chǔ) websocket session public static final Map ONLINE_USER_SESSIONS = new ConcurrentHashMap<>();
/** * @param session 用戶(hù) session * @param message 發(fā)送內(nèi)容 */public static void sendMessage(Session session, String message){ if (session == null) { return; } final RemoteEndpoint.Basic basic = session.getBasicRemote(); if (basic == null) { return; } try { basic.sendText(message); } catch (IOException e) { logger.error("sendMessage IOException ",e); } }
/** * 推送消息到其他客戶(hù)端 * @param message */public static void sendMessageAll(String message){ ONLINE_USER_SESSIONS.forEach((sessionId, session) -> sendMessage(session, message)); }}
step4：開(kāi)啟 WebSocket 功能
修改項(xiàng)目啟動(dòng)類(lèi)，需要添加 @EnableWebSocket 開(kāi)啟 WebSocket 功能。具體示例代碼如下所示：
@EnableWebSocket@SpringBootApplicationpublic class WebSocketApplication {
public static void main(String[] args){ SpringApplication.run(WebSocketApplication.class, args); }
@Beanpublic ServerEndpointExporter serverEndpointExporter(){ return new ServerEndpointExporter(); }}以上，我們WebSocket服務(wù)端內(nèi)容就實(shí)現(xiàn)完畢了。接下來(lái)我們驗(yàn)證整個(gè)聊天室功能是否正常？
3.3 驗(yàn)證測(cè)試
前面，我們已經(jīng)把整個(gè)WebSocket聊天室的前后臺(tái)功能介紹完了。接下來(lái)我們驗(yàn)證整個(gè)聊天室功能是否正常？
首先，啟動(dòng)項(xiàng)目，在瀏覽器中分別輸入地址：http://localhost:8080/ 打開(kāi)三個(gè)聊天室頁(yè)面。如下圖所示：
然后，分別在三個(gè)聊天室頁(yè)面中，輸入三個(gè)昵稱(chēng)并加入聊天室，與服務(wù)端成功建立WebSocket連接，即可在聊天室發(fā)送消息。
點(diǎn)擊頁(yè)面上的離開(kāi)聊天室，此頁(yè)面與服務(wù)端建立的WebSocket連接就會(huì)斷開(kāi)。其他連接不受影響。
最后
以上，我們就把Spring Boot整合WebSocket，實(shí)現(xiàn)BBS聊天室的功能介紹完了。WebSocket能夠以非常簡(jiǎn)單的方式，實(shí)現(xiàn)客戶(hù)端與服務(wù)器端的雙向通訊。在實(shí)際項(xiàng)目開(kāi)發(fā)過(guò)程中使用越來(lái)越廣泛，希望大家能熟悉掌握。
網(wǎng)站名稱(chēng)：SpringBoot輕松整合WebSocket實(shí)現(xiàn)Web在線(xiàn)聊天室
轉(zhuǎn)載來(lái)源：http://www.5511xx.com/article/dhcdcip.html
