５分くらいで出来るnode.js(0.6) + socket.io(0.8x)のサンプルプログラム

2012.12.22

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

【初心者向け】node.js(0.8) + socket.io(0.9x)のサンプルプログラム - 大人になったら肺呼吸

2012.01.17追記

以下の手順だと文字化けすることが分かりましたので、修正しました。

はじめに

node.js 0.6がリリースされて、いつのまにやらsocket.ioも0.8になっていたので、node.js(0.6) + socket.io(0.8x)を使ったサーバプッシュのサンプルプログラムを作ってみました。

サーバサイドJavaScript Node.js入門

posted with amazlet at 13.05.31

清水俊博大津繁樹 Jxck 小林秀和佐々木庸平篠崎祐輔高木敦也西山雄也
アスキー・メディアワークス
売り上げランキング: 58,065

Amazon.co.jpで詳細を見る

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

Ubuntu11.10
node.js 0.6.0
npm@1.0.104
express@2.5.0
socket.io@0.8.7

事前準備

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

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

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

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

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

sudo npm install express -g

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

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

express -t ejs SampleApp

2. カレントディレクトリを移動しつつ、必要なライブラリを同時にインストールします。

cd SampleApp && npm install
>ejs@0.4.3 ./node_modules/ejs 
>express@2.5.0 ./node_modules/express 
>├── mkdirp@0.0.7
>├── mime@1.2.4
>├── qs@0.3.1
>└── connect@1.7.2

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

sudo npm install socket.io
>socket.io@0.8.7 ./node_modules/socket.io 
>├── policyfile@0.0.4
>├── redis@0.6.7
>└── socket.io-client@0.8.7

4. 続いて、app.jsとviewsディレクトリのindex.ejsとlayout.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>

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <%- body %>
  </body>
</html>