小さい頃はエラ呼吸

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


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


2012.12.22

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

2011.12.01

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

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>
サンプルプログラムの動かし方

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

node app.js

複数のブラウザでhttp://localhost:3000/にアクセスします。

コード解説
  • console.logはサーバのコンソールにログを出力しています。
  • client.send(msg);はメッセージを送信してきたクライアントにのみメッセージを送信します。
  • client.broadcast(msg);はソケットにつながっているクライアントすべて(メッセージ送信者は除く)にメッセージを送信します。
  • クライアントサイドでもsocket.transport.sessionidでコネクション番号を取得できます。

実践JS サーバサイド JavaScript 入門
井上 誠一郎
技術評論社
売り上げランキング: 2480