DataV:クロススクリーンインタラクションの実現

エフェクト表示

手順

1. DataVコンソールにアクセスします。

2. メイン画面の設定

   1. ダッシュボードを選択し、メイン画面に名前を変更します。 次に、[編集] をクリックしてキャンバスエディターにアクセスします。

   2. タブリストウィジェットをキャンバスに追加します。

   3. 左上隅のアイコンをクリックして、ブループリント表示に切り替えます。

   4. [レイヤーノード] タブで、タブリストノードをメインのブループリントキャンバスに追加します。

   5. [ロジックノード] タブに移動し、[シリアルデータ処理] ノードと [Websocket] ノードをメインのブループリントキャンバスに追加します。

   6. Websocketノードを選択し、設定パネルの [エンドポイント] セクションで、取得したテストアドレスを入力します。 アクションの名前をNextに変更し、不要なイベントノードとアクションノードを削除します。

      説明

      エンドポイントについては、「DataV-WSサービスの使用方法」をご参照ください。

   7. コンポーネントを接続します。

   8. シリアルデータ処理ノード方式を設定します。

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

3. セカンダリ画面の設定

   1. 別のダッシュボードを選択し、[セカンダリ画面] の名前を変更します。 [編集] をクリックして、キャンバスエディターにアクセスします。

   2. [一般タイトル] ウィジェットをキャンバスに追加します。

   3. 左上隅のアイコンをクリックして、ブループリント表示に切り替えます。

   4. [レイヤーノード] タブで、メインのブループリントキャンバスに [一般タイトル] ノードを追加します。

   5. [ロジックノード] タブをクリックし、[Websocket] をメインのブループリントキャンバスに追加します。

   6. Websocketノードを選択し、右側の設定パネルの [エンドポイント] セクションで、メイン画面と同じアドレスを入力します。 イベントの名前をNextに変更します。

      重要

      セカンダリ画面は受信者として機能し、メッセージを受信するように設定するだけでよいため、メイン画面とセカンダリ画面が一貫してグループ化されていることを確認します。

   7. コンポーネントを接続します。

4. 表示結果をプレビューするには、画面ページの右上隅にある [プレビュー] アイコンをクリックします。

トラブルシューティング

1. HTTPSプロトコルでは、WSサービスに直接アクセスできません。 WSSサービスを使用し、HTTPSアクセス用のSSL証明書を使用してWSエンドポイントをプロキシします。

2. F12キーを押して、ブラウザのデバッグページを開きます。 [ネットワーク] タブの [WS] セクションで、クロスドメインの問題がないか確認し、ヘッダーの [応答] がSec-WebSocket-Protocolをecho-protocolに設定しているかどうかを確認します。

3. 接続したら、ドキュメントで指定されたメッセージ形式に従ってパラメータを送信します。