ホーム > プログラミング > ビデオチャットアプリを作る > 13. チャット離脱の相手への通知

13. チャット離脱の相手への通知



前項までのビデオチャットプログラムは、ビデオチャットを離脱したとき、離脱される側はすぐにはコネクション終了処理が行われませんでした。
本項では、ビデオチャットを離脱したとき、離脱される側ですぐにはコネクション終了処理が行われるようにします。

解説

前項までは、チャットを離脱される側は、「Connection state」が「failed」になったときを相手が離脱したとみなしています。
離脱する側が「コネクションの終了処理」を行ってから、離脱される側の「Connection state」が「failed」になるのには少し時間を要します。離脱する側が「Leave Chat.」ボタンを押しても、離脱される側ではすぐにはコネクション終了処理が行われません。
離脱する側が「Leave Chat」ボタンを押した後、すぐに、離脱される側でコネクション終了処理が行われるようにするには、チャット離脱の通知を相手へ送信し、離脱される側ではチャット離脱の通知を受信したら速やかにコネクション終了処理を行うようにします。

準備

05. を実施していない場合は、まず、05. を実施します。

サーバー側の処理

変更なし。

ウェブページ

変更なし。

クライアント側の処理

「public/client.js」ファイルを編集します。

ページがunloadされる(閉じる、再読み込み、別ページへ移動)直前に呼ばれる関数

プラウザページの「閉じる、再読み込み、別ページへ移動」の場合も、チャット離脱を相手に通知するようにします。

「UIから呼ばれる関数」コード部に、「ページがunloadされる(閉じる、再読み込み、別ページへ移動)直前に呼ばれる関数」を追加します。

「Leave Chat.」ボタンを押すと呼ばれる関数

「UIから呼ばれる関数」コード部の「Leave Chat.」ボタンを押すと呼ばれる関数の処理を変更します。

DataChannelオブジェクトのイベントハンドラの構築関数

「DataChannel関連の関数」コード部の「DataChannelオブジェクトのイベントハンドラの構築」関数の処理を変更します。

動作確認

node でサーバーを起動します。

ブラウザを2つ立ち上げ、それぞれのブラウザで「localhost:1337」にアクセスします。



片方のブラウザで「Send OfferSDP」ボタンを押すと、ビデオチャットが開始します。


チャット相手がチャット離脱すると、チャットが終了し、リモート映像がクリアされます。

ダウンロード

サンプルプログラム

デモ

デモ(Google App Engine) : https://my-video-chat.appspot.com/app13/index.html
デモ(Heroku) : https://myvideochat1234.herokuapp.com/app13/index.html

関連ページ

前項目 : 12. カメラ(マイク)の停止と再開

次項目 : 14. オファーされる側のみビデオ(マイク)をOnにした場合の問題への対応


ご意見、ご感想、ご質問、ご要望等は、「コメントを投稿する」もしくは「ホーム > コンタクト」よりお願いいたします。
内容の誤り、誤字脱字、リンクミスなどの問題点を発見された場合には「コメントを投稿する」もしくは「ホーム > コンタクト」より連絡していただけると幸いです。


Copyright (c) 2005-2018 Nobuki HIRAMINE All rights reserved.