vue3+websockt实现更新列表

最新推荐文章于 2024-05-18 00:33:12 发布

木不是

最新推荐文章于 2024-05-18 00:33:12 发布

阅读量216

点赞数

文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_48056485/article/details/129673981

版权

创建websocket.js文件

import { ElMessage } from 'element-plus'
let socket
let data
function initWebSocket(e,webSocketOnMessage) {
    if (typeof WebSocket === "undefined")
    return console.log("您的浏览器不支持websocket");
    console.log(e)
    data = e
    let protocol = "ws";
    let wsUri = "";
    if (window.location.protocol == "https:") {
        protocol = "wss";
    }
    wsUri = `${protocol}://XXXXXX/ws/device`;
    socket = new WebSocket(wsUri)//这里面的this都指向vue
    socket.onerror = webSocketOnError;
    socket.onmessage = webSocketOnMessage;
    socket.onopen = webSocketSend;
    socket.onclose = closeWebsocket;
}
function webSocketOnError(e) {
    ElMessage.error("WebSocket连接发生错误" + e)
}

// 关闭websiocket
function closeWebsocket() {
    console.log('连接已关闭...')
}
function close() {
    socket.close() // 关闭 websocket
    socket.onclose = function (e) {
        console.log(e)//监听关闭事件
        console.log('关闭')
    }
}
function webSocketSend() {
    console.log(data)
    socket.send(JSON.stringify(data));
}
export default {
    initWebSocket, close
}

在main.js全局引用

import websocket from '@/utils/websocket.js'
app.config.globalProperties.websocket = websocket

在所需要使用的vue页面进行使用

websocket.initWebSocket({health:ids},webSocketOnMessage)

function webSocketOnMessage(e) {
    let data = JSON.parse(e.data);
    // console.log(data)
    deviceList.value = deviceList.value.map(item=>{
      const tmp = data.filter(d=>d.id==item.id)
      if(tmp.length){
        return {
          ...item,
          status:tmp[0].status
        }
      }
      return item;
    })
}