前端WebSocket+SockJS+Stomp實現數據實時刷新

實時獲取列表的每條數據的狀態,每次請求接口顯然浪費資源,所以采用了WebSocket+SockJS+Stomp來實現數據實時刷新。

直接上例子
html引入

 <script src="http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.min.js"></script>  
 <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>  
 <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

js

//連接
$scope.connectImportLogs  = function() {
  var socket = new SockJS(WEBSOCKET_URL);   //websocket_url
  stompClient = Stomp.over(socket);
  stompClient.connect({}, function(frame) {
    stompClient.subscribe('/message/queue/notice', function(message){ //接口
      var importLogs = JSON.parse(message.body);  //獲得的數據
    });
  });
 }
//發送
stompClient.send("/app/get_server", {},JSON.stringify({"session_id":sessionId}));
//

2.重連
在使用websocket過程中,可能會出現網絡斷開的情況,比如信號不好,或者網絡臨時性關閉,這時候websocket的連接已經斷開,而瀏覽器不會執行websocket 的 onclose方法,我們無法知道是否斷開連接,也就無法進行重連操作。

如果希望websocket連接一直保持,一般在close或者error上綁定重新連接方法。

stompClient.ws.onclose = function () {
     connect();
}
stompClient.ws.onerror = function () {
     connect();
}
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容