springboot vue集成websocket

在Spring Boot中集成WebSocket可以通过以下步骤实现：
1. 首先，在pom.xml文件中添加WebSocket的依赖：

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

2. 创建一个WebSocketConfig类，用于配置WebSocket相关的参数和处理器：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new WebSocketHandler(), "/websocket"); // 指定WebSocket处理器和连接的路径
    }
}

3. 创建一个WebSocketHandler类，实现WebSocketHandler接口：

@Component
public class WebSocketHandler extends TextWebSocketHandler {

    private static final List<WebSocketSession> sessions = new CopyOnWriteArrayList<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        sessions.add(session);
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 处理收到的文本消息
        String payload = message.getPayload();
        // 发送消息给所有连接的客户端
        for (WebSocketSession webSocketSession : sessions) {
            webSocketSession.sendMessage(new TextMessage(payload));
        }
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        sessions.remove(session);
    }
}

4. 在Vue中使用WebSocket连接服务器：

new Vue({
    created() {
        this.socket = new WebSocket('ws://localhost:8080/websocket');
        this.socket.onmessage = this.handleMessage;
    },
    methods: {
        handleMessage(event) {
            // 收到消息后的处理逻辑
        }
    }
})

以上是Spring Boot和Vue集成WebSocket的基本步骤。通过配置WebSocketConfig类和创建WebSocketHandler类实现服务器端的消息处理和推送，然后在Vue中创建WebSocket对象进行连接并处理收到的消息。