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

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

解説

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

準備

「12. カメラ（マイク）の停止と再開」を実施していない場合は、実施します。

サーバー側の処理

変更なし。

ウェブページ

変更なし。

クライアント側の処理

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

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

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

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

「Leave Chat.」ボタンを押すと呼ばれる関数を呼び出します。
socketのサーバーとの切断の処理を行います。

// ページがunloadされる（閉じる、再読み込み、別ページへ移動）直前に呼ばれる関数 window.addEventListener( "beforeunload", ( event ) => { event.preventDefault(); // 既定の動作のキャンセル onclickButton_LeaveChat(); // チャットからの離脱 g_socket.disconnect(); // Socket.ioによるサーバーとの接続の切断 e.returnValue = ""; // Chrome では returnValue を設定する必要がある return ""; // Chrome 以外では、return を設定する必要がある } );

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

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

「チャット離脱の通知をDataChannelを通して相手に直接送信」する処理を追加します。

// 「Leave Chat.」ボタンを押すと呼ばれる関数 function onclickButton_LeaveChat() { console.log( "UI Event : 'Leave Chat.' button clicked." ); if( g_rtcPeerConnection ) { if( isDataChannelOpen( g_rtcPeerConnection ) ) { // チャット中 // チャット離脱の通知をDataChannelを通して相手に直接送信 console.log( "- Send 'leave' through DataChannel" ); g_rtcPeerConnection.datachannel.send( JSON.stringify( { type: "leave", data: "" } ) ); } console.log( "Call : endPeerConnection()" ); endPeerConnection( g_rtcPeerConnection ); } }

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

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

チャット離脱の通知を受信したときの処理を追加します。「コネクションの終了処理」の関数を呼び出します。

// DataChannelオブジェクトのイベントハンドラの構築 function setupDataChannelEventHandler( rtcPeerConnection ) { （・・・略・・・） // message イベントが発生したときのイベントハンドラ rtcPeerConnection.datachannel.onmessage = ( event ) => { （・・・略・・・） if( "message" === objData.type ) { （・・・略・・・） } else if( "offer" === objData.type ) { （・・・略・・・） } else if( "answer" === objData.type ) { （・・・略・・・） } else if( "candidate" === objData.type ) { （・・・略・・・） } else if( "leave" === objData.type ) { console.log( "Call : endPeerConnection()" ); endPeerConnection( rtcPeerConnection ); } } }

動作確認

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

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

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

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