5，vue利用websocket，显示数据的实时改变

2023-04-30 15:11| 来源: 网络整理| 查看: 265

实现效果：

在线测试的系统（用户名：liu，密码：12345）

###默认显示：在这里插入图片描述

我们可以看到数据8弹窗的数值为8，现在我们在数据管理里将是这个值改为88，在这里插入图片描述过几秒（现在时间间隔为5秒），并没有刷新页面，发现显示的值已经变为88了。值改变后：

这一过程中，我们用到了用来发送数据的websocket（由客户端建立连接，服务器可以主动向客户端推送数据，只需要一次http请求），vuex和vue的watch监听属性，以及改变显示的DOM操作。

准备工作： 1，使用websocketd客户端来进行websocket连接。

（如果要使用我的在线后台api，请跳过此步，因为已经连好了）官网下载地址百度云盘地址提取码：eptj 作用：运行这个客户端，使得每隔一段时间这个客户端从数据库获取数据，并发送到指定端口上。怎么用：以百度云盘上的文件为例（就是我用的）在这里插入图片描述 cmd到当前目录下，运行命令websocketd --port=8088 python cout.py 这句命令的作用：执行pthon文件cout.py（我是用python写的获取数据代码，当然用其它的语言也可以,如果你要试用我的这个示例，那么需要安装python和pip，并通过pip安装pymysql包引入到python中），并发送到8088端口地址上（其实就是http://127.0.0.1:8088）。下面打开cout.py文件看一下里面执行了什么：

import random from sys import stdout from time import sleep from itertools import count import pymysql db=pymysql.connect(host='localhost',user='xxx',passwd='xxx',db='xxx',port=3306,charset='utf8') for i in count(): # 使用cursor()方法创建cursor游标对象 cursor=db.cursor() sql="""select Id,Num from data """ data={} try: # 执行SQL语句 cursor.execute(sql) # 提交到数据库执行 db.commit() # 获取符合条件的所有数据 results = cursor.fetchall() for item in results: data[item[0]]=str(item[1]) #random.randint(0,9)) # 将数据类型从字典转为bytes类型的字典（不这样websocket会报“Could not decode a text frame as UTF-8”的错误） print(bytes('{}'.format(data),'utf-8')) stdout.flush() except Exception as e: # 发生错误时回滚 db.rollback() print(e) sleep(5)

代码很简单，就是从数据库获取数据，每隔5秒运行一次。（如果要用这个，用到的python库要安好）如果运行成功会这样：在这里插入图片描述每隔一秒，执行一次代码，从数据库获取数据。

2，显示默认的弹窗：

数据我们通过vuex（关于vuex前面有说明）来保存传递。在store.js中，state里添加iotData: {}, mutataion里添加：

//iotData setIOTData (state, data) { state.iotData = data }, updateIOTTagConfig (state, data) { //将字符串分割为数组 data = data.replace(/'/g, "") var array = data.slice(2, -4).split(",") var DATA = [] array.forEach((item) => { item = item.split(":") DATA.push({ Id: item[0], Num: parseFloat(item[1]) }) }) state.iotData = DATA },

actions里添加：

updateIOTTagConfig ({ commit, state }, data) { //let newData = Object.assign({}, state.iotData) commit('updateIOTTagConfig', data) },

其中：iotData: {},表示默认的初始状态。setIOTData 表示第一次请求时为iotData赋值。actions里的updateIOTTagConfig表示执行 commit('updateIOTTagConfig', data)，这句代码的作用是调用mutation里的updateIOTTagConfig方法， mutation里的updateIOTTagConfig方法表示更新iotData的值。在Home.vue里，使用setIOTData为iotData赋值，

...mapMutations(['setIOTData']), iot_data_get () { getData().then((res) => { this.setIOTData(res.data.response.AllData); }); },

此时iotData就不是空的了。这个数据在Map.vue中使用：

computed: { ...mapState(['iotData']), }, var name = this.iotData[j].Name; //this.dataList_rlt[i].Name this.iotData[j].Note = (this.iotData[j].Note != null) ? this.iotData[j].Note : "--" var html2 = ""; html2 = '' + '' + '' + '' + '' + name + '' + '' + ' ' + ' ' + "数值：" + this.iotData[j].Num + '' + '' + ' ' + ' ' + "备注：" + this.iotData[j].Note + '' + '' + '' ;

此时弹窗可以显示数据了，但我们改变数据库数据时，并不发生改变。

正式工作： 1，util文件夹中新建websoket.js文件： let glSocket = null; import store from "../src/store" export const localSocket = () => { if ("WebSocket" in window) { // console.log("您的浏览器支持 WebSocket!"); // location.host if (!glSocket) { //如果要使用我的后台那下面的地址应改为: // glSocket = new WebSocket("ws://112.125.90.247:8088/"); glSocket = new WebSocket("ws://127.0.0.1:8088"); glSocket.binaryType = 'arraybuffer'; glSocket.onopen = () => { console.log('websocket连接成功'); }; glSocket.onclose = () => { // 关闭 websocket console.log("连接已关闭..."); //断线重新连接 setTimeout(() => { localSocket(); }, 2000); }; glSocket.onmessage = (msg) => { let d = JSON.stringify(msg.data); store.dispatch("updateIOTTagConfig", d); }; } } else { // 浏览器不支持 WebSocket self.$notify.error({ title: '错误', message: '您的浏览器不支持websocket，请更换其它浏览器再尝试' }); } } export default glSocket;

这里需要注意的是两部分： ①glSocket = new WebSocket("ws://127.0.0.1:8088");这里面的地址就是准备工作里的http://127.0.0.1:8088 ②

glSocket.onmessage = (msg) => { let d = JSON.stringify(msg.data); store.dispatch("updateIOTTagConfig", d); };

glSocket.onmessage表示当收到来自服务器的消息时被调用的，这个服务器就是我们的websocketd客户端。因为websocketd客户端每隔1秒运行一次代码，相当于glSocket.onmessage也每隔1秒执行一次，里面的代码很明显store.dispatch("updateIOTTagConfig", d);，也就是执行actions里的updateIOTTagConfig方法。

2，连接websocket。其实就是执行localSocket方法，执行一次就够了，在前面Home.vue获取数据时执行就行，也就是： ...mapMutations(['setIOTData']), iot_data_get () { getData().then((res) => { this.setIOTData(res.data.response.AllData); localSocket(); }); },

当然，这个方法localSocket是要引入的：

import { localSocket } from '../../util/websoket'; 3，改变显示

回到Map.vue，这里我们要用到的是watch属性。

//监听属性：监听变量值发生变化执行相应函数) watch: { iotData: { handler (newval, oldval) { let result = [] if (!oldval.length) result = newval else { result = newval.filter(item => { let obj = oldval.find(a => a.Id == item.Id && a.Num != item.Num) // if(obj){ // obj.Num=isNaN(obj.Num)?0:obj.Num // } return obj }) } result.map(item => { let labelid = item.Id && item.Id.trim() if (labelid) { let label = document.getElementById('mapWindow_' + labelid) let span = label ? label.getElementsByTagName("span")[0] : null span && (span.innerHTML = "数值：" + item.Num) } }) }, deep: true } },

监听iotData，当iotData有Num值变化时，通过操作dom改变显示

【本文地址】

公司简介

联系我们