河图页面通信

在河图中，两个页面之间可以通过 WebSocket 实现实时通信，例如数据同步、状态更新等。本文介绍如何实现河图两个页面之间的 WebSocket 通信。

大屏设计器配置

• 准备两个大屏页面 testA、testB 名称和编码保持一致。

  • 大屏页面 testA 中添加 按钮组 和 通用标题 两个组件，并在变量池中添加 testValue 变量

    

  • 变量池 添加变量值

    

  • 按钮组 组件配置交互事件，点击时将值绑定到变量上

    

  • 通用标题 组件配置数据模版，显示变量值

    

  • 大屏页面 testB 中添加 柱状图 和 通用标题 两个组件，并在变量池中添加 testValue 变量

    

  • 变量池 添加变量值

    

  • 柱状图 组件配置交互事件，点击柱图时将值绑定到变量上

    

  • 通用标题 组件配置数据模版，显示变量值

    

节点编程配置

• 节点编程中通过 WebSocket 逻辑节点接收/发送数据

  • 大屏页面 testA 添加 监听变量、WebSocket、转换器、设置变量 四个逻辑节点

    

  • 监听变量 用于按钮组点击后变量发生改变触发 WebSocket 发送动作，将变量值发送到 testB 页面

    

  • WebSocket 用来发送/接收值，控制端大屏编码和受控端大屏编码都填写 testB，接收和发送消息名都填写 testValue

    

  • 转换器 将接收到的数据转换为下游节点需要数据格式

    

  return {
    testValue: data.testValue
  };

  • 大屏页面 testB 与大屏页面 testA 配置一致，WebSocket 控制端大屏编码和受控端大屏编码都填写 testA

    

效果预览

1. 点击大屏页面 testB 中 柱状图 图形

• 大屏页面 testA 显示

  

• 大屏页面 testB 显示

  

1. 点击大屏页面 testA 中 按钮组

• 大屏页面 testA 显示

  

• 大屏页面 testB 显示