溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

SpringBoot如何使用WebSocket實(shí)現(xiàn)群發(fā)消息

發(fā)布時(shí)間：2021-06-15 16:07:41 來源：億速云 閱讀：515 作者：小新 欄目：編程語言

小編給大家分享一下SpringBoot如何使用WebSocket實(shí)現(xiàn)群發(fā)消息，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

WebSocket 是一種在單個(gè) TCP 連接上進(jìn)行全雙工通信的協(xié)議，已被 W3C 定為標(biāo)準(zhǔn)。使用 WebSocket 可以使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡(jiǎn)單。在 WebSocket 協(xié)議中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就可以直接創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。

SpringBoot如何使用WebSocket實(shí)現(xiàn)群發(fā)消息

特點(diǎn)

  • WebSocket 使用時(shí)需要先創(chuàng)建連接，這使得 Websocket 成為一種有狀態(tài)的協(xié)議，在之后的通信過程中可以省略部分狀態(tài)信息（例如身份認(rèn)證等）。

  • WebSocket 連接在端口 80（ws）或者 443（wss）上創(chuàng)建，與 HTTP 使用的端口相同，這樣，基本上所有的防火墻都不會(huì)阻止 WebSocket 連接。

  • WebSocket 使用 HTTP 協(xié)議進(jìn)行握手，因此它可以自然而然地集成到網(wǎng)絡(luò)瀏覽器和 HTTP 服務(wù)器中，而不需要額外的成本。

  • 心跳消息（ping 和 pong）將被反復(fù)的發(fā)送，進(jìn)而保持 WebSocket 連接一直處于活躍狀態(tài)。

  • 使用該協(xié)議，當(dāng)消息啟動(dòng)或者到達(dá)的時(shí)候，服務(wù)端和客戶端都可以知道。

  • WebSocket 連接關(guān)閉時(shí)將發(fā)送一個(gè)特殊的關(guān)閉消息。

  • WebSocket 支持跨域，可以避免 Ajax 的限制。

  • HTTP 規(guī)范要求瀏覽器將并發(fā)連接數(shù)限制為每個(gè)主機(jī)名兩個(gè)連接，但是當(dāng)我們使用 Websocket 的時(shí)候，當(dāng)握手完成之后，該限制就不存在了，因?yàn)榇藭r(shí)的連接已經(jīng)不再是 HTTP 連接了。

  • WebSocket 協(xié)議支持?jǐn)U展，用戶可以擴(kuò)展協(xié)議，實(shí)現(xiàn)部分自定義的子協(xié)議。

  • WebSocket 擁有更好的二進(jìn)制支持以及更好的壓縮效果。

一、添加依賴

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

二、配置 WebSocket

Spring 框架提供了基于 WebSocket 的 STOMP 支持，STOMP 是一個(gè)簡(jiǎn)單的可互操作的協(xié)議，通常被用于通過中間服務(wù)器在客戶端之間進(jìn)行異步消息傳遞。

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
 
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        // 設(shè)置消息代理的前綴，如果消息的前綴為"/topic"，就會(huì)將消息轉(zhuǎn)發(fā)給消息代理（broker）
        // 再由消息代理廣播給當(dāng)前連接的客戶端
        config.enableSimpleBroker("/topic");
        // 下面方法可以配置一個(gè)或多個(gè)前綴，通過這些前綴過濾出需要被注解方法處理的消息。
        // 例如這里表示前綴為"/app"的destination可以通過@MessageMapping注解的方法處理
        // 而其他 destination（例如"/topic""/queue"）將被直接交給 broker 處理
        config.setApplicationDestinationPrefixes("/app");
    }
 
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 定義一個(gè)前綴為"/chart"的endpoint，并開啟 sockjs 支持。
        // sockjs 可以解決瀏覽器對(duì)WebSocket的兼容性問題，客戶端將通過這里配置的URL建立WebSocket連接
        registry.addEndpoint("/chat").withSockJS();
    }
}

三、服務(wù)端代碼

根據(jù)上面 WebSocketConfig 的配置，@MessageMapping("/hello") 注解的方法將用來接收“/app/hello”路徑發(fā)送來的消息，在注解方法中對(duì)消息進(jìn)行處理后，再將消息轉(zhuǎn)發(fā)到 @SendTo 定義的路徑上。而 @SendTo 路徑是一個(gè)前綴為“/topic”的路徑，因此該消息被交給消息代理 broker，再由 broker 進(jìn)行廣播。

@Controller
public class DemoController {

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Message greeting(Message message) throws Exception {
        return message;
    }

}
@Data
public class Message {

    private String name;
    
    private String content;

}

四、前端代碼 

在 resources/static 目錄下創(chuàng)建 chat.html 頁面作為聊天頁面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群聊</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.1.2/sockjs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <script>
        var stompClient = null;

        // 根據(jù)是否已連接設(shè)置頁面元素狀態(tài)
        function setConnected(connected) {
            $("#connect").prop("disabled", connected);
            $("#disconnect").prop("disabled", !connected);
            if (connected) {
                $("#conversation").show();
                $("#chat").show();
            }
            else {
                $("#conversation").hide();
                $("#chat").hide();
            }
            $("#greetings").html("");
        }

        // 建立一個(gè)WebSocket連接
        function connect() {
            // 用戶名不能為空
            if (!$("#name").val()) {
                return;
            }
            // 首先使用 SockJS 建立連接
            var socket = new SockJS('/chat');
            // 然后創(chuàng)建一個(gè)STOMP實(shí)例發(fā)起連接請(qǐng)求
            stompClient = Stomp.over(socket);
            // 連接成功回調(diào)
            stompClient.connect({}, function (frame) {
                // 進(jìn)行頁面設(shè)置
                setConnected(true);
                // 訂閱服務(wù)端發(fā)送回來的消息
                stompClient.subscribe('/topic/greetings', function (greeting) {
                    // 將服務(wù)端發(fā)送回來的消息展示出來
                    showGreeting(JSON.parse(greeting.body));
                });
            });
        }

        // 斷開WebSocket連接
        function disconnect() {
            if (stompClient !== null) {
                stompClient.disconnect();
            }
            setConnected(false);
        }

        // 發(fā)送消息
        function sendName() {
            stompClient.send("/app/hello",
                {},
                JSON.stringify({'name': $("#name").val(),'content':$("#content").val()}));
        }

        // 將服務(wù)端發(fā)送回來的消息展示出來
        function showGreeting(message) {
            $("#greetings")
                .append("<div>" + message.name+":"+message.content + "</div>");
        }

        // 頁面加載后進(jìn)行初始化動(dòng)作
        $(function () {
            $( "#connect" ).click(function() { connect(); });
            $( "#disconnect" ).click(function() { disconnect(); });
            $( "#send" ).click(function() { sendName(); });
        });
    </script>
</head>
<body>
<div>
    <label for="name">請(qǐng)輸入用戶名：</label>
    <input type="text" id="name" placeholder="用戶名">
</div>
<div>
    <button id="connect" type="button">連接</button>
    <button id="disconnect" type="button" disabled="disabled">斷開連接</button>
</div>
<div id="chat" >
    <div>
        <label for="name">請(qǐng)輸入聊天內(nèi)容：</label>
        <input type="text" id="content" placeholder="聊天內(nèi)容">
    </div>
    <button id="send" type="button">發(fā)送</button>
    <div id="greetings">
        <div id="conversation" >群聊進(jìn)行中...</div>
    </div>
</div>
</body>
</html>

  • SockJS 是一個(gè)瀏覽器JavaScript庫，提供類似于WebSocket的對(duì)象。SockJS為您提供了一個(gè)一致的，跨瀏覽器的Javascript API，該API在瀏覽器和Web服務(wù)器之間創(chuàng)建了低延遲，全雙工，跨域的通信通道。

  • STOMP 即Simple (or Streaming) Text Orientated Messaging Protocol，簡(jiǎn)單(流)文本定向消息協(xié)議，它提供了一個(gè)可互操作的連接格式，允許STOMP客戶端與任意STOMP消息代理（Broker）進(jìn)行交互。

  • @SendTo 注解，該注解將方法處理過的消息轉(zhuǎn)發(fā)到 broker，再由 broker 進(jìn)行消息廣播。

五、驗(yàn)證結(jié)果

我們請(qǐng)求地址：http://127.0.0.1:8086/chat.html

登錄用戶：piao

SpringBoot如何使用WebSocket實(shí)現(xiàn)群發(fā)消息

登錄用戶：admin

SpringBoot如何使用WebSocket實(shí)現(xiàn)群發(fā)消息

看完了這篇文章，相信你對(duì)“SpringBoot如何使用WebSocket實(shí)現(xiàn)群發(fā)消息”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手