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

2012.12.22

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

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

2011.12.01

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

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

2011.5.25

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

はじめに

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

必要なソフトウェア

node.js v0.4.7
npm 0.3.18
socket.io 0.6.17
express 2.2.2

事前準備

node.jsとnpmをインストールしたら、npmコマンドで必要なソフトェアを一括インストールします。

sudo npm install express ejs socket.io -g

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

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

express -t ejs SampleApp

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

サーバサイド（app.js）

require.paths.push('/usr/local/lib/node_modules');
var express = require('express');
var app = express.createServer();
// 3000ポートでプログラムを動作させる
app.listen(3000);
// ソケットを作る
var socketIO = require('socket.io');
// クライアントの接続を待つ(IPアドレスとポート番号を結びつけます)
var socket = socketIO.listen(app);

// クライアントが接続してきたときの処理
socket.on('connection', function(client) {
  console.log(client.sessionId + 'が接続しました。');
  // メッセージを受けたときの処理
  client.on('message', function(msg) {
    console.log(client.sessionId + "'がメッセージを送信しました。(" + msg + ")");
    // つながっているクライアント全員に送信
    client.send(msg);
    client.broadcast(msg);
  });
  
  // クライアントが切断したときの処理
  client.on('disconnect', function(){
    console.log(client.sessionId + 'が切断しました。');
  });
});

// リクエストが来たら、index.ejsの内容をクライアントに出力する
app.get('/', function(req, res){
  res.render('index.ejs', {
    layout: false
  });
});

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

<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = new io.Socket();
// サーバに接続する
socket.connect();
// サーバに接続したとき
socket.on('connect', function(msg) {
  document.getElementById("connectId").innerHTML = 
    "あなたの接続ID::" + socket.transport.sessionid;
});

// メッセージを受けたとき
socket.on('message', function(msg) {
  document.getElementById("receiveMsg").innerHTML = msg;
});

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

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