小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


【初心者向け】node.js(0.8) + socket.io(0.9x)のサンプルプログラム

はじめに

node.js(0.8) + socket.io(0.8x)でWebSocketを使ったサーバプッシュのサンプルプログラムを作ってみました。

サーバサイドJavaScript Node.js入門
清水俊博 大津繁樹 Jxck 小林秀和 佐々木庸平 篠崎祐輔 高木敦也 西山雄也
アスキー・メディアワークス
売り上げランキング: 23,898

ソフトウェアのバージョン
  • Mac OS X Lion 10.7.5
  • node.js v0.8.16
  • npm@1.1.70
  • express@3.0.5
  • socket.io@0.9.11
事前準備

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

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

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

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

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

sudo npm install express -g
アプリケーションのひな形を自動生成する

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

express -e SampleApp

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

cd SampleApp && npm install

express@3.0.5 node_modules/express
├── methods@0.0.1
├── fresh@0.1.0
├── range-parser@0.0.4
├── cookie-signature@0.0.1
├── buffer-crc32@0.1.1
├── cookie@0.0.5
├── commander@0.6.1
├── debug@0.7.0
├── mkdirp@0.3.3
├── send@0.1.0 (mime@1.2.6)
└── connect@2.7.1 (pause@0.0.1, bytes@0.1.0, crc@0.2.0, formidable@1.0.11, qs@0.5.1)

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

sudo npm install socket.io

├── base64id@0.1.0
├── policyfile@0.0.4
├── redis@0.7.3
└── socket.io-client@0.9.11 (xmlhttprequest@1.4.2, uglify-js@1.2.5, active-x-obfuscator@0.0.1, ws@0.4.25)

4. 続いて、app.jsとviewsディレクトリのindex.ejsを編集していきます。

サーバサイド(app.js)

自動生成されたapp.jsを一部変更します。変更部分にはコメントを入れています。

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path');

var app = express();

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'ejs');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
  app.use(express.errorHandler());
});

app.get('/', routes.index);
app.get('/users', user.list);

server = http.createServer(app); // add
//http.createServer(app).listen(app.get('port'), function(){ // del
server.listen(app.get('port'), function(){ //add
  console.log("Express server listening on port " + app.get('port'));
});

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

// クライアントが接続してきたときの処理
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");
  });
});
// add end
クライアントサイド(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>

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

  <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>

  </body>
</html>
サンプルプログラムの動かし方

1. 以下のコマンドでサーバプログラムが起動します。

node app

2. 複数のブラウザでhttp://localhost:3000/を同時に開きます。
3. テキストボックスに文字を入力して、メッセージを送るボタンを押すと、もう一方のブラウザにメッセージを送ることができます。