實時獲取列表的每條數據的狀態,每次請求接口顯然浪費資源,所以采用了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();
}