springboot vue集成websocket

在Spring Boot中集成WebSocket可以通过以下步骤实现：

首先，在pom.xml文件中添加WebSocket的依赖：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
登录后复制

创建一个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对象进行连接并处理收到的消息。
登录后复制