Node.jsとWebSocket.IOでチャットアプリを作る


  • WebSocket Chat version 0.1
    websocket-chat-01

前回はnvmとNode.jsとWebSocket.IOをインストールしてWebSocketアプリの環境を作るところまで終わりました。今回はNode.jsとWebSocket.IOでチャットアプリを作ってみました。まだ完全に理解できていない部分もありますが、公開します。上記は完成したチャットアプリのキャプチャです。ソースコードはGitHubにもコミットしています。
mawatari / WebSocket-Chat – GitHub

制作環境

ソフトウェアバージョン
Node0.8.12
WebSocket.IO0.2.1

VMware上、LAN上、インターネット上のCentOS6.3で動作確認済み。WebサーバはApache。
クライアントでの確認は以下の通り。
Mac, WindowsのChrome 22, Firefox 16, Safari 6, Opera 12(動作不可), IE 9(動作不可).
iPad2(iOS 5.1.1), new iPad(iOS6), iPhone4~5(iOS6)のSafari, Chrome.
Galaxy S2(Android2.3.3)のブラウザ(動作不可).

目次

WebSocket Chat サーバの実装

ご覧の通り、WebSocket.IOを利用することで非常に簡単にWebSocketサーバを作ることができます。まあ大したことをやってないからというのもありますが。実行時間の追加をサーバ側でやってるくらいで、送られてきたものをそのまま返すエコーサーバに近いですね。保存の処理等が入ってくる場合は、もっとコード量が増えるでしょう。

さて、コードを見ていきます。

4〜6行目。
8888番ポートを指定して待ち受けるようにしています。その際、コンソールにメッセージを出力するようにしました。ファイアウォールを有効にしている場合は、8888番ポートの設定を忘れずに。

8行目〜。
クライアントからの接続イベントを処理したい場合は、ここに記述します。今回は接続単体では特に処理していません。

10行目〜。
クライアントからのメッセージ受信イベントを処理しています。サーバ側での処理の例として、受け取ったメッセージに実行時間を追加しています。ログを保存したりする場合は、ここに追記していけば良いですね。次にコンソールにデータを出力し、その後、接続している全てのクライアントにメッセージを送信しています。

WebSocket Chat クライアントの実装

HTML

何かをちゃちゃっと作るとき、最近はjetstrapで、ざっくりとイメージを組んでから、作り込みを始めます。Webデザインのセンスに優れていなくても、それなりのものが出来上がるので重宝しています。使い方は以下のような感じです。
参考リンク:jetstrap – The Bootstrap Interface Builder

  • コンポーネンツウィンドウから使いたいアイテムを配置したい場所にドラッグ&ドロップします。
    websoket-chat-jetstrap-01
  • ボタングループを配置したときの例。
    websoket-chat-jetstrap-02
  • responsive CSSに対応。上部に表示されたアイコンをクリックすることで各デバイスでの表示を確認できます。
    websoket-chat-jetstrap-03
  • 右下のCSS/HTMLタブをクリックすることで、ソースコードを確認したりダウンロードしたりできます。
    websoket-chat-jetstrap-04

今回も例に洩れず、HTMLはjetstrapを使ってざっくりと組んで、一部に修正を加えました。

CSSフレームワークは便利ですねって言うくらいで、特段、取り上げることもないのでソースコードの解説は省略します。

JavaScript

うーん。あまりキレイなソースコードでない。jQueryのスマートなコーディングスタイルを学びたいです。よければ、俺ならこう書くみたいの教えてください。
Fork me!! mawatari / WebSocket-Chat – GitHub

今回はとりあえず動かすということを目標としていたので、その辺はご容赦していただくとして、コードを見ていきます。

2行目。
WebSocketのインスタンスを生成しています。

4〜12行目。
エラー処理をしています。ここの理解がまだあまりできていません。WebSocketサーバが起動していない場合、Firefoxではこのエラーをキャッチするんですが、Safari、Chromeではダメでした。サーバが起動していない場合のエラーはまた別なのか、単にブラウザ側の実装がまだなのか、それともまた別の事情か、どうなんでしょう。

19〜27行目。
WebSocketサーバへの接続が確立された際のイベントを記述しています。今回は、入室イベントであるということと、ユーザ名をJSONで送っています。

61〜72行目。
発言イベントを処理しています。textboxに文字が入力され、エンターキーが押された場合を発言としています。チャットイベントであるということと、ユーザ名、チャット内容を送っています。

74〜80行目。
ブラウザ終了イベントを処理しています。終了イベントであるということと、ユーザ名を送っています。iOSではイベントを補足できませんでした。

29〜58行目。
サーバからのpushメッセージ受信イベントを処理しています。リスト要素を生成し、イベントタイプによって出力内容をかえるようにしています。
クライアントの実装は以上です。

WebSocket Chat サーバの起動とアプリの実行

VMware上のCentOS6での実行を例に見ていきます。今回は、 chat_server.jsをユーザのホームディレクトリに設置しました。起動の例は以下の通りです。
Nodeおよび、WebSocket.IOがインストールされていて起動している前提ですので、そちらが済んでない方は、以下より設定してください。
参考リンク:nvmとNode.jsとWebSocket.IOをインストールしてWebSocketアプリの環境を作る

ApacheのDocumentRoot以下に chat.htmlchat_client.jsを設置し、 chat.htmlにアクセスすると、以下の画面が表示されるはずです。

  • WebSocket Chat version 0.1
    websocket-chat-01

ブラウザを2つ立ち上げて確認するもよし、2台のPCからアクセスするもよし、スマートフォンやタブレットでアクセスするもよし、WebSocketのリアルタイム性をぜひ体感してみてください。