美文网首页
前端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实现数据实时刷新

    实时获取列表的每条数据的状态,每次请求接口显然浪费资源,所以采用了WebSocket+SockJS+Stomp来实...

  • 2019-10-16

    [Vue+WebSocket 实现页面实时刷新长连接] *最近vue项目要做数据实时刷新,折线图每秒重画一次,数据...

  • 金融软件价格刷新的一种实现方式

    实现思路 新价格跟老价格对比,定义三个状态--上涨/不变/下跌。 数据刷新使用websocket长连接进行实时刷新...

  • WebSocket 实现数据实时刷新

    WebSocket 是HTML5的一个新协议,WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允...

  • 异步获取数据库插入数据到前端

    目标 现有页面的数据需要刷新网页才能获取到,需要实现自动显示数据到前端。 思路 由于是 ThinkPHP 框架,需...

  • 仿微信步数demo记录

    这次的作业主要通过quartz框架来实现一个步数排行耪的效果,需要实现到时间后刷新数据,并实时显示,更改数据库。这...

  • django实战商城项目注册业务实现

    设计到的前端知识 项目的前端页面使用vue来实现局部刷新,通过数据的双向绑定实现与用户的交互,下面来看一下需求,在...

  • websocket小记

    websocket可以实现消息的实时推送,应用较为广泛,在工作中可以结合大数据数据的推送,后台接收并推送到前端展示...

  • WebSocket Session共享

    最近在做消息中心模块,想要实现消息实时推送到前端页面展示,直接摒弃了前端定时轮训调用接口来获取消息数据的方式,采用...

  • vue 局部数据刷新 setInterval/setTimeou

    在页面使用定时器实现局部刷新setInterval 在代码中console会发现数据实时更新,但是dom却没有变化...

网友评论

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

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