50行くらいで作るnode.js + socket.io(0.7x)のサンプルプログラム

2011.12.02追記

最新版で動作するようエントリを修正しました。

５分くらいで出来るnode.js(0.6) + socket.io(0.8x)のサンプルプログラム - 大人になったら肺呼吸

はじめに

先日、リアルタイム通信を実現するライブラリであるsocket.ioの0.7がリリースされました。
0.7になってからメッセージの送受信周りが大きく変わっていて、既存のプログラムが動かなくなってしまったので、新たにnode.js + socket.io(0.7x)を使ったサーバプッシュのサンプルプログラムを作ってみました。

Socket.IO: the cross-browser WebSocket for realtime apps.

はじめてのNode.js -サーバーサイドJavaScriptでWebアプリを開発する-

posted with amazlet at 13.05.25

松島浩道
ソフトバンククリエイティブ
売り上げランキング: 21,749

Amazon.co.jpで詳細を見る

ソフトウェアのバージョン

Mac OS X 10.6.7
node.js 0.4.2
socket.io@0.7.2

事前準備

1. node.jsをインストールします。

wget http://nodejs.org/dist/node-v0.4.2.tar.gz
tar zxvf node-v0.4.2.tar.gz
cd node-v0.4.2
./configure
make
sudo make install
node -v
>v0.4.2

2. npmをインストールします。

sudo curl http://npmjs.org/install.sh | sudo sh

3. expressをグローバルインストールします。

sudo npm install express -g

アプリケーションのひな形を自動生成する

1. 以下のコマンドでサンプルアプリケーションのひな形を作ります。

express -t ejs SampleApp
cd SampleApp/

2. 必要なライブラリをローカルインストールします。node_moduleディレクトリの配下にライブラリがインストールされます。

sudo npm install express ejs socket.io

3. ひな形ができあがったら、そのうちapp.jsとviewsディレクトリのindex.ejsを編集していきます。

サーバサイド（app.js）

自動生成されたapp.jsの末尾に以下のコードを追加します。

// ソケットを作る
var socketIO = require('socket.io');
// クライアントの接続を待つ(IPアドレスとポート番号を結びつけます)
var io = socketIO.listen(app);

// クライアントが接続してきたときの処理
io.sockets.on('connection', function(socket) {
  console.log("connection");
  // メッセージを受けたときの処理
  socket.on('message', function(data) {
    // つながっているクライアント全員に送信
    console.log("message");
    io.sockets.emit('message', { value: data.value });
  });
  
  // クライアントが切断したときの処理
  socket.on('disconnect', function(){
    console.log("disconnect");
  });
});

クライアントサイド（index.ejs）

<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect('http://localhost:3000');
socket.on('connect', function(msg) {
  console.log("connet");
  document.getElementById("connectId").innerHTML = 
    "あなたの接続ID::" + socket.socket.transport.sessid;
  document.getElementById("type").innerHTML = 
    "接続方式::" + socket.socket.transport.name;
});

// メッセージを受けたとき
socket.on('message', function(msg) {
  // メッセージを画面に表示する
  document.getElementById("receiveMsg").innerHTML = msg.value;
});

// メッセージを送る
function SendMsg() {
  var msg = document.getElementById("message").value;
  // メッセージを発射する
  socket.emit('message', { value: msg });
}
// 切断する
function DisConnect() {
  var msg = socket.socket.transport.sessid + "は切断しました。";
  // メッセージを発射する
  socket.emit('message', { value: msg });
  // socketを切断する
  socket.disconnect();
}
</script>

<h1>socket.ioのサンプルプログラム</h1>
<div id="connectId"></div>
<div id="type"></div>
<br>
<input type="text" id="message" value="">
<input type="button" value="メッセージを送る" onclick="SendMsg()">
<input type="button" value="切断する" onclick="DisConnect()">
<div id="receiveMsg"></div>