vue websocket实时刷新数据(Vue+WebSocket页面实时刷新长连接的实现)
类别:编程学习 浏览量:1487
时间:2021-10-27 10:03:41 vue websocket实时刷新数据
Vue+WebSocket页面实时刷新长连接的实现最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死。。。
与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示,记录一下过程以及碰到的问题;
注意:页面刷新长连接会被关闭,其实进入当前页面建立长连接的目的就是页面不用F5刷新,所有数据自动实时刷新,如果还是来回F5大刷页面那就没有意义了。。。
ps: 如果实在有这个需求的话,网上貌似有实现刷新页面长连接不断的方法,请自行百度。。。。
<template> <li> </li> </template> <script> export default { data() { return { websock: null, } }, created(){ //页面刚进入时开启长连接 this.initWebSocket() }, destroyed: function() { //页面销毁时关闭长连接 this.websocketclose(); }, methods: { initWebSocket(){ //初始化weosocket const wsuri = process.env.WS_API + "/websocket/threadsocket";//ws地址 this.websock = new WebSocket(wsuri); this.websocket.onopen = this.websocketonopen; this.websocket.onerror = this.websocketonerror; this.websock.onmessage = this.websocketonmessage; this.websock.onclose = this.websocketclose; }, websocketonopen() { console.log("WebSocket连接成功"); }, websocketonerror(e) { //错误 console.log("WebSocket连接发生错误"); }, websocketonmessage(e){ //数据接收 const redata = JSON.parse(e.data); //注意:长连接我们是后台直接1秒推送一条数据, //但是点击某个列表时,会发送给后台一个标识,后台根据此标识返回相对应的数据, //这个时候数据就只能从一个出口出,所以让后台加了一个键,例如键为1时,是每隔1秒推送的数据,为2时是发送标识后再推送的数据,以作区分 console.log(redata.value); }, websocketsend(agentData){//数据发送 this.websock.send(agentData); }, websocketclose(e){ //关闭 console.log("connection closed (" + e.code + ")"); }, }, } </script>
到此这篇关于Vue+WebSocket页面实时刷新长连接的实现的文章就介绍到这了,更多相关Vue+WebSocket实时刷新长连接内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue-cli请求数据的方式(vue-cli配置使用Vuex的全过程记录)
- vuex数据持续化(Vuex数据持久化实现的思路与代码)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- vue全局配置文件env(vue项目多环境配置.env的实现)
- springboot+vue项目演示(springboot+VUE实现登录注册)
- vue三种判断条件(Vue中插槽和过滤器的深入讲解)
- vue购物车简单项目(vue实现简单购物车案例)
- google 调试vue(Vue实现Google第三方登录的示例代码)
- vuekeep-alive源码(vue中keepAlive组件的作用和使用方法详解)
- vue接口请求类封装(Vue接口封装的完整步骤记录)
- vue本地图片切换(vue动态加载本地图片的处理方法)
- vue多个对象实现双向数据绑定(利用js实现Vue2.0中数据的双向绑定功能)
- vue怎么操作表格(如何在在Vue3中使用markdown 编辑器组件)
- vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)
- vue实现商品详情讲解(京东 Vue3 组件库支持小程序开发的详细流程)
- vue实现添加购物车小球(Vue实现简易购物车案例)
- 你还没有升职吗 他竟因为几套激励理论,升职了(你还没有升职吗)
- 某知名企业绩效管理体系及薪酬分配体系操作手册(某知名企业绩效管理体系及薪酬分配体系操作手册)
- 职场人改不掉这4个习惯,只会越混越穷,一辈子也翻不了身(职场人改不掉这4个习惯)
- 华为 联想等46家公司笔试面试题,涉及各行各业,建议收藏(联想等46家公司笔试面试题)
- ()
- ()
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9