Web组态-仪器间的相互通信(WebSocket技术)

Web组态,通过Vue3+TypeScript+WebSocket技术实现平台仪器间的相互通信,用于设计工业化虚拟仿真。

界面图如下(之前文章有详细教学)

如下是通信设备虚拟仿真的三个仪器,设计初衷是想三个仪器能够数据互通,实现真实模拟效果。

思路:

仪器A发出信号(通过WebSocket技术发送信息给主界面)==》主界面(主界面初始化就建立WebSocket连接,并接收仪器A发出的信息,然后将仪器A发出的信息进行处理,通过传参的方式传递给仪器B、C)=》仪器B、C(接收所传递的参数)

主界面代码如下:关键代码 socket.onmessage接收信息逻辑

复制代码
onMounted(() => {
  connectWebSocket();
});

// 当组件卸载时关闭 WebSocket
onUnmounted(() => {
  if (socket) {
    socket.close();
  }
});




//WebSocket模块
// 连接 WebSocket,并处理接收和发送消息的逻辑
// WebSocket 对象
let socket: WebSocket | null = null;
const connectWebSocket = () => {
  socket = new WebSocket('ws://localhost:8667/VirtuLab_back/chat'); // 连接到后端 WebSocket
  // WebSocket 打开时触发
  socket.onopen = () => {
    console.log('主界面:WebSocket 连接已建立');
  };

  // 接收 WebSocket 消息时触发
  socket.onmessage = (event: MessageEvent) => {
    const message = JSON.parse(event.data);
    const { source, action, data } = message;

    if (source === "signalSource" && action === "updateFrequency") {
      paneldata.value[0].value = data.frequency;
    }
    console.log('主界面:WebSocket 对话已建立');
    console.log('主界面:接收到信息 '+data)
  };

  // WebSocket 关闭时触发
  socket.onclose = () => {
    console.log('主界面:WebSocket 连接已关闭');
  };

  // WebSocket 出现错误时触发
  socket.onerror = (error) => {
    console.error('主界面:WebSocket 错误:', error);
  };
};

仪器A代码,在需要改变数据的时候通过发送信息的方式让所有连接WebSocket的客户端收到信息

复制代码
        const message = {
          source: "signalSource",  // 来源:信号源
          action: "updateFrequency",  // 操作:更新频率
          data: {
            frequency: formattedNumber+"GHz",
          }
        };

主界面传参给仪器B、C

复制代码
    <el-dialog
        v-model="DialogVisible"
        :title="DialogTitle"
        center
        :close-icon="CircleCloseFilled"
        style="height: 80%; width: 80%; overflow: hidden"
    >
      <keep-alive>
        <component :is="currentPage"  :transferData="transferData"/>
      </keep-alive>
    </el-dialog>



    if(node.id=='接收机'){
      transferData.value = paneldata.value[0].value
      DialogVisible.value = true
      currentPage.value = Experiment
      DialogTitle.value = "接收机操作"
    }

仪器B、C接收(传参要定义在onMounted外面,否则会报错)但是目前只能传递一次,因为使用了keep-alive,后续可用仪器B、C也连接WebSocket,或者用pinia进行管理

复制代码
const props = defineProps<{
  transferData: string; // 根据实际数据类型定义
}>();
onMounted(()=>{
  console.log(props)
相关推荐
en-route1 小时前
HTTP cookie
网络·网络协议·http
yqcoder1 小时前
2. 你可以说一下 http 版本的发展过程吗
网络·网络协议·http
网硕互联的小客服1 小时前
未来趋势:AI与量子计算对服务器安全的影响
运维·服务器·网络·网络安全·量子计算
黑客老李1 小时前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
是阿建吖!2 小时前
【Linux | 网络】网络基础
linux·网络
W说编程2 小时前
物联网通信技术全景剖析:从LoRa到5G的深度对比与选型指南
网络·物联网·5g·射频工程
cui_win2 小时前
【网络】Linux 内核优化实战 - net.ipv4.tcp_timestamps
linux·网络·tcp/ip
薄荷椰果抹茶2 小时前
【网络安全基础】第七章---无线网络安全
网络·安全·web安全
Clownseven3 小时前
Shell 脚本实战指南:内网 ARP 洪泛监控与飞书/邮件自动告警
网络·php·飞书
不羁。。3 小时前
【网络协议安全】任务12:二层物理和单臂路由及三层vlanif配置方法
网络·智能路由器