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>

サンプルプログラムの動かし方

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

node app.js

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

コード解説

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

実践JS サーバサイド JavaScript 入門

posted with amazlet at 11.04.27

井上 誠一郎
技術評論社
売り上げランキング: 2480

Amazon.co.jp で詳細を見る

以下のエントリもあわせてどうぞ

• node.js + websocketで他のマシンから接続できない場合の対処方法
• 2011å¹´ node.jsに関する記事のブクマ数ランキングTOP50を作ってみたよ。
• node.jsのデバッグ(ステップ実行)ができるnode-inspectorの使い方
• ５分くらいで出来るnode.js(0.6) + socket.io(0.8x)のサンプルプログラム
• 新しくなったdotcloudでnode.jsのHello Worldを動かしてみたよ。