0.1前回はnvmとNode.jsとWebSocket.IOをインストールしてWebSocketアプリの環境を作るところまで終わりました。今回はNode.jsとWebSocket.IOでチャットアプリを作ってみました。完全に理解できていない部分もありますが、公開します。上記は完成したチャットアプリのキャプチャです。ソースコードはGitHubにもコミットしています。0.2.1VMware上、LAN上、インターネット上のCentOS6.3で動作確認済み。WebサーバはApache。クライアントでの確認は以下の通り。{client.send(data);});});});ご覧の通り、WebSocket.IOを利用することで非常に簡単にWebSocketサーバを作ることができます。大したことをやってないからというのもありますが。実行時間の追加をサーバ側でやってるくらいで、送られてきたものをそのまま返すエコーサーバに近いですね。保存の処理等が入ってくる場合は、もっとコード量が増えるでしょう。コードを見ていきます。\033[39m');});4〜6行目。8888番ポートを指定して待ち受けるようにしています。その際、コンソールにメッセージを出力するようにしました。ファイアウォールを有効にしている場合は、8888番ポートの設定を忘れずに。クライアントからの接続イベントを処理したい場合は、ここに記述します。今回は接続単体では特に処理していません。{client.send(data);});});10行目〜。クライアントからのメッセージ受信イベントを処理しています。サーバ側での処理の例として、受け取ったメッセージに実行時間を追加しています。ログを保存したりする場合は、ここに追記していけば良いですね。次にコンソールにデータを出力し、その後、接続している全てのクライアントにメッセージを送信しています。クライアントの実装HTML何かをちゃちゃっと作るとき、最近はjetstrapで、ざっくりとイメージを組んでから、作り込みを始めます。Webデザインのセンスに優れていなくても、それなりのものが出来上がるので重宝しています。使い方は以下のような感じです。Builderコンポーネンツウィンドウから使いたいアイテムを配置したい場所にドラッグ&ドロップします。ボタングループを配置したときの例。上部に表示されたアイコンをクリックすることで各デバイスでの表示を確認できます。右下のCSS/HTMLタブをクリックすることで、ソースコードを確認したりダウンロードしたりできます。今回も例に洩れず、HTMLはjetstrapを使ってざっくりと組んで、一部に修正を加えました。src="./chat_client.js"></script></body></html>CSSフレームワークは便利ですねって言うくらいで、特段、取り上げることもないのでソースコードの解説は省略します。'サーバに接続できませんでした。data-dismiss="alert">×</button>',$('<i/>').addClass('icon-warning-sign'),'サーバに接続できませんでした。userName,}));};うーん。キレイなソースコードでない。jQueryのスマートなコーディングスタイルを学びたいです。よければ、俺ならこう書くみたいの教えてください。GitHub今回はとりあえず動かすということを目標としていたので、その辺はご容赦していただくとして、コードを見ていきます。WebSocket('ws://172.16.145.136:8888/');2行目。WebSocketのインスタンスを生成しています。'サーバに接続できませんでした。data-dismiss="alert">×</button>',$('<i/>').addClass('icon-warning-sign'),'サーバに接続できませんでした。');}4〜12行目。エラー処理をしています。ここの理解がまだあまりできていません。WebSocketサーバが起動していない場合、Firefoxではこのエラーをキャッチするんですが、Safari、Chromeではダメでした。サーバが起動していない場合のエラーはまた別なのか、単にブラウザ側の実装がまだなのか、それともまた別の事情か、どうなんでしょう。userName}));};19〜27行目。WebSocketサーバへの接続が確立された際のイベントを記述しています。今回は、入室イベントであるということと、ユーザ名をJSONで送っています。'';}};61〜72行目。発言イベントを処理しています。textboxに文字が入力され、エンターキーが押された場合を発言としています。チャットイベントであるということと、ユーザ名、チャット内容を送っています。userName,}));};74〜80行目。ブラウザ終了イベントを処理しています。終了イベントであるということと、ユーザ名を送っています。iOSではイベントを補足できませんでした。alert-error').children('div').children('i').removeClass('icon-user').addClass('icon-warning-sign').after('不正なメッセージを受信しました');}$('#chat-history').prepend(item).hide().fadeIn(500);};29〜58行目。サーバからのpushメッセージ受信イベントを処理しています。リスト要素を生成し、イベントタイプによって出力内容をかえるようにしています。クライアントの実装は以上です。サーバの起動とアプリの実行VMware上のCentOS6での実行を例に見ていきます。chat_server.jsをユーザのホームディレクトリに設置しました。起動の例は以下の通りです。Nodeおよび、WebSocket.IOがインストールされていて起動している前提ですので、そちらが済んでない方は、以下より設定してください。メッセージを受け取ると以下のような感じでコンソールに表示されます。{"type":"chat","user":"ゲスト82","text":"こんにちは。メッセージを受け取ると以下のような感じでコンソールに表示されます。18:2:41"}{"type":"chat","user":"ゲスト82","text":"こんにちは。chat.htmlにアクセスすると、以下の画面が表示されるはずです。0.1ブラウザを2つ立ち上げて確認するもよし、2台のPCからアクセスするもよし、スマートフォンやタブレットでアクセスするもよし、WebSocketのリアルタイム性をぜひ体感してみてください。