利用SpringBoot與WebSocket實現(xiàn)實時雙向通信功能

更新時間：2025年07月29日 09:15:22 作者：bug菌1

隨著互聯(lián)網(wǎng)技術的飛速發(fā)展,實時通信技術已經(jīng)逐漸成為現(xiàn)代Web應用的核心需求,論是在即時消息系統(tǒng)還是物聯(lián)網(wǎng)(IoT)應用中,WebSocket都提供了一種高效、持久的雙向通信方式,本文將深入解析如何利用Spring Boot實現(xiàn)WebSocket通信,需要的朋友可以參考下

前言

隨著互聯(lián)網(wǎng)技術的飛速發(fā)展，實時通信技術已經(jīng)逐漸成為現(xiàn)代Web應用的核心需求。無論是在即時消息系統(tǒng)、在線游戲、金融交易平臺，還是物聯(lián)網(wǎng)(IoT)應用中，WebSocket都提供了一種高效、持久的雙向通信方式。特別是在需要低延遲的場景下，WebSocket的優(yōu)勢尤為突出。本文將深入解析如何利用Spring Boot實現(xiàn)WebSocket通信，進而結合STOMP協(xié)議，構建一個功能強大的實時聊天室應用。

WebSocket協(xié)議簡介

WebSocket協(xié)議自HTML5引入以來，成為了現(xiàn)代Web應用的重要組成部分。它打破了傳統(tǒng)HTTP協(xié)議只能在請求和響應的周期內(nèi)進行單向通信的限制，實現(xiàn)了雙向通信，并保持持久連接。

WebSocket協(xié)議的優(yōu)勢

低延遲：WebSocket連接是持久性的連接，避免了頻繁的握手過程。消息從客戶端到服務器，再到客戶端的延遲極低，非常適合即時通訊和實時推送場景。
節(jié)省帶寬：相比HTTP的請求-響應模式，WebSocket連接不需要每次傳輸都重新建立連接，節(jié)省了很多帶寬和計算資源。
全雙工通信：客戶端和服務器都可以隨時發(fā)送數(shù)據(jù)，不需要等待對方回應。這使得實時互動應用變得更加靈活和高效。

WebSocket的應用場景

實時聊天：例如即時通訊、客服系統(tǒng)，WebSocket允許即時傳遞消息。
實時數(shù)據(jù)推送：例如股市行情、體育比賽實時得分等，WebSocket使得數(shù)據(jù)可以實時推送到客戶端。
在線游戲：WebSocket能夠?qū)崿F(xiàn)游戲玩家之間的即時互動和實時數(shù)據(jù)同步。
物聯(lián)網(wǎng)（IoT）：WebSocket能夠幫助傳感器和設備實時通信，提供更及時的數(shù)據(jù)反饋。

Spring Boot中實現(xiàn)WebSocket

Spring Boot 是一個開箱即用的框架，集成了多種常用功能，幫助開發(fā)者快速實現(xiàn)應用的功能。Spring Boot 對 WebSocket 的支持非常全面，允許我們輕松地配置 WebSocket 服務。

1. 配置 WebSocket 端點

在 Spring Boot 中配置 WebSocket 服務非常簡單，我們需要做以下幾步：

創(chuàng)建一個 WebSocket 配置類，并使用 @EnableWebSocket 注解啟用 WebSocket 功能。
在配置類中注冊 WebSocket 端點，配置客戶端連接路徑。

package com.example.websocket.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        // 注冊WebSocketHandler，"/chat"是客戶端連接WebSocket時訪問的路徑
        registry.addHandler(new WebSocketHandlerImpl(), "/chat")
                .setAllowedOrigins("*");  // 允許跨域請求
    }
}

2. 創(chuàng)建 WebSocket 處理類

WebSocket 處理類負責接收客戶端發(fā)送的消息并做出響應。我們通過繼承 TextWebSocketHandler 類來實現(xiàn)消息的處理：

package com.example.websocket.handler;

import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.handler.TextWebSocketHandler;

public class WebSocketHandlerImpl extends TextWebSocketHandler {

    @Override
    public void handleTextMessage(WebSocketSession session, TextMessage message) {
        try {
            // 處理客戶端發(fā)送的消息，并向客戶端發(fā)送回應消息
            System.out.println("Received message: " + message.getPayload());
            session.sendMessage(new TextMessage("Echo: " + message.getPayload()));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("WebSocket connection established");
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("WebSocket connection closed");
    }
}

3. 客戶端的 WebSocket 連接

在前端頁面，我們使用原生 JavaScript 創(chuàng)建 WebSocket 連接?？蛻舳送ㄟ^ new WebSocket() 方法與服務器建立連接：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Chat</title>
</head>
<body>
    <h1>WebSocket Chat</h1>
    <div>
        <input type="text" id="messageInput" placeholder="Enter a message">
        <button onclick="sendMessage()">Send</button>
    </div>
    <div id="messages"></div>

    <script>
        const socket = new WebSocket("ws://localhost:8080/chat");

        // 接收服務器發(fā)送的消息
        socket.onmessage = function(event) {
            const message = event.data;
            const messagesDiv = document.getElementById("messages");
            const newMessage = document.createElement("p");
            newMessage.textContent = message;
            messagesDiv.appendChild(newMessage);
        };

        // 向服務器發(fā)送消息
        function sendMessage() {
            const messageInput = document.getElementById("messageInput");
            const message = messageInput.value;
            socket.send(message);
            messageInput.value = '';  // 清空輸入框
        }
    </script>
</body>
</html>

在這個例子中，我們創(chuàng)建了一個簡單的聊天室應用，前端通過 WebSocket 與后端建立了連接，客戶端輸入消息并通過 WebSocket 發(fā)送給服務器，服務器將其原樣返回。

WebSocket 與 STOMP 協(xié)議集成

雖然 WebSocket 本身支持雙向通信，但它的消息處理方式較為基礎，適合一些簡單的場景。然而，STOMP 協(xié)議為 WebSocket 提供了更加高級的消息處理機制，能夠?qū)崿F(xiàn)消息的廣播、訂閱、隊列處理等。

1. 引入 STOMP 依賴

首先，我們需要在 pom.xml 中引入 spring-boot-starter-websocket 和 spring-messaging 依賴：

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

<dependency>
    <groupId>org.springframework.messaging</groupId>
    <artifactId>spring-messaging</artifactId>
</dependency>

2. WebSocket 配置與 STOMP 協(xié)議啟用

通過 @EnableWebSocketMessageBroker 注解啟用 STOMP 協(xié)議，配置消息代理和 STOMP 端點。

package com.example.websocket.config;

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

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 注冊STOMP端點，客戶端將通過這個端點連接WebSocket
        registry.addEndpoint("/gs-guide-websocket").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        // 配置消息代理
        registry.setApplicationDestinationPrefixes("/app");
        registry.enableSimpleBroker("/topic");
    }
}

解釋：

registerStompEndpoints 方法注冊 STOMP 端點，客戶端將通過該端點連接到 WebSocket 服務。
configureMessageBroker 方法啟用消息代理，/app 是應用消息的前綴，/topic 是消息廣播的主題。

3. WebSocket 控制器

使用 STOMP 協(xié)議時，我們可以通過 @MessageMapping 注解來接收客戶端的消息，使用 @SendTo 注解廣播消息：

package com.example.websocket.controller;

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

@Controller
public class ChatController {

    @MessageMapping("/chat.sendMessage")
    @SendTo("/topic/public")
    public String sendMessage(String message) throws Exception {
        return message;
    }
}

解釋：

@MessageMapping("/chat.sendMessage") 表示當客戶端發(fā)送消息到 /app/chat.sendMessage 時，方法將被觸發(fā)。
@SendTo("/topic/public") 表示將結果發(fā)送到 /topic/public 主題，并廣播給所有訂閱該主題的客戶端。

4. 前端頁面集成 STOMP 協(xié)議

客戶端通過 SockJS 和 Stomp.js 庫與服務器建立 WebSocket 連接，并進行消息交換：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>STOMP WebSocket Chat</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs"></script>
</head>
<body>
    <h1>STOMP WebSocket Chat</h1>
    <div>
        <input type="text" id="messageInput" placeholder="Enter a message">
        <button onclick="sendMessage()">Send</button>
    </div>
    <div id="messages"></div>

    <script>
        const socket = new SockJS("/gs-guide-websocket");
        const stompClient = Stomp.over(socket);

        stompClient.connect({}, function (frame) {
            console.log('Connected: ' + frame);
            stompClient.subscribe('/topic/public', function (messageOutput) {
                const message = messageOutput.body;
                const messagesDiv = document.getElementById("messages");
                const newMessage = document.createElement("p");
                newMessage.textContent = message;
                messagesDiv.appendChild(newMessage);
            });
        });

        function sendMessage() {
            const messageInput = document.getElementById("messageInput");
            const message = messageInput.value;
            stompClient.send("/app/chat.sendMessage", {}, message);
            messageInput.value = '';
        }
    </script>
</body>
</html>

解釋：

SockJS 提供 WebSocket 降級支持，確保客戶端在 WebSocket 不可用時也能連接。
stompClient.send("/app/chat.sendMessage", {}, message) 發(fā)送消息到服務器，服務器將消息廣播到所有訂閱的客戶端。

小結

WebSocket 是一種持久連接協(xié)議，提供了低延遲的雙向通信，適用于實時數(shù)據(jù)傳輸場景。
STOMP 協(xié)議 使 WebSocket 消息的處理更加高效，支持發(fā)布/訂閱模型，適合于構建復雜的實時應用。
使用 Spring Boot，我們能夠輕松配置 WebSocket 和 STOMP，快速實現(xiàn)實時通信功能。

總結

通過本文的學習，我們了解了如何在 Spring Boot 中實現(xiàn) WebSocket 雙向通信，并結合 STOMP 協(xié)議構建一個簡單的實時聊天應用。WebSocket 提供了高效的實時通信機制，而 STOMP 協(xié)議則為 WebSocket 提供了更加靈活的消息推送方式，能夠滿足復雜應用場景的需求。

實時通信是現(xiàn)代Web應用的重要組成部分，WebSocket 和 STOMP 協(xié)議為我們提供了低延遲、可靠的解決方案。通過結合 Spring Boot 的 WebSocket 支持，開發(fā)者可以非常方便地構建實時通信應用。掌握這些技術，可以為你在開發(fā)即時消息系統(tǒng)、在線游戲、物聯(lián)網(wǎng)等應用中提供強有力的支持。

希望本文的深入解析能幫助你更好地理解 WebSocket 和 STOMP 協(xié)議的原理，并能夠在實際項目中應用這些技術！

以上就是利用SpringBoot與WebSocket實現(xiàn)實時雙向通信功能的詳細內(nèi)容，更多關于SpringBoot WebSocket雙向通信的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: