Spring Boot+WebSocket向前端推送消息_spring boot 集成websocket给前端发送事件-CSDN博客

WebSocket是服务器和客户端之间进行实时通信的理想选择。它们允许您在浏览器和服务器之间建立双向交互通信会话。在本文中，我们将探索如何在Spring Boot应用程序中使用WebSocket向前端推送消息。

什么是WebSocket?

WebSocket通过单个TCP连接提供全双工通信通道。这对于需要服务器持续更新的应用程序非常有用，例如实时推送、通知或聊天应用程序。

设置Spring Boot应用程序

首先，我们需要设置一个SpringBoot应用程序。如果您还没有SpringBoot项目，可以使用Spring Initializr或您喜欢的IDE创建一个。

添加依赖

在项目的pom.xml文件中添加以下依赖：

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

配置WebSocket

接下来，我们需要配置WebSocket。创建一个配置类，启用WebSocket功能并定义端点。

WebSocket配置类

import org.springframework.context.annotation.Configuration;
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) {
        registry.addHandler(new MyWebSocketHandler(), "/ws").setAllowedOrigins("*");
    }
}

创建WebSocket端点

创建一个处理WebSocket连接和消息的处理器类。

WebSocket处理器

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

public class MyWebSocketHandler extends TextWebSocketHandler {

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("连接已建立");
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        System.out.println("收到消息：" + message.getPayload());
        session.sendMessage(new TextMessage("服务端回复：" + message.getPayload()));
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("连接已关闭");
    }
}

向客户端发送消息

在实际应用中，服务器可能需要主动向客户端推送消息。我们可以在处理器类中保存所有的WebSocketSession，并通过这些Session发送消息。

import java.util.Collections;
import java.util.HashSet;
import java.util.Set;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.WebSocketSession;

@Component
public class WebSocketSessionManager {

    private final Set<WebSocketSession> sessions = Collections.synchronizedSet(new HashSet<>());

    public void addSession(WebSocketSession session) {
        sessions.add(session);
    }

    public void removeSession(WebSocketSession session) {
        sessions.remove(session);
    }

    public void broadcast(String message) {
        for (WebSocketSession session : sessions) {
            if (session.isOpen()) {
                try {
                    session.sendMessage(new TextMessage(message));
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

前端集成

最后，我们需要在前端集成WebSocket。以下是一个简单的HTML和JavaScript示例：

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket示例</title>
</head>
<body>
    <h1>WebSocket连接</h1>
    <button onclick="connect()">连接</button>
    <button onclick="disconnect()">断开</button>
    <button onclick="sendMessage()">发送消息</button>
    <script>
        var ws;

        function connect() {
            ws = new WebSocket('ws://localhost:8080/ws');
            ws.onmessage = function(event) {
                alert('收到消息: ' + event.data);
            };
            ws.onopen = function() {
                alert('连接已建立');
            };
            ws.onclose = function() {
                alert('连接已关闭');
            };
        }

        function disconnect() {
            if (ws != null) {
                ws.close();
            }
        }

        function sendMessage() {
            if (ws != null && ws.readyState === WebSocket.OPEN) {
                ws.send('Hello, WebSocket!');
            }
        }
</script>
</body>
</html>