developer's diary

最近はc#のエントリが多いです

iframeフォーエバー! play20にあるcometのサンプルを改造して簡易チャットルームを作りました。

akkaのアクターモデルがちょびっとだけ理解できたmitsugeekです。

今回はplay2.1.1のsampleにあるcomet-clockを改造して簡単なチャットルームを作ってみました。

cometを利用したwebの時刻通知アプリcomet-clock

comet-clockは↓のような画面で、サーバから100ミリ秒毎に時刻をブラウザにpushするアプリです。 cometの実装方法としてiframeを利用してscriptタグのレスポンスを小刻みに返す方法で、Forever Iframeと呼ぶそうです。

f:id:mitsugi-bb:20130502003052p:plain

このアプリがplay framework2のサンプルとして付属してます。 今回はこのサンプルを改造して、チャットアプリにしてみました。

イメージ・・・

f:id:mitsugi-bb:20130502003447p:plain

ニックネームを入力してチャットルームに入室。

f:id:mitsugi-bb:20130502003525p:plain

入力域に文字を入力して、送信を押すとメッセージが送信されます。

f:id:mitsugi-bb:20130502003619p:plain

入室と退室(ブラウザを閉じる)とメッセージの送信それだけです。 メッセージの保存等は行っていません。超シンプルです。

別タブでアクセスして、入室すると入室したことがリアルタイムで通知されます。

f:id:mitsugi-bb:20130502003824p:plain

ブラウザを閉じると、退室も通知します。

f:id:mitsugi-bb:20130502003857p:plain

ipadで簡単に試したのですが(wifi)、safariを閉じて別のアプリを起動してからsafariに戻っても、通信はそのまま繋がっているみたいでびっくりしました。枯れた技術の組み合わせでリアルタイムなチャットができるんだとちょっとだけ感動。

感想

lingrには到底及ばないですが、ひとまずチャットができるところまで作ってみましたのでgithubに上げてときます。(iframeを利用したcometですので通信が途切れたかどうかの判定ができてませんし、XSSの脆弱性あります。)

今回はcometという技術とアクターモデルというアーキテクチャを噛み砕きながら作っていく感じでかなり勉強になりました。技術的にはまだまだ身にしみない感じです。ココ(ie10関連ページ)見る限り、IE10ではComet ストリーミングのサポートって書いてて、XMLHttpRequestの応答をマルチパートで返せるみたいな感じらしいので、ajaxでcometするのが良いお作法なんだと思います。

このサンプルを動かしてみたい

#java-develのパッケージをインストール(playがjavacを利用します。)
sudo yum install java-devel
#ホームディレクトリで作業
cd ~
#play2.1.1をダウンロード
wget http://downloads.typesafe.com/play/2.1.1/play-2.1.1.zip
#解凍
unzip play-2.1.1.zip 
#チャットアプリを取得
git clone https://github.com/mitsugeek/comet_chat_play2_example_iframe.git
#カレントディレクトリを移動
cd comet_chat_play2_example_iframe/
#アプリ起動
~/play-2.1.1/play run

以上で 9000番ポートにアクセスすると動くと思います。

参考