お手軽にskywayでリアルタイムルームチャットが作れたよ

Web開発/デザインjavascript

どうも、現在人工知能君に学習させている間暇なので、なんとなくリアルタイムのテキストチャットを作ってみました。…作ってみたといってもほとんどサンプルの流用なんですけどね。今回は、javascriptとSkyWayというNTTが提供してくれているWebRTCを簡単に扱うことができるようになるプラットフォームを使っていきます。SkyWayのサイトを見るとビデオチャットや音声チャットなども簡単に実装することができるようになるみたいですが、今回はテキストチャットだけを作っていきます。


1. 下準備

SkyWayを使うには、まず会員登録が必要です。といっても登録料や使用料はかかりません。ちなみに、SkyWayは現在ベータ版みたいなので今後、製品版が出た際は有料になるかもしれないので注意です。

登録は公式サイトから行うことができます。登録には、普通のWebサービスと同じようにメールアドレスと好きなパスワードを入れれば大丈夫です。登録画面の最後には「SkyWayを利用するドメイン」という項目がありますが、今回はローカルのテスト環境で使用するだけなので、「localhost」と入力すれば大丈夫です。

登録が完了すると、API一覧という項目内にAPIキーが発行されているので、どこかにメモしておいてください。後に出てくるプログラム内でこれを書き込みます。

2. プログラムを書いてみる

では、実際にチャットのプログラムを書いていきます。ですが、最低限書く必要があるのはHTMLとjavascriptですが、これらを合わせても数十行です。なんとも便利なものができたものですね。で、実際に書いたものが以下のようになります。まずは、SkyWayのMultipartyインスタンスを作成、通信処理を記述するjavascriptです。

コード上部の「xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx」の部分をご自身のキーに入れ替えてください。続いてチャット画面本体になるhtmlです。

ここまで記事を書いていて思ったのですが、今回掲載したコードは、javascriptとHTMLの単純なものから少し手を加えていました…。ここで掲載したコードでもテキストチャットは動作しますが、ユーザ名や部屋割りの機能を使おうと思ったらPHPなどもう少し工夫する必要があります。

おわりに

本当ならもっと単純なものを掲載したかったのですが、すでにコードは消滅していました…。Gitでも何でも登録しておけという話ですが、単純に忘れていました。現在は、SkyWayを使ってとあるサービスを開発しています。楽しみに待っていてくださいね。

2016-11-06Web開発/デザインjavascript