首先展示配置:
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    private static long HEART_BEAT = 20000;
    @Autowired
    private HandshakeInterceptor handshakeInterceptor;
    @Override
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
        stompEndpointRegistry.addEndpoint("/ws").addInterceptors(handshakeInterceptor).setAllowedOrigins("*").withSockJS();
    }
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
  
        ThreadPoolTaskScheduler te = new ThreadPoolTaskScheduler();
        te.setPoolSize(10);
        te.setThreadNamePrefix("wss-heartbeat-thread-");
        te.initialize();
        registry.enableSimpleBroker("/deviceInfo","/patientInfo","/dashboard","/deviceExceptionStatus","/topic/messages").
                setHeartbeatValue(new long[]{HEART_BEAT,HEART_BEAT}).setTaskScheduler(te);;
        registry.setApplicationDestinationPrefixes("/ws");
    }}
HandshakeInterceptor中只进行了连接前后的日志输出。
然后通过调试工具访问ws://localhost:8801/ws显示连接失败:
访问ws://localhost:8801/ws/websocket显示连接成功:

为什么配置里设置的端点是/ws但是却访问不了呢。查了一下应该是使用了.withSockJS()的原因,使用时会为不支持WebSocket的浏览器添加回退选项(但是我用edge访问/ws也失败了,不太懂),其中一个回退选项就是 /websocket,由于不太懂前端Socket.IO也不知道加不加.withSockJS()有什么影响,所以这里直接删掉,然后访问ws://localhost:8801/ws成功。
 


接着又问了一下AI,删掉.withSockJS()会让前端只能使用原生的websocket,现在把.withSockJS()加回来,然后在浏览器控制台粘贴以下代码并发送:

// 引入SockJS和Stomp.js库
var script1 = document.createElement('script');
script1.src = 'https://cdn.jsdelivr.net/npm/sockjs-client/dist/sockjs.min.js';
document.head.appendChild(script1);

var script2 = document.createElement('script');
script2.src = 'https://cdn.jsdelivr.net/npm/stompjs/lib/stomp.min.js';
document.head.appendChild(script2);

// 等待脚本加载完成后执行WebSocket连接代码
script2.onload = function() {
    // 创建WebSocket连接
    var socket = new SockJS('http://localhost:8801/ws');
    var stompClient = Stomp.over(socket);

    // 连接成功后的回调函数
    stompClient.connect({}, function (frame) {
        console.log('Connected: ' + frame);

        // 发送消息到 /ws/session
        stompClient.send("/ws/session", {}, JSON.stringify({'content': 'Test message for session'}));

        // 发送消息到 /hello
        stompClient.send("/ws/hello", {}, JSON.stringify({'content': 'World'}));
    });
};

/ws/session和/ws/hello是我controller中的方法。上述内容发送后显示连接成功。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐