Vue+WebSocket页面实时刷新长连接的实现

最近vue项目要做数据实时刷新，折线图每秒重画一次，数据每0.5秒刷新一次，说白了就是实时刷新，因为数据量较大，用定时器估计页面停留一会就会卡死。。。

与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示，记录一下过程以及碰到的问题；

注意：页面刷新长连接会被关闭，其实进入当前页面建立长连接的目的就是页面不用F5刷新，所有数据自动实时刷新，如果还是来回F5大刷页面那就没有意义了。。。

ps:　如果实在有这个需求的话，网上貌似有实现刷新页面长连接不断的方法，请自行百度。。。。

<template>
    <div>
    </div>
</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实时刷新长连接内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue 实现websocket发送消息并实时接收消息

    公司做了个数字货币行情的H5,需要用到websocket,刚好自己也不会,可以学习一下,美滋滋. 项目结合vue脚手架和websocket来搭建,主要遇到了两个问题,一个是:断开重连机制要如何处理:另外一个是:如何在页面上随时的发送消息并实时接收返回的数据,断开重连后又如何重新发送消息,接收消息 一.断开重连机制处理 (详细参考这里) 写一个重连的方法(重连方法中必须加一把锁,重连方法执行过程中不再执行重连动作,避免重复连接),然后在websocket的onclose和error中绑定重连方法,

  • vue使用webSocket更新实时天气的方法

    vue使用webSocket更新实时天气的方法

    目录 前言 关于 webSocket 的操作及示例: webSocket 1.关于 webSocket 2.与 AJAX 轮的区别 3.webSocket 事件 4. 一个简单的示例 天气更新 图片素材 重连机制 前言 在 vue 中使用 webSocket 做一个简单的天气实时更新模块. 关于 webSocket 的操作及示例: 1.webSocket 连接 2.接收数据 3.重连机制 webSocket 1.关于 webSocket webSocket 是 HTML5 开始提供的一种在单个

  • websocket+Vuex实现一个实时聊天软件

    websocket+Vuex实现一个实时聊天软件

    目录 前言 一.效果如图 二.具体实现步骤 1.引入Vuex 2.webscoked实现 总结 前言 这篇文章主要利用websocked 建立长连接,利用Vuex全局通信的特性,以及watch,computed函数监听消息变化,并驱动页面变化实现实时聊天. 一.效果如图 二.具体实现步骤 1.引入Vuex 代码如下(示例): //安装vuex npm install vuex //main.js 中引入 import store from './store' new Vue({ el: '#ap

  • 浅谈vue websocket nodeJS 进行实时通信踩到的坑

    先说明,我并不知道出现坑的原因是什么.我只是按照别人的写法就连上了. 我的处境是这样的 我的前台是用了 vue 全家桶,启动了一个 9527 端口. 而我的后台是用 nodeJS,启动了 8081 端口. 很明显,这种情况就出现了头疼的跨域. 贴出我的代码,如下 server.js(后台) var app = express(); var server = require('http').createServer(app); var io = require('socket.io')(serve

  • Vue+WebSocket页面实时刷新长连接的实现

    最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示,记录一下过程以及碰到的问题: 注意:页面刷新长连接会被关闭,其实进入当前页面建立长连接的目的就是页面不用F5刷新,所有数据自动实时刷新,如果还是来回F5大刷页面那就没有意义了... ps: 如果实在有这个需求的话,网上貌似有实现刷新页面长连接不断的方法,请自行百度....

  • 详解Javascript 基于长连接的服务框架问题

    目录 背景 Webscoket 封装 FakeHttpServer Context Middleware 请求处理 Quick Start 小结 背景 经常使用 Node 进行服务端开发的同学,想必都知道 Koa 框架.Koa 是一种 http 服务框架,其基于洋葱模型作为基本架构,能够让用户方便快捷地添加中间件,进行业务开发.而 websocket 是一种长连接的服务通信协议,需要自定义通讯 api 进行数据通讯.一般情况下,基于 websocket 的通讯 api 也是遵循一问一答的交互模式

  • Vue通过WebSocket建立长连接的实现代码

    使用场景: 在项目开发中,后端需要处理一连串的逻辑,或者等待第三方的数据返回来进行处理之后在返回给前端,可能时间会很长,而且前端也不知道后端什么时候能处理好(时间长的话会达到10分钟左右),如果采用普通的HTTP连接,前后端无法一直保持联系,麻烦的时候可能还需要采用轮询的机制,所以使用WebSocket连接效果还是比较好的. 使用时间: 在界面加载完之后,建上WebSocket连接,此时前端还可以发送普通的HTTP的请求,等到后端处理完之后,通过建立的WebSocket连接返给前端,前端根据返回

  • SpringBoot集成WebSocket长连接实际应用详解

    前言: 一.WebSocket之初出茅驴 官方定义:WebSocket是一种在单个TCP连接上进行全双工通信的协议.WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输.是真正的双向平等对话,属于服务器推送技术的一种. 太官方啦,还是博主过来翻译一下吧 :WebSocket技术只需要service和client建立一次连接,就能实现服

  • VUE简单的定时器实时刷新的实现方法

    说明:我只是一个刚入门的小前端,你们可以指导我,但千万不要喷我,虽然我知道我很垃圾!人吗,都是要成长的!大佬,请多多指教!!! 我前段时间刚刚写了一个类似余股票的项目,上边的K线图是要实时去刷新的,所以要用vue做一个心跳,当然大家也可以选择用websocket,大佬们感觉肯定很简单,但是我只是一个刚入门的小前端,特此记录一下. 思路 其实思路很简单,首先要了解vue的生命周期和vue的内置函数,其思路就是先定义一个定时器,然后去定时请求后台,到最后关闭这个定时器,哈哈,是不是都是废话,但是确实

  • 基于Vue实现tab栏切换内容不断实时刷新数据功能

    基于Vue实现tab栏切换内容不断实时刷新数据功能

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好 也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来 先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l

  • java与微信小程序实现websocket长连接

    java与微信小程序实现websocket长连接

    本文实例为大家分享了java与微信小程序实现websocket长连接的具体代码,供大家参考,具体内容如下 背景: 需要在小程序实现地图固定坐标下实时查看消息 java环境 :tomcat7 jdk1.7 1.java websocket 类 package com.qs.util; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.

  • Vue 中获取当前时间并实时刷新的实现代码

    1. 实现代码 <template> <div> {{nowDate}}{{nowWeek}}{{nowTime}} </div> </template> <script> export default { data(){ return { nowDate: "", // 当前日期 nowTime: "", // 当前时间 nowWeek: "" // 当前星期 } }, methods

  • Java中Spring Boot+Socket实现与html页面的长连接实例详解

    Spring Boot+Socket实现与html页面的长连接,客户端给服务器端发消息,服务器给客户端轮询发送消息,附案例源码 功能介绍 客户端给所有在线用户发送消息客户端给指定在线用户发送消息服务器给客户端发送消息(轮询方式) 注意:socket只是实现一些简单的功能,具体的还需根据自身情况,代码稍微改造下 项目搭建 项目结构图 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xml

随机推荐