テキストチャットのチュートリアル（Web版）

概要

テキストチャットは、OpenTokのシグナリングAPIを使用して実装されています。シグナルは、 signal() Session オブジェクトのメソッド。シグナルを受信するには、クライアントは signal セッションオブジェクトによってディスパッチされるイベント。

プロジェクトの設定

このチュートリアルを進めるには、OpenTokの Webサンプルアプリ GitHub上のリポジトリ：

git clone https://github.com/Vonage-Community/video-api-web-samples.git

次に、 シグナリング コードエディタ内のフォルダを開いて、手順に沿って進めてください。

コードを詳しく見ていく

このアプリケーションでは、ユーザーが入力テキストフィールドにテキストを入力すると、次のコードが実行されます：

form.addEventListener('submit', function(event) {
  event.preventDefault();

    session.signal({
        type: 'msg',
        data: msgTxt.value
      }, function(error) {
      if (error) {
        console.log('Error sending signal:', error.name, error.message);
      } else {
        msgTxt.value = '';
      }
    });
  });
});

このメソッドは、 signal() Session オブジェクトのメソッドで、OpenTok セッションに接続しているすべてのクライアントにシグナルを送信します。各シグナルは、 type メッセージのタイプを識別するプロパティ（この場合は "msg") および data メッセージを含むプロパティ。入力されたテキストは、signalメソッドのdataプロパティを通じて送信されます。

セッションに接続している別のクライアント（このアプリでは1つしかありませんが）がメッセージを送信すると、そのセッションの signal イベントハンドラが呼び出されます：

session.on('signal:msg', function(event) {
  var msg = document.createElement('p');
  msg.innerText = event.data;
  msg.className = event.from.connectionId === session.connection.connectionId ? 'mine' : 'theirs';
  msgHistory.appendChild(msg);
  msg.scrollIntoView();
});

このメソッドは、シグナルがローカルのWebクライアントから送信されたものか、それともそのセッションに接続している別のクライアントから送信されたものかをチェックします：

event.from.connectionId === session.connection.connectionId ? 'mine' : 'theirs';

Session オブジェクトは、OpenTok セッションを表します。これには、 connection プロパティで、これには connectionId プロパティ。このイベントオブジェクトは、このシグナルに関連付けられたイベントを表します。これには、 from （Connection オブジェクトである）プロパティを、 connectionId プロパティ。これは、シグナルを送信したクライアントの接続IDを表します。これらが一致する場合、そのシグナルはローカルのWebクライアントによって送信されたものです。

その後、そのイベントに関連するデータは、 history DOM要素。

このアプリは、OpenTokのシグナリングAPIを使用してテキストチャット機能を実装しています。ただし、このシグナリングAPIを使用すれば、セッションに接続している他のクライアントに対して（個別に、またはまとめて）メッセージを送信することも可能です。

おめでとうございます！Web版テキストチャットチュートリアルを完了しました。
ここで作成したコードをさらに試したり調整したりすることもできますし、あるいは 次のステップ 以下を参照してください。シグナリングに関する詳細については、 OpenTok シグナリング開発者ガイド.

次のステップ

ここでの作業が終わったら、以下の役立つリソースを活用して、OpenTokアプリケーションの構築と機能強化を続けてください：