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
アスキー・メディアワークス
売り上げランキング: 58,065
ソフトウェアのバージョン
- 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>
コード解説
- console.logはサーバのコンソールにログを出力しています。
- socket.emit関数でメッセージを送信します。第一引数はイベント名で、サーバとクライアントでイベント名を一致させる必要があります。
- socket.emit('message', { value: msg });のvalueの部分はプロパティの名前なので、任意の名前を指定できます。