如何?跨屏聯動 - DataV

本文檔以資料看板1上的Tab列表組件控制資料看板2上的通用標題組件為例，實現跨屏聯動功能。

效果展示

使用情境

當您有多個資料看板，並希望多個資料看板內的組件能展示相互聯動的效果。

操作步驟

登入DataV控制台。
配置主畫面
1. 選擇任一資料看板，重新命名為主畫面，單擊編輯，進入畫布編輯器頁面。
2. 添加Tab列表組件到畫布中。
3. 單擊頁面左上方的表徵圖，切換到藍圖頁面。
4. 在圖層節點頁簽，將Tab列表節點添加到藍圖主畫布中。
5. 單擊邏輯節點頁簽，將串列資料處理和websocket添加到藍圖主畫布中。
6. 選中websocket節點，在右側配置面板的服務地址地區，輸入事先獲得的測試地址；重新命名動作為下一個；刪除多餘事件節點和動作節點。
  說明
  服務地址請參見如何使用DataV-WS服務擷取。
7. 串連組件。
8. 配置串列資料處理節點處理方法。
```
return [{"value":data.content}]; 
```
配置副螢幕
1. 重新選擇一個資料看板，重新命名為副螢幕，單擊編輯，進入畫布編輯器頁面。
2. 添加通用標題組件到畫布中。
3. 單擊頁面左上方的表徵圖，切換到藍圖頁面。
4. 在圖層節點頁簽，將通用標題區段點添加到藍圖主畫布中。
5. 單擊邏輯節點頁簽，將websocket添加到藍圖主畫布中。
6. 選中websocket節點，在右側配置面板的服務地址地區，輸入和主畫面相同的地址；重新命名事件為下一個。
  重要
  主畫面和副螢幕的分組要一致，因為副螢幕是接收端，所以配置接收訊息即可。
7. 串連組件。
單擊兩個螢幕頁面右上方的預覽表徵圖，預覽展示結果。

異常排查

WS服務不能直接在HTTPS協議下訪問，需要用WSS服務，再使用自己的SSL認證去代理WS服務地址後，才能在HTTPS下訪問。
使用功能鍵F12，開啟瀏覽器調試頁面，查看瀏覽器Network頁簽下的WS標籤串連提示資訊，檢查是否因跨域未配置以及在串連返回的Response的Header裡是否有設定Sec-WebSocket-Protocol為echo-protocol。
串連成功後，根據文檔中的訊息格式傳遞參數即可。