实现跨屏联动

效果展示

操作步骤

1. 登录DataV控制台。

2. 配置主屏幕

   1. 选择任一数据看板，重命名为主屏幕，单击编辑，进入画布编辑器页面。

   2. 添加Tab列表组件到画布中。

   3. 单击页面左上角的图标，切换到蓝图页面。

   4. 在图层节点页签，将Tab列表节点添加到蓝图主画布中。

   5. 单击逻辑节点页签，将串行数据处理和websocket添加到蓝图主画布中。

   6. 选中websocket节点，在右侧配置面板的服务地址区域，输入事先获得的测试地址；重命名动作为下一个；删除多余事件节点和动作节点。

      说明

      服务地址请参见如何使用DataV-WS服务获取。

   7. 连接组件。

   8. 配置串行数据处理节点处理方法。

      return [{"value":data.content}]; 

3. 配置副屏幕

   1. 重新选择一个数据看板，重命名为副屏幕，单击编辑，进入画布编辑器页面。

   2. 添加通用标题组件到画布中。

   3. 单击页面左上角的图标，切换到蓝图页面。

   4. 在图层节点页签，将通用标题节点添加到蓝图主画布中。

   5. 单击逻辑节点页签，将websocket添加到蓝图主画布中。

   6. 选中websocket节点，在右侧配置面板的服务地址区域，输入和主屏幕相同的地址；重命名事件为下一个。

      重要

      主屏幕和副屏幕的分组要一致，因为副屏幕是接收端，所以配置接收消息即可。

   7. 连接组件。

4. 单击两个屏幕页面右上角的预览图标，预览展示结果。

异常排查

1. WS服务不能直接在HTTPS协议下访问，需要用WSS服务，再使用自己的SSL证书去代理WS服务地址后，才能在HTTPS下访问。

2. 使用功能键F12，打开浏览器调试页面，查看浏览器Network页签下的WS标签连接提示信息，检查是否因跨域未配置以及在连接返回的Response的Header里是否有设置Sec-WebSocket-Protocol为echo-protocol。

3. 连接成功后，根据文档中的消息格式传递参数即可。