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)