SpringBoot集成WebSocket【基於STOMP協議】進行點對點[一對一]和廣播[一對多]實時推送

原文詳細地址，有點對點，還有廣播的推送：https://blog.csdn.net/ouyzc/article/details/79884688

 

下面是自己處理的一些小bug

參考原文demo，結合工作中的項目，發現前端用vue時出現了莫名其妙的bug

 var stompClient = null;   
    //加載完瀏覽器后  調用connect（），打開雙通道  
    $(function(){     
    //打開雙通道  
    connect()  
    })    
    //強制關閉瀏覽器  調用websocket.close（）,進行正常關閉  
    window.onunload = function() {  
        disconnect()  
    }  
    function connect(){  
        var userId=1;  
        var socket = new SockJS('http://127.0.0.1:9091/sbjm-cheng/endpointOyzc'); //連接SockJS的endpoint名稱為"endpointOyzc"  
        stompClient = Stomp.over(socket);//使用STMOP子協議的WebSocket客戶端  
        stompClient.connect({},function(frame){//連接WebSocket服務端           
            console.log('Connected:' + frame);  
            //通過stompClient.subscribe訂閱/topic/getResponse 目標(destination)發送的消息  
            stompClient.subscribe('/user/' + userId + '/queue/getResponse',function(response){  
                var code=JSON.parse(response.body);                                   
                showResponse(code)                    
            });  
        });  
    }  
    //關閉雙通道  
    function disconnect(){  
        if(stompClient != null) {  
            stompClient.disconnect();  
        }  
        console.log("Disconnected");  
    }  
    function showResponse(message){  
        var response = $("#response");  
        response.append("<p>只有userID為"+message.userId+"的人才能收到</p>");  
    }  

這段js跑起來是沒問題的，但是在vue里面跑起來就出現了bug，總是和服務器鏈接不上

vue代碼如下：

 

報錯如下：

 

后來經過各種排查，發現stompClient前少加了個var，這個太坑爹了自己的失誤TTTTT

后來是莫名其妙的空格問題，就是這個

報錯的是連接不穩定，老是連接不上，總是失去和服務器的連接，這個可能是網絡問題，公司的網比較差，太坑

 但是永遠接收不到服務器推送回來的消息

最后是怎么解決的呢？

就是這個莫名其妙的空格問題，把上面圖片上多余的空格去掉就ok了

但是這個問題自己用小demo原生的來跑完全沒問題的

就是用VUE之后接收不到推送回來的消息

后來去掉空格就可以接收到消息了