[WebSocket]Node.js+socket.ioでWebSocketアプリ作成してみた

Bloggerへの移行前のWordpressにて2012-11-17に投稿した記事です。

WEB+DB PRESSに特集が組まれていて、面白そうだったので、WebSocketで簡易チャットWebアプリを作ってみました。
最初はWEB+DB PRESSのソースを動かしてみて、その後、理解する為に自分でjsファイル郡をリファクタリングして、機能を追加してみました。

構成

• Node.js(v0.8.9)
• express(v3.0.3)
• socket.io(v0.9.11)
• jQuery(v1.7.2)

デモサイト

Herokuはwebsocketが対応していないという記述を見たので、今回はdotclooud上で動作させてます。

簡易チャットアプリ

ブラウザで上記リンクを叩くと、POPUPダイアログが表示され、ニックネームを入力要求する旨が表示されます。(IEでPOPUP制御しているとNGの場合有りのようです。）
その後は、テキストボックス記載した内容は現在、上記サイトを開いている全員に即時共有されます。に文字を入力してenterもしくはupdateをクリックすれば記載内容が表示されます。(一人で確認する際は、ブラウザで複数のタブを起動してみると分かります）まあ、なので試す時は適当な発言がオススメです。笑
あと、特にログなどはとってません。

また、以下にdotcloud上でNode.jsを動かす時のメモを記載しておきます。

• dotcloud.yml以外にsupervisord.confも必要。
• package.jsonを書いておけば、node_modulesはpushしなくてOK。(deployタイミングでdotcloud内部でnpm installコマンドを実行するよう。)
• portは8080に変更
• defaultで動作するNode.jsはv0.4.xらしい。それ以外のバージョンで動作させる時にはdotcloud.ymlに利用したいバージョンを記載する。対応しているバージョン及び詳細はこちら

GitHub

ソースコードはいつも通りGitHubへ。
GitHub-websocket-test

感想

Node.jsは初めてだったので、rubyの時と同様に環境構築に少し時間が掛かりました。Node.jsのバージョン管理が出来るnvmは絶対入れた方が良いですね。

しかし、こんだけ少ないコードでチャットっぽいのが実現出来るってのはすごいなと。（だいたい合計100行ぐらい）
認証機能とかroom機能ぐらい追加したら結構良い感じになるかも。

それにしてもJavaScript、CSS辺りは得意ではないのでもっと勉強しないといけませんね。JavaScriptはそれなりに学習出来たらTaitaniumで何か作ってみると面白そう。

参考サイト

サイトではないですが、今月号のWEB+DB PRESSはかなり参考にさせて頂きました！あざす！

nvmでsudo npm install -g から卒業する

ここを参考にnvmの設定してみました。バージョン依存とか結構あるみたいなので、nvmはマジで入れておきたい。

Socket IO

今回WebSocketを利用する為に使用したパッケージの公式。
sampleのソースコードがあって参考になりました。

[JQuery]関数の作成・定義

jQueryの使い方があまり分からず、共通関数は上記を参考に書いてみました。
ちなみに以下のような感じ。

  // send message
  $('input#update').on('click', function(e) {
      jQuery().message();
  }); 
  
  // push enter
  $('input#message').keypress(function (e) {
    if(e.which == 13){
      jQuery().message();
    }
  });

  // util
  jQuery.extend(jQuery.fn, {
    message: function() {
      var message = $message.val();
      if (message.length === 0) return;
      socket.emit('post', message);
      // clear message text
      $message.val('');
    }
  });