引自免费微信小程序：皆我百晓生
首先，让我们逐个分析您的代码并找出可能的问题。
-
Vue3 部分：
- 在
onopen事件处理函数中，您尝试打印event.data，但在WebSocket连接打开时，通常不会发送数据。您可以将这段代码移除，或者更改为您期望在连接成功后发送的消息。
- 在
-
Vue3 部分（修复后的代码）：
-
Spring Boot 部分：
- 您的WebSocket服务器配置看起来没有问题，但为了确保与Vue3应用正确连接，确认一下端口和URL是否匹配。同时，建议使用Spring Boot的WebSocket支持来创建WebSocket服务，而不是手动实现WebSocket接口。这将使代码更加简洁且易于维护。
-
Spring Boot 部分（修复后的代码）：
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Component;
@Component
public class WebSocketController {
private static AtomicInteger counter = new AtomicInteger();
@MessageMapping("/ws/webSocket") // 对应前端的URL
@SendTo("/topic/messages") // 前端会订阅这个主题
public String handleMessage(String message) {
int count = counter.incrementAndGet();
return "第" + count + "个用户发送： " + message;
}
}
- 配置Spring Boot应用以启用WebSocket支持：
在您的主配置类上添加
@EnableWebSocketMessageBroker注解，并定义一个简单的消息代理。
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;
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws/webSocket").withSockJS();
}
}
- 最后，在前端的Vue3项目中，您应该使用sockjs-client库来连接到WebSocket服务器。这是对
main.js进行修改的示例：
import { createApp } from 'vue'
import App from './App.vue'
// 引入sockjs-client库
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
createApp(App).mount('#app')
const socket = new SockJS('/spring/ws/webSocket');
const stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
console.log('Connected: ' + frame);
stompClient.subscribe('/topic/messages', function(message) {
console.log(JSON.parse(message.body));
});
});
这样，当您在前端输入文本并点击发送按钮时，消息应该能通过WebSocket传递到Spring Boot服务器，然后广播给所有客户端。同样，当其他客户端发送消息时，前端也会接收到这些消息。注意，上述代码仅作为示例，可能需要根据您的具体需求进行调整。
