【JavaScript】Node.jsでリアルタイムなものを創るチャットで試すVo.1

読了: 約 5 分

最近創っているアプリでコメント機能を創ったのですが、phpやajaxで創ると更新しなければ他の人のコメントが見られず不便ですよね。
ajaxでsettimeoutで10秒とかで取得しても画面がちらつくのが微妙という事で、Node.jsでリアルタイムチャットを創る事にしました。

概要

1 macでの環境構築
2 Websocket.ioとsocket.ioの違い
3 参考サンプル
4 やった事
5 参考記事

macでの環境構築

以前の記事でwindowsでの環境構築については書いたのですが、mac book airを晴れて購入しまして、macの環境構築についてもざっくり書いておきます。

macでのインストールまでに参考になった記事
Node.js インストールログ

下記のコマンドが使えなかったので、node.jsは公式サイトからインストールしてしまいました。

$ sudo port install nodejs

npm(Node Version Manager),socket.io,expressのインストールは上記のサイトの流れでインスコしました。
expressのバージョンとかの違いで、jade,ejsの使用が分かれたりするので、そこは要確認です。

基本コマンド

//expressインストール
$ npm install express
//socket.ioインストール
$ npm install socket.io
//創ったapp.jsの実行
$ node app.js
//nodeのバージョン確認
$ node -v

node.jsのリファレンス

Websocket.ioとsocket.ioの違い

この違いについて詳細が分からなかったので、少し調べてみると下記のよう。
socket.ioがラッパーでwebsocket.ioはそれに含まれているもの。

websocket.ioを使用する方法
http://mawatari.jp/archives/install-nvm-node-js-websocket-io

npm install websocket.io

socket.ioとwebsocket.ioの違いは
socket.ioの公式サイトの訳もあって非常にわかりやすい記事。
最初のnode.jsのサンプルにはexpressのサーバーに渡している人がいますが、それもやらなくてよくなりました。
http://il-all.blogspot.jp/2012/03/socketiotransport.html

socket.io
Socket.IOは、Ajax(xhr-polling)やComet、もしくはWebSocket等、どれを使っても良いので双方向通信を実現しようとするもの。
下位の「トランスポートメカニズム」を意識せずに、アプリケーションの開発に専念できる

Socket.ioが出来てからの流れは下記のようになっていて、Socket.ioの開発より、engine.ioとwebsocket.ioの安定化が進められているそう。

Socket.IO
|
Engine.IO
|
WebSocket.IO
|
(ws)

参考
Engine.IO からみる Socket.IO の今後
 Socket.IO API 解説
 websocketの資料

参考サンプル

Node.jsですでにチャットアプリは結構創られている方が多いですが、下記が一番参考になりましたのでご紹介しておきます。
下記をforkして、自サーバーにアップロードして挙動などを確認してみました。
Node.jsとWebSocket.IOでチャットアプリを作る

サンプル

ws:の設定がローカルサーバーにしているため、
他のpcやスマホからはアクセス出来ないのですが。笑

ws:の設定例

var WebSocket = require('ws')
, ws = new WebSocket('ws://www.host.com/path');
ws.on('open', function() {
ws.send('something');
});
ws.on('message', function(message) {
console.log('received: %s', message);
});

http://einaros.github.com/ws/

参考1と参考2は別物ですが、例として。

「onopen,onmessage,onclose」という3つのコールバックファンクションを定義するのみ
サーバの方にメッセージを送りたい場合は「send()」というファンクションを呼び出すだけ
onopenでサーバー接続された場合、sendで送る例

参考1
var ws = new WebSocket("ws://example.com/service");
ws.onopen = function() {
  // Web Socket is connected. You can send data by send() method.
  ws.send("message to send"); ....
};
ws.onmessage = function (evt) { var received_msg = evt.data; ... };
ws.onclose = function() { // websocket is closed. };

参考2
// WebSocketサーバ接続イベント
ws.onopen = function() {
  $('#textbox').focus();
  // 入室情報を文字列に変換して送信
  ws.send(JSON.stringify({
    type: 'join',
    user: userName
  }));
};

参考
第1回 node.jsの衝撃とWebSocketが拓く未来

Windows Azure Webサイトを使っていてあまり参考になりませんが…
第3回　node.jsを利用した開発とWebサイトへのデプロイ