セッションへの参加 — Web
セッションIDとトークンを使用すれば、OpenTok.jsライブラリを使ってOpenTokセッションに接続できます。
このトピックには以下のセクションが含まれます:
- セッションオブジェクトの初期化
- セッションへの接続
- セッションからの切断
- セッションから切断されたことを検知する
- 自動再接続
- クライアントの接続と切断の検出
- セッション接続の問題のトラブルシューティング
- まとめると
セッション ID および認証トークンの作成方法については、以下を参照してください。 セッション作成 そして トークン作成.
セッションオブジェクトの初期化
セッションに接続するには、まず OT.initSession() あなたの OpenTok APIキー および、適切なセッションID:
// Replace with your OpenTok API key and session ID:
var session = OT.initSession(apiKey, sessionID);
について OT.initSession() メソッドはSessionオブジェクトを返す。
を呼び出すことに注意してください。 OT.initSession() メソッドは 作成する OpenTok セッション。これにより、既存の OpenTok セッションを表す JavaScript の Session オブジェクトが作成されます。OpenTok セッションは、OpenTok のサーバーサイドライブラリを使用して作成します。詳しくは、 OpenTokセッションの作成.
ユーザーのブラウザーがWebRTCをサポートしていない場合、次のような呼び出しが行われる。 OT.initSession() の結果、ページがユーザーにメッセージを表示します。WebRTC のサポートをチェックし、このメッセージが表示されないようにするには OT.checkSystemRequirements() メソッドを呼び出す前に OT.initSession():
if (OT.checkSystemRequirements() == 1) {
var session = OT.initSession(apiKey, sessionId);
} else {
// The client does not support WebRTC.
// You can display your own message.
}
セッションへの接続
一旦 Sessionオブジェクトを初期化しました, それを connect() メソッドに、 トークン および完了ハンドラ関数:
var session = OT.initSession(apiKey, sessionId);
session.connect(token, function(error) {
if (error) {
console.log("Error connecting: ", error.name, error.message);
} else {
console.log("Connected to the session.");
}
});
の完了ハンドラーにエラー・オブジェクトが渡される。 connect クライアントが OpenTok セッションへの接続に失敗した場合に発生するイベントです。それ以外の場合は、エラーオブジェクトが渡されず、クライアントがセッションへの接続に成功したことを示します。
Session オブジェクトは sessionConnected クライアントがOpenTokセッションに接続した際のイベント。そして、OTオブジェクトは exception イベントを使っている。しかし、接続の成功をチェックするには、完了ハンドラーを connect() メソッドの最後のパラメータとして指定する。
セッションからの切断
セッションを切断するには disconnect() メソッドを呼び出します:
session.disconnect();
切断の検出
クライアントがセッションから切断すると、Session オブジェクトは sessionDisconnected イベントを開催する:
session.on("sessionDisconnected", function (event) {
// The event is defined by the SessionDisconnectEvent class
if (event.reason == "networkDisconnected") {
alert("Your network connection terminated.")
}
});
session.connect(token);
について reason このイベントのプロパティは、セッションが切断された理由を説明する文字列です。たとえば、前の例では、ネットワーク接続が切断されたためにセッションが切断された場合、ユーザーにその旨を通知します。詳細については、以下を参照してください。 セッション切断イベント.
自動再接続
クライアントは、予期せず(たとえば、ネットワーク接続が切断された場合など)セッションから切断された際、自動的に再接続を試みます。クライアントが切断および再接続された際にディスパッチされるイベントに対応したい場合を除き、クライアントが自動的に再接続するようにするためのコードを追加する必要はありません。これらのイベントの使用方法を示すサンプルコードについては、 オープントック・リコネクション GitHubのレポにある。
接続が切断され、クライアントが再接続しようとすると、Sessionオブジェクトは reconnecting イベントが発生します。接続が回復すると、Sessionオブジェクトは reconnected イベント。クライアントが接続を復元できない場合、クライアントは OpenTok セッションから切断され、Session オブジェクトは sessionDisconnected イベントを開催する。
これらのイベントに応答して、アプリケーションは(オプションで)一時的な切断、再接続、切断の状態を示すユーザーインターフェース通知を表示することができる:
session.on(
sessionReconnecting: function() {
// Display a user interface notification.
},
sessionReconnected: function() {
// Adjust user interface.
},
sessionDisconnected: function() {
// Adjust user interface.
}
);
クライアントがセッションから一時的に切断すると、発行したストリームをサブスクライブしているクライアントのSubscriberオブジェクトは、発行したストリームがドロップしたときと、自動的に再開したとき(または再開した場合)にイベントをディスパッチします。詳細については 自動再接続 を参照してください。
デフォルトでは、クライアントがセッションから一時的に切断されている間に送信したシグナルはすべてキューに入れられ、再接続に成功したときに(成功した場合に)送信されます。シグナルは retryAfterReconnect プロパティ false に渡すオプションに Session.signal() メソッドを使って、切断中にシグナルがキューに入るのを防いでください。詳しくは 自動再接続中に信号が送信されないようにする.
クライアントの接続と切断の検出
Session オブジェクトは connectionCreated イベントをディスパッチします。セッションオブジェクトは connectionDestroyed イベントが発生します。これらのイベントはConnectionEventクラスによって定義されます。 connection これは、イベントに関連する接続(作成または破棄)の Connection オブジェクトです:
var connectionCount;
session.on({
connectionCreated: function (event) {
connectionCount++;
if (event.connection.connectionId != session.connection.connectionId) {
console.log('Another client connected. ' + connectionCount + ' total.');
}
},
connectionDestroyed: function connectionDestroyedHandler(event) {
connectionCount--;
console.log('A client disconnected. ' + connectionCount + ' total.');
}
});
session.connect(token, function (error) {
if (error) {
console.log("Failed to connect.");
} else {
console.log('You have connected to the session.');
}
});
セッション接続の問題のトラブルシューティング
について Session.connect() メソッドにはコールバック関数があります。 error パラメータを使用する。このパラメータが存在し、定義されている場合 null またはundefined)の場合、接続時にエラーが発生します。このエラーをコードから探すことで、エンドユーザーがなぜ接続できなかったのかを特定することができます:
session.connect(token, function(err) {
if (err) {
// handle error
} else {
// connection succeeded
}
});
接続しようとしたときに戻ってくるエラーの多くは、無効または期限切れのトークンが原因です。以下のトークンのベストプラクティスに従っていることを確認してください。 これ.
セッションへの接続が失敗するもう一つの一般的な理由は、エンドユーザーのインターネット接続によるものです。これには次のような例がある:
- エンドユーザーがインターネットに接続できなくなった
- エンドユーザーは、制限されたネットワーク上にいるため、一般的なポートがブロックされている。
これにより、コード 1006 のエラーが発生します。以下のコードを使用してこのエラーに対処することをお勧めします。 セッションへの接続に失敗するその他の原因としては、OpenTokサーバーのダウンや、何らかの予期せぬエラー(サーバー側の500レベルのエラーなど)が発生した場合などが挙げられます。こうした事態は頻繁に発生するわけではありませんが、これらのエラーに対処しておくことが推奨されます。
この指示に従えば、エラー処理コードは次のようになるはずだ:
session.connect(token, function(err) {
if (err) {
if (err.name === "OT_NOT_CONNECTED") {
showMessage('Failed to connect. Please check your connection and try connecting again.');
} else {
showMessage('An unknown error occurred connecting. Please try again later.');
}
}
});
セッションへの接続に成功した後、接続が切れることがあります。この場合は sessionDisconnected イベントに "networkDisconnected "という理由が追加された:
session.on({
sessionDisconnected: function(event) {
if (event.reason === 'networkDisconnected') {
showMessage('You lost your internet connection.'
+ 'Please check your connection and try connecting again.');
}
}
});
すべてをまとめる
以下のコードには、 connect() セッションに接続するメソッドです。接続が完了すると、このコードはクライアントがセッションに参加したり離脱したりしたタイミングを追跡します。また、セッションから切断するためのメソッドも備えています:
var session;
var connectionCount = 0;
function connect() {
// Replace apiKey and sessionId with your own values:
session = OT.initSession(apiKey, sessionId);
session.on({
connectionCreated: function (event) {
connectionCount++;
console.log(connectionCount + ' connections.');
},
connectionDestroyed: function (event) {
connectionCount--;
console.log(connectionCount + ' connections.');
},
sessionDisconnected: function sessionDisconnectHandler(event) {
// The event is defined by the SessionDisconnectEvent class
console.log('Disconnected from the session.');
document.getElementById('disconnectBtn').style.display = 'none';
if (event.reason == 'networkDisconnected') {
alert('Your network connection terminated.')
}
}
});
// Replace token with your own value:
session.connect(token, function(error) {
if (error) {
console.log('Unable to connect: ', error.message);
} else {
document.getElementById('disconnectBtn').style.display = 'block';
console.log('Connected to the session.');
connectionCount = 1;
}
});
}
function disconnect() {
session.disconnect();
}
connect();