node.jsメモ - はらこメモ

■node.jsについて
・JavaScriptで記述された処理をサーバーサイドで実行できるサーバのこと。
・Socket.Ioを利用してリアルタイム通信が可能（WebSocket通信）。
　→ブラウザでF５なのでサイトをリロードしなくても最新データが取得でき、
　　非同期通信であるAjaxとは異なり、ブラウザからのリクエストのがなくてもサーバからプッシュできる。

■node.jsのインストール

node.jsのサイトでインストールをクリックしてファイルをダウンロードする。

tar.gzをダウンロードされるので解凍する。

 tar zxvf node-vxx.xx.xx.tar.gz
 cd node-vxx.xx.xx
 ./configure
 make
 make install

モジュールのインストール
・npmというコマンドでnodejsのモジュールをインストールすることができる。
・expressは、nodejsのWEBフレームワーク
・socket.ioは、WebScoketのモジュール

npm install socket.io express

※-gオプションありの場合は/usr/local/lib/node_modules/にインストールされる（CentOSの場合）

gオプションなしの場合はカレントディレクトリにインストールされる。

■チャットアプリ
※Web+DB press Vol71にチャットアプリが紹介されていたので動かしてみた。
http://gihyo.jp/magazine/wdpress/archive/2012/vol71

σ(・_・)なりにコメントを"φ(･ｪ･o)~ﾒﾓﾒﾓ。

Server.js

// Expressフレームワークの生成
var express = require('express')
  , http = require('http')
  , app = express()
  ;

//公開ディレクトリ指定
app.use(express.static(__dirname + '/public'));

//ポートの指定
var server = http.createServer(app).listen(3000);
console.log('server start:', 3000);

// Socket.IOの生成
var io = require('socket.io')
  , io = io.listen(server)
  ;

//接続時の処理
io.sockets.on('connection', function(socket) {
　//ログインされたことを通知
  io.sockets.emit('login', socket.id);
　
  //書き込みがpostされたときの処理
  socket.on('post', function(data) {
　　//postされたデータをすべてのユーザーに送信
    io.sockets.emit('post', { id: socket.id, post: data }); 
  });
});

クライアント側
chat.js

$(function() {
  var socket   = io.connect()
    , $posts   = $('ul#posts')
    , $message = $('input#message')
    ;

  //ログイン通知を受け取ったときの処理
  socket.on('login', function(data) {
    var $li = $('<li>').text(data + ' さんがログインしたよ');
    $posts.prepend($li);
  });

　//POST通知を受け取ったときの処理
  socket.on('post', function(data) {
    var $li = $('<li>').text(data.id + ' さんが言った ' + data.post);
    $posts.prepend($li);
  });

  //送信ボタンを押したときの処理
  $('input#update').on('click', function(e) {
    var message = $message.val();
    if (message.length === 0) return;
    socket.emit('post', message);
    $message.val('');
  });
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>chat</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="/chat.js"></script>
  </head>
  <body>
    <h1>chat</h1>
    <input id="message" type="text"></input>
    <input id="update" type="submit" value="update"></input>
    <ul id="posts"></ul>
  </body>
</html>