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

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

作者：章為忠學(xué)架構(gòu)
開發(fā) 前端
我們就把Spring Boot整合WebSocket，實(shí)現(xiàn)BBS聊天室的功能介紹完了。WebSocket能夠以非常簡單的方式，實(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簡介

1.1 什么是WebSocket？

WebSocket協(xié)議是基于TCP的一種網(wǎng)絡(luò)協(xié)議，它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工（Full-duplex）通信。它允許服務(wù)端主動(dòng)向客戶端推送數(shù)據(jù)，這使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單高效。在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ù)。然而，在某些場景下，數(shù)據(jù)推送是非常必要的功能，為了實(shí)現(xiàn)推送技術(shù)，所用的技術(shù)都是輪詢，即：客戶端在特定的的時(shí)間間隔（如每 1 秒），由瀏覽器對(duì)服務(wù)器發(fā)出 HTTP 請(qǐng)求，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。

例如，在外賣場景下，當(dāng)騎手位置更新時(shí)，服務(wù)器端向客戶端推送騎手位置數(shù)據(jù)。如果使用HTTP協(xié)議，那么就只能輪詢。輪詢模式具有很明顯的缺點(diǎn)，即瀏覽器需要不斷地向服務(wù)器發(fā)出請(qǐng)求，然而 HTTP 請(qǐ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)成為國際標(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ù)包長度有關(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 等類似的長輪詢比較，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)用場景

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，WebSocket的使用越來越廣泛。基本上只要是時(shí)效性要求高的業(yè)務(wù)場景都可以使用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/wsapi
wss://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使用起來非常簡單。 下面是在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)建前端頁面

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

<!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);
            ws.onmessage = function(event){
                var ta = document.getElementById('responseText');
                ta.value += event.data+"\r\n";
            };
            ws.onopen = function(event){
                var ta = document.getElementById('responseText');
                ta.value += "建立 websocket 連接... \r\n";
            };
            ws.onclose = 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"){
        ONLINE_USER_SESSIONS.put(username, session);
        String message = "歡迎用戶[" + username + "] 來到聊天室！";
        logger.info("用戶登錄："+message);
        sendMessageAll(message);
    }

    @OnMessage
    public void onMessage(@PathParam("username"){
        logger.info("發(fā)送消息："+message);
        sendMessageAll("用戶[" + username + "] : " + message);
    }

    @OnClose
    public void onClose(@PathParam("username"){
        //當(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
    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
    public static void sendMessageAll(String message){
        ONLINE_USER_SESSIONS.forEach((sessionId, session) -> sendMessage(session, message));
    }
}

step4：開啟 WebSocket 功能

修改項(xiàng)目啟動(dòng)類，需要添加 @EnableWebSocket 開啟 WebSocket 功能。具體示例代碼如下所示：

@EnableWebSocket
@SpringBootApplication
public class WebSocketApplication {

    public static void main(String[] args){
        SpringApplication.run(WebSocketApplication.class, args);
    }

    @Bean
    public 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è)聊天室頁面。如下圖所示：

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

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

最后

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

責(zé)任編輯：武曉燕 來源： 今日頭條
WebSocketSpring方式
相關(guān)推薦

2023-01-13 00:02:41

2023-02-10 08:16:48

WebSocket簡易聊天室

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)