Vue3 webSocket收到消息改变响应式全局对象从而实时改变界面

需求在 main.js 中 创建一个 响应式全局对象 。通过WebSocket收到消息 改变这个全局对象时 ，子组件应同步响应。

效果：这几个标签框 绑定的全局对象json

 

main.js

定义 响应式全局对象

//全局对象
const globalData=reactive({
    extTelMonitorData: [
    {
        title: '用户组一',
            list: [
                {
                    groupID: "0",
                    groupName: "All Users",
                    userDomain: "equiinet.cn",
                    userExten: "1000",
                    userID: "1",
                    userName: "刘亦菲",
                    isRegister: false,
                    callStatus:""
                },
                {
                    groupID: "0",
                    groupName: "All Users",
                    userDomain: "equiinet.cn",
                    userExten: "1001",
                    userID: "2",
                    userName: "娜然",
                    isRegister: false,
                    callStatus:""
                },
                {
                    groupID: "0",
                    groupName: "All Users",
                    userDomain: "equiinet.cn",
                    userExten: "1002",
                    userID: "3",
                    userName: "佟丽娅",
                    isRegister: false,
                    callStatus:""
                },
                {
                    groupID: "0",
                    groupName: "All Users",
                    userDomain: "equiinet.cn",
                    userExten: "1003",
                    userID: "3",
                    userName: "迪丽热巴",
                    isRegister: false,
                    callStatus:""
                }
                ]
            },
            {
                title: '用户组二',
                list: [
                {
                    userName: '张三',
                    number: 1003,
                    isRegister: false 
                },
                {
                    userName: '王一',
                    number: 1005,
                    isRegister: false 
                } 
            ]
            },
            {
                title: '用户组三',
                list: [
                {
                    userName: '刘中',
                    number: 1006,
                    isRegister: false 
                },
                {
                    userName: '李毅',
                    number: 1007,
                    isRegister: false 
                } 
                ]
            },
            {
                title: '全部分机',
                list: [
                {
                    userName: '李安',
                    number: 1008,
                    isRegister: false 
                },
                {
                    userName: '李毅',
                    number: 1009,
                    isRegister: false 
                    }
                ]
            }
    ] 
    ,
    var2: 'value2'
})
app.provide('globalData', globalData);

main.js 中 webSocket函数部分

import { createApp } from 'vue'
import { reactive } from 'vue'

import App from './App.vue'
import axios from 'axios'

let websock=null;
 
//createApp(App).mount('#app')
const app = createApp(App);

//------------------------weosocket------------------
function initWebSocket(){  

  const wsuri = "ws://192.168.1.120:5011/chat/";
  console.log("打开一个websocket " +wsuri); 

  websock = new WebSocket(wsuri);
  websock.onmessage =  websocketonmessage;
  websock.onopen =  websocketonopen;
  websock.onerror =  websocketonerror;
  websock.onclose =  websocketclose;
} 
function websocketonopen(){ //连接建立之后执行send方法发送数据
  //let actions = {"test":"12345"};
  //this.websocketsend(JSON.stringify(actions));
  let strMsg="@&l_login:1001,1001,1001";
  websocketsend(strMsg);
  console.log("连接建立成功 发 " +strMsg); 
} 
function websocketonerror(){//连接建立失败重连
  initWebSocket();
} 
function websocketonmessage(e){ //数据接收
  //const redata = JSON.parse(e.data);
  console.log("数据接收 " +e.data); 
  //接收
  websocket_resMsg(e.data);
} 
function websocketsend(Data){//数据发送
  websock.send(Data);
} 
function websocketclose(e){  //关闭
  console.log('断开连接',e);
} 
//-------------------------------------------------------

初始化

//初始化
async function init() {
   
  initWebSocket();
  app.config.globalProperties.$websock = websock;

}

//执行初始化
app.use(init);

app.mount('#app');

处理收到websocket消息

//分析websocket收到的消息
function websocket_resMsg(msg){
  let length = msg.length;  
  if(length>12){
    var msgType= msg.substr(0, 12);
    //分机状态 
    if(msgType=="ExtTelStatus"){
      var msgExtTelStatus= msg.substr(12);
        //globalData.extTelMonitorData=JSON.parse(msgExtTelStatus);
       //将字符串转为json对象  赋全局对象
       globalData.extTelMonitorData=eval('('+msgExtTelStatus+')');
         console.log('收到分机状态 '+ msgExtTelStatus);
　　　　
    }
  }
}

子组件 ExtTelStatusComponent

<template>
<div class="IndConB flex" id="divExtTelStatus1"> 
    <el-row :gutter="74"  v-for="(dataItem, index) in globalData.extTelMonitorData[0].list" :key="index">
        <el-col :span="8">  
            <div style="width:190px;">
            <a href="javascript:;" class="IndCona"  >
                <div class="IndConaH flexC Huans" style="width:95%;"><img src="../assets/images/pic/phone01.png">
                    <p  >   {{dataItem.userExten}}</p></div>
                <div class="IndConaP" style="width:95%;">
                    <div class="IndConaPz Huans">名称: {{dataItem.userName}}</div>
                    <div class="IndConaPz Huans">状态: {{dataItem.callStatus}}</div>
                </div>
                <div class="IndConaF flexC fl-cen" style="width:95%;"><img src="../assets/images/pic/tanhao.png">
                    <p>{{dataItem.isRegister}}</p></div>
                
                <div class="IndConaD Huans">
                    <p>名称 : 调度电话</p>
                    <p>号码 : {{dataItem.userExten}}</p>
                    <p>状态 : {{dataItem.isRegister}}</p>
                    <p>分区 : {{dataItem.groupID}}</p>
                    <p>终端 : {{dataItem.userDomain}}</p>
                </div>
            </a>
            </div>
        </el-col>
         
    </el-row> 
    <a href="javascript:;" class="IndConFa flexC fl-cen" v-on:click="foot_calltel()"><p>测试一下</p></a>
</div>
</template>

<script>
// 在子组件中注入全局对象
import { inject, watch } from 'vue'

export default {
  // 组件名称
    name: 'ExtTelStatusComponent',
    data() {
        return {
 　　　　　　
　　　　　　　　extensionMonitorDataA: [
　　　　　　　　{
　　　　　　　　　　title: '用户组一',
　　　　　　　　　　list: [
　　　　　　　　　　{
　　　　　　　　　　　　groupID: "0",
　　　　　　　　　　　　groupName: "All Users",
　　　　　　　　　　　　userDomain: "equiinet.cn",
　　　　　　　　　　　　userExten: "1000",
　　　　　　　　　　　　userID: "1",
　　　　　　　　　　　　userName: "11111",
　　　　　　　　　　　　isRegister: false,
　　　　　　　　　　　　callStatus:""
　　　　　　　　　　},
　　　　　　　　　　{
　　　　　　　　　　　　groupID: "0",
　　　　　　　　　　　　groupName: "All Users",
　　　　　　　　　　　　userDomain: "equiinet.cn",
　　　　　　　　　　　　userExten: "1001",
　　　　　　　　　　　　userID: "2",
　　　　　　　　　　　　userName: "22222",
　　　　　　　　　　　　isRegister: false,
　　　　　　　　　　　　callStatus:""
　　　　　　　　　　}
　　　　　　　　]
　　　　　　　　} 
　　　　　　　] 
        };
    },
    setup() {
        // 注入全局对象
　　　　const globalData = inject('globalData');
 
        watch(() => globalData.extTelMonitorData, (newValue) => {
            // 更新 
            globalData.extTelMonitorData=newValue;
            console.log("ExtTelStatusComponent watch "+globalData.extTelMonitorData[0].list);    
        })

return {
            globalData,
            handleClick
        };

        function handleClick() {
         
        }
  },

  mounted() {
      
   },
  methods: {
        foot_calltel(){
            console.log("foot_calltel "+ "");   
            this.globalData.extTelMonitorData=this.extensionMonitorDataA;
        }
 
    }
    
}
</script>