需求在 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>
标签：userName,function,false,isRegister,globalData,改变,websock,Vue3,webSocket From： https://www.cnblogs.com/hailexuexi/p/17554454.html