SpringBoot+WebSocket向前端推送消息的實現(xiàn)示例

更新時間：2024年08月05日 09:29:25 作者：iQM75

WebSocket是一種在單個TCP連接上進行全雙工通信的協(xié)議,允許服務器主動向客戶端推送信息,同時也能從客戶端接收信息,本文主要介紹了SpringBoot+WebSocket向前端推送消息的實現(xiàn)示例,感興趣的可以了解一下

什么是WebSocket

WebSocket是一種在單個TCP連接上進行全雙工通信的協(xié)議，允許服務器主動向客戶端推送信息，同時也能從客戶端接收信息。

WebSocket協(xié)議誕生于2008年，并在2011年成為國際標準。這種協(xié)議解決了傳統(tǒng)HTTP請求中需要不斷輪詢服務器的問題，通過建立持久化的連接，實現(xiàn)了高效的雙向數(shù)據(jù)傳輸。具體如下：

基本特點：WebSocket建立在TCP協(xié)議之上，提供了一個全雙工通信通道。這意味著服務器和客戶端可以在一個連接上同時發(fā)送和接收信息，且數(shù)據(jù)交換更加高效。
協(xié)議兼容：雖然WebSocket是一個獨立的協(xié)議，但它在握手階段使用HTTP協(xié)議，以確保與現(xiàn)有系統(tǒng)的兼容性。其默認端口也是80和443，使得它可以通過各種HTTP代理服務器。
應用場景：WebSocket非常適合需要實時數(shù)據(jù)交互的應用，如聊天應用、在線游戲、實時通知等。
數(shù)據(jù)格式：WebSocket支持傳輸文本和二進制數(shù)據(jù)，并且數(shù)據(jù)格式輕量，開銷小，性能高。
API使用：在開發(fā)中，可以使用WebSocket API輕松地創(chuàng)建和管理連接，并通過這些連接發(fā)送和接收數(shù)據(jù)。例如，在JavaScript中，可以這樣創(chuàng)建和處理WebSocket連接：

// 創(chuàng)建WebSocket連接
var socket = new WebSocket('ws://localhost:8080');

// 連接成功觸發(fā)
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// 監(jiān)聽消息
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

綜上所述，WebSocket通過提供高效、低開銷的雙向通信協(xié)議，極大地改善了實時數(shù)據(jù)傳輸?shù)捏w驗，適用于需要頻繁數(shù)據(jù)交互的應用場景。

實現(xiàn)

1、在你的pom.xml文件中添加以下依賴：

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

2、創(chuàng)建一個配置類，繼承AbstractWebSocketMessageBrokerConfigurer，并重寫configureMessageBroker和registerStompEndpoints方法。

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocket").withSockJS();
    }
}

3、創(chuàng)建一個類，用于處理客戶端發(fā)送的消息和向客戶端發(fā)送消息。

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class WebSocketController {

    @MessageMapping("/send")
    @SendTo("/topic/messages")
    public String handleMessage(String message) {
        return "Received: " + message;
    }
}

4、在前端，你需要使用SockJS和STOMP.js庫來連接WebSocket服務器并接收消息。首先，確保你已經(jīng)在HTML文件中引入了這兩個庫：

<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>

5、然后，你可以使用以下JavaScript代碼連接到WebSocket服務器并接收消息：

// 建立連接
var socket = new SockJS('/websocket');
var stompClient = Stomp.over(socket);

// 連接到服務器
stompClient.connect({}, function (frame) {
    console.log('Connected: ' + frame);

    // 訂閱消息
    stompClient.subscribe('/topic/messages', function (message) {
        console.log('Received: ' + message.body);
    });
});

// 發(fā)送消息
function sendMessage() {
    var message = document.getElementById('message').value;
    stompClient.send("/app/send", {}, message);
}

現(xiàn)在，當你調用sendMessage函數(shù)時，它將通過WebSocket向后端發(fā)送消息，后端將處理該消息并將其廣播到所有訂閱了/topic/messages的客戶端。

到此這篇關于SpringBoot+WebSocket向前端推送消息的實現(xiàn)示例的文章就介紹到這了,更多相關SpringBoot WebSocket推送消息內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: