ホーム > プログラミング > ビデオチャットアプリを作る > 17. チャットルームに分かれてチャット

17. チャットルームに分かれてチャット



前項までで作成したビデオチャットは、サイトにアクセスした人全員が同じチャットに参加しました。
本項では、チャットルームに分かれてチャットができるようにします。

解説

Socket.IO を利用すると「チャットルームに分かれてチャット」を簡単に実現することができます。

指定したルーム名のルームに入室済みの人とシグナリングを行い、ルーム外の人とはシグナリングを行わないようにします。
Socket.IO のルーム機能を活用します。
チャットに参加するときに、シグナリングサーバーでの処理として、指定したルーム名のルームに入室し、"join"を同じルームに入室済みの人に送信するようにします。

準備

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

サーバー側の処理

「server.js」ファイルを編集します。

ウェブページ

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

「public/index.html」 の内容を以下のようにします。

クライアント側の処理

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

グローバル変数

「グローバル変数」コード部に、以下のグローバル変数の定義を追加します。

「Join」ボタンを押すと呼ばれる関数

「UIから呼ばれる関数」部の「「Join」ボタンを押すと呼ばれる関数」の処理を変更します。

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

チャットからの離脱のときには、ルームからの退室を行うために、サーバーにチャットの離脱の通知を送ります。

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

コメントアウトの削除

前項でコメントアウトしたコードを削除します。

動作確認

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

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

ユーザー名とルーム名を入力する参加画面が表示されます。


同じルーム名を入力した2つのブラウザ間でビデオチャット


インターネットに公開されたサーバーでプログラムを動作させ、同じルーム名を入力した2つの端末間でビデオチャット

ダウンロード

サンプルプログラム

デモ

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

関連ページ

前項目 : 16. 複数人でのビデオチャット


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


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