美文网首页
前端WebSocket+SockJS+Stomp实现数据实时刷新

前端WebSocket+SockJS+Stomp实现数据实时刷新

作者: EricaRui | 来源:发表于2018-06-22 16:59 被阅读0次

    实时获取列表的每条数据的状态,每次请求接口显然浪费资源,所以采用了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();
    }
    

    相关文章

      网友评论

          本文标题:前端WebSocket+SockJS+Stomp实现数据实时刷新

          本文链接:https://www.haomeiwen.com/subject/uutueftx.html