springboot+vue+websocket实现实时聊天

实现在Spring Boot和Vue中使用WebSocket来实现实时聊天的过程如下：

1. 后端使用Spring Boot，首先需要在pom.xml文件中添加依赖项以支持WebSocket和Spring Boot的WebSocket集成。例如：

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

2. 创建一个WebSocket配置类，用于配置WebSocket处理程序和端点。例如：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new ChatHandler(), "/chat").setAllowedOrigins("*");
    }
}

3. 创建WebSocket处理程序，用于处理WebSocket连接、消息发送和接收。例如：

@Component
public class ChatHandler 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 currentSession : sessions) {
            currentSession.sendMessage(new TextMessage(payload));
        }
    }
    
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        sessions.remove(session);
    }
}

4. 在Vue中使用`vue-native-websocket`或`vue-socket.io`等库来创建WebSocket连接并处理消息。例如：

import VueNativeSock from 'vue-native-websocket'

Vue.use(VueNativeSock, 'ws://localhost:8080/chat', {
  format: 'json',
  reconnection: true,
  store: VuexStore // 如果需要将消息存储到Vuex中，可以提供一个Vuex store
})

5. 在Vue组件中使用WebSocket连接，发送和接收消息。例如：

this.$socket.send('Hello') // 发送消息

this.$socket.onMessage((message) => {
  console.log(message) // 收到消息
})

通过上述步骤，就可以在Spring Boot和Vue中使用WebSocket来实现实时聊天功能。当用户在Vue组件中发送消息时，消息将通过WebSocket连接发送到后端的Spring Boot应用程序，然后由WebSocket处理程序将消息广播给所有连接的客户端。