Warning: reset() expects parameter 1 to be array, boolean given in /home/users/2/mods.jp-makoto-tanaka/web/wordpress/wp-content/themes/xeory_base/lib/functions/head.php on line 143
このエントリーをはてなブックマークに追加

読了: 約 5 分

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

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サイトへのデプロイ

やった事

今回の記事に直接関係ないですが、gitを入れたので。
ターミナルでgitコマンドを使用するようにする
公式サイトのgit for macからインストールする。
インストール出来たら、ターミナル再起動すればコマンドが打てるようになります。

参考記事

Node.jsアプリ開発で参考になる記事 まとめ
Nodeビギナーズブック

Node.jsを使ったリアルタイムのWEBサービス、タスク管理ツールなどが出始めていますが、
今後もこういった流れは続くと思います。
引き続き書いていきます。

時給2500円以上の求人案件のみ掲載の、コデアル
テレビ番組にも取り上げられ、副業・フリーランス向けエンジニア多数掲載 !!

お金のお悩みを即日解決するお金のメディア「fincy」

SNSでもご購読できます。

運営メディア

男性向けお役立ちメディア Coolhomme
就職・転職、エンジニア転職向け求人サイト Rplay