自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

SpringBoot輕松整合WebSocket實(shí)現(xiàn)Web在線聊天室

作者：章為忠
開發(fā) 架構(gòu)
我們就把Spring Boot整合WebSocket，實(shí)現(xiàn)BBS聊天室的功能介紹完了。WebSocket能夠以非常簡(jiǎn)單的方式，實(shí)現(xiàn)客戶端與服務(wù)器端的雙向通訊。在實(shí)際項(xiàng)目開發(fā)過程中使用越來越廣泛，希望大家能熟悉掌握。

前面為大家講述了 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在線聊天室，希望能對(duì)大家有所幫助。

一、WebSocket簡(jiǎn)介

1.1 什么是WebSocket？

WebSocket協(xié)議是基于TCP的一種網(wǎng)絡(luò)協(xié)議，它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工（Full-duplex）通信。它允許服務(wù)端主動(dòng)向客戶端推送數(shù)據(jù)，這使得客戶端和服務(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)容完全依賴于應(yīng)用本身。

1.2 為什么需要 WebSocket？

我們知道HTTP 協(xié)議有一個(gè)缺陷：通信只能由客戶端發(fā)起，服務(wù)器端無法向某個(gè)客戶端推送數(shù)據(jù)。然而，在某些場(chǎng)景下，數(shù)據(jù)推送是非常必要的功能，為了實(shí)現(xiàn)推送技術(shù)，所用的技術(shù)都是輪詢，即：客戶端在特定的的時(shí)間間隔（如每 1 秒），由瀏覽器對(duì)服務(wù)器發(fā)出 HTTP 請(qǐng)求，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。

例如，在外賣場(chǎng)景下，當(dāng)騎手位置更新時(shí)，服務(wù)器端向客戶端推送騎手位置數(shù)據(jù)。如果使用HTTP協(xié)議，那么就只能輪詢。輪詢模式具有很明顯的缺點(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)向客戶端推送消息，同時(shí)也可以實(shí)現(xiàn)客戶端向服務(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)

  • 較少的控制開銷。在連接建立后，服務(wù)端和客戶端之間交換數(shù)據(jù)時(shí)，用于協(xié)議控制的數(shù)據(jù)包頭部相對(duì)較小。在不包含擴(kuò)展的情況下，對(duì)于服務(wù)器到客戶端的內(nèi)容，此頭部大小只有 2 至 10 字節(jié)（和數(shù)據(jù)包長(zhǎng)度有關(guān)）；對(duì)于客戶端到服務(wù)器的內(nèi)容，此頭部還需要加上額外的 4 字節(jié)的掩碼。這相對(duì)于 HTTP 協(xié)議每次都要攜帶完整的頭部信息，此項(xiàng)開銷顯著減少了。
  • 更強(qiáng)的實(shí)時(shí)性。由于WebSocket協(xié)議是全雙工的，所以服務(wù)器可以隨時(shí)主動(dòng)向客戶端推送數(shù)據(jù)。相對(duì)于 HTTP 請(qǐng)求必須等待客戶端發(fā)起請(qǐng)求服務(wù)端才能響應(yīng)，延遲明顯更少；即使是和Comet 等類似的長(zhǎng)輪詢比較，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ò)展，用戶可以擴(kuò)展協(xié)議、實(shí)現(xiàn)部分自定義的子協(xié)議。如部分瀏覽器支持Gzip壓縮等。
  • 更好的壓縮效果。相對(duì)于 HTTP 壓縮， Websocket 在適當(dāng)?shù)臄U(kuò)展支持下，可以沿用之前內(nèi)容的上下文，在傳遞類似的數(shù)據(jù)時(shí)，可以顯著地提高壓縮率。

1.4 WebSocket的應(yīng)用場(chǎng)景

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，WebSocket的使用越來越廣泛?；旧现灰菚r(shí)效性要求高的業(yè)務(wù)場(chǎng)景都可以使用WebSocket，例如：

  • 協(xié)同編輯
  • 基于位置的應(yīng)用
  • 體育實(shí)況更新
  • 股票基金報(bào)價(jià)實(shí)時(shí)更新
  • 多玩家游戲
  • 音視頻聊天
  • 視頻會(huì)議
  • 在線教育
  • 社交訂閱

除此之外，還有系統(tǒng)消息通知、用戶上下線提醒、客戶端數(shù)據(jù)同步，實(shí)時(shí)數(shù)據(jù)更新，多屏幕同步，用戶在線狀態(tài)，消息掃描二維碼登錄/二維碼支付，彈幕、各類信息提醒，在線選座，實(shí)時(shí)監(jiān)控大屏等等；

二、WebSocket的事件

我們知道HTTP協(xié)議使用http和https的統(tǒng)一資源標(biāo)志符。WebSocket與HTTP類似，使用的是 ws 或 wss（類似于 HTTPS），其中 wss 表示在 TLS 之上的Websocket。例如：

ws://example.com/wsapiwss://secure.example.com/

WebSocket 使用和 HTTP 相同的 TCP 端口，可以繞過大多數(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使用起來非常簡(jiǎn)單。 下面是在WebSocket API定義的事件：

事件

事件處理程序

描述

open

Sokcket onopen

連接建立時(shí)觸發(fā)

message

Sokcket onmessage

客戶端接收服務(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，用來支持在 Spring Boot環(huán)境下對(duì)Websocket 的使用。

下面我們就以多人在線聊天室為例，演示 Spring Boot 是如何整合Websocket 實(shí)現(xiàn)服務(wù)端消息推送的。

3.1 創(chuàng)建前端頁(yè)面

首先，創(chuàng)建spring boot項(xiàng)目：spring-boot-starter-websocket。接下來，我們構(gòu)建前臺(tái)交互頁(yè)面，創(chuàng)建index.html頁(yè)面并在 js 中實(shí)現(xiàn)WebSocket通訊，完整頁(yè)面代碼如下所示：



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>Chat Room</title>    <script type="text/javascript">        var urlPrefix ='ws://localhost:8080/chat/';        var ws = null;        // 加入function join() {            var username = document.getElementById('uid').value;            var url = urlPrefix + username;            ws = new WebSocket(url);function(event){                var ta = document.getElementById('responseText');                ta.value += event.data+"\r\n";            };function(event){                var ta = document.getElementById('responseText');                ta.value += "建立 websocket 連接... \r\n";            };function(event){                var ta = document.getElementById('responseText');                ta.value += "用戶["+username+"] 已經(jīng)離開聊天室! \r\n";                ta.value += "關(guān)閉 websocket 連接. \r\n";            };        }
        // 退出function exit(){            if(ws) {                ws.close();            }        }
        // 發(fā)送消息function send(){            var message = document.getElementById('message').value;            if(!window.WebSocket){return;}            if(ws.readyState == WebSocket.OPEN){                ws.send(message);            }else{                alert("WebSocket 連接沒有建立成功！");            }        }</script></head><body><form onSubmit="return false;">    <h3>BBS聊天室</h3>    <textarea id="responseText" style="width: 1024px;height: 300px;"></textarea>    <br/>    <br />    <label>昵稱 : </label><input type="text" id="uid" />      <input type="button" value="加入聊天室" onClick="join()" />  
    <input type="button" value="離開聊天室" onClick="exit()" />    <br />    <br />    <label>消息 : </label><input type="text" id="message" />   <input type="button" value="發(fā)送消息" onClick="send()" /></form></body></html>

上面的示例中，js中定義了WebSocket通訊相關(guān)的代碼，如：ws.onopen、ws.onmessage、ws.onclose等事件。

3.2 創(chuàng)建后端服務(wù)

接下來，我們開始創(chuàng)建后臺(tái)WebSocket服務(wù)，實(shí)現(xiàn)WebSocket后臺(tái)通訊服務(wù)。

step 1 ：引入相關(guān)依賴

首先，修改項(xiàng)目的pom.xml文件，主要添加 Web 和 Websocket 組件。具體代碼如下所示：

<dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-web</artifactId>        </dependency>        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-websocket</artifactId>        </dependency>        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-test</artifactId>            <scope>test</scope>        </dependency>

step2：消息接收

首先創(chuàng)建ChatServerEndpoint類，并使用@ServerEndpoint注解創(chuàng)建WebSocket EndPoint實(shí)現(xiàn)客戶端連接、消息的接收、等事件。具體示例代碼如下所示：

@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 = "歡迎用戶[" + username + "] 來到聊天室！";        logger.info("用戶登錄："+message);        sendMessageAll(message);    }
    @OnMessage    public void onMessage(@PathParam("username") String username, String message) {        logger.info("發(fā)送消息："+message);        sendMessageAll("用戶[" + username + "] : " + message);    }
    @OnClose    public void onClose(@PathParam("username") String username, Session session) {        //當(dāng)前的Session 移除        ONLINE_USER_SESSIONS.remove(username);        //并且通知其他人當(dāng)前用戶已經(jīng)離開聊天室了        sendMessageAll("用戶[" + username + "] 已經(jīng)離開聊天室了！");        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)聽此地址的 WebSocket 信息，客戶端也是通過此地址向服務(wù)端接收和發(fā)送消息。同時(shí)使用@OnOpen?注解實(shí)現(xiàn)客戶端連接事件，@OnMessage?注解實(shí)現(xiàn)消息發(fā)送事件，@OnClose?注解實(shí)現(xiàn)客戶端連接關(guān)閉事件，@OnError注解實(shí)現(xiàn)消息錯(cuò)誤事件。

step3：消息發(fā)送

我們先創(chuàng)建一個(gè) WebSocketUtils 工具類，用來存儲(chǔ)聊天室在線的用戶信息，以及向客戶端發(fā)送消息的功能。具體代碼如下所示：

public final class WebSocketUtils {    private static final Logger logger = LoggerFactory.getLogger(WebSocketUtils.class);
    // 存儲(chǔ) websocket session    public static final Map<String, Session> ONLINE_USER_SESSIONS = new ConcurrentHashMap<>();
    /**     * @param session 用戶 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);        }    }
    /**     * 推送消息到其他客戶端     * @param message     */public static void sendMessageAll(String message){        ONLINE_USER_SESSIONS.forEach((sessionId, session) -> sendMessage(session, message));    }}


step4：開啟 WebSocket 功能

修改項(xiàng)目啟動(dòng)類，需要添加 @EnableWebSocket 開啟 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)完畢了。接下來我們驗(yàn)證整個(gè)聊天室功能是否正常？

3.3 驗(yàn)證測(cè)試

前面，我們已經(jīng)把整個(gè)WebSocket聊天室的前后臺(tái)功能介紹完了。接下來我們驗(yàn)證整個(gè)聊天室功能是否正常？

首先，啟動(dòng)項(xiàng)目，在瀏覽器中分別輸入地址：http://localhost:8080/ 打開三個(gè)聊天室頁(yè)面。如下圖所示：

圖片


然后，分別在三個(gè)聊天室頁(yè)面中，輸入三個(gè)昵稱并加入聊天室，與服務(wù)端成功建立WebSocket連接，即可在聊天室發(fā)送消息。

圖片

點(diǎn)擊頁(yè)面上的離開聊天室，此頁(yè)面與服務(wù)端建立的WebSocket連接就會(huì)斷開。其他連接不受影響。

圖片

最后

以上，我們就把Spring Boot整合WebSocket，實(shí)現(xiàn)BBS聊天室的功能介紹完了。WebSocket能夠以非常簡(jiǎn)單的方式，實(shí)現(xiàn)客戶端與服務(wù)器端的雙向通訊。在實(shí)際項(xiàng)目開發(fā)過程中使用越來越廣泛，希望大家能熟悉掌握。


責(zé)任編輯：武曉燕 來源： 架構(gòu)師精進(jìn)
SpringBootBBS方式
相關(guān)推薦

2023-01-05 09:17:58

2023-02-10 08:16:48

WebSocket簡(jiǎn)易聊天室

2022-07-26 14:53:10

WebSocket網(wǎng)絡(luò)通信協(xié)議

2024-09-11 08:35:54

2011-06-09 15:44:29

Spring

2011-12-15 11:11:51

JavaNIO

2022-11-14 08:01:48

2015-07-06 10:42:18

PHP聊天室應(yīng)用

2021-10-14 18:46:29

Websocket瀏覽器API

2023-08-09 08:01:00

WebSockett服務(wù)器web

2021-11-16 09:38:10

鴻蒙HarmonyOS應(yīng)用

2022-12-01 08:25:23

eTsTCP聊天室

2021-03-26 08:16:32

SpringbootWebsocket前端

2011-11-30 16:37:58

sync

2015-08-06 17:17:33

swoole聊天室

2024-10-07 10:45:12

2022-04-18 10:36:48

社交軟件聊天平臺(tái)rocket.cha

2021-11-15 11:32:12

Linux Linux sockeLinux 系統(tǒng)

2024-01-18 11:15:46

Pythonsocket聊天室
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)