WebSocketsでWebアプリケーションは次の段階を迎える。node.jsと共に触ってみる。((((oﾟ▽ﾟ)o)))
■準備
npmをインストールする
node.jsのパッケージ管理システムである。
curl http://npmjs.org/install.sh | sh
node-websocket-serverをインストールする
WebSocketsに適した感じのサーバだ。
npm install http://github.com/miksago/node-websocket-server/tarball/master
expressをインストールする
node.jsのフレームワークとでもいうんだろうか。
npm install http://github.com/visionmedia/express/tarball/master
■サーバー側(server.js)
サーバーを作る。→各種イベントをセットアップする。→特にデータが来たらブロードキャストする。といった流れ。
var sys = require('sys');
var ws = require('websocket-server');
var express = require('express');
var app = express.createServer();
var coord = [];
// set up the websokets server
app.configure(function(){
app.use(express.staticProvider(__dirname + '/public'));// 公開ディレクトリをセットアップ
});
var server = ws.createServer({"server" : app});
// set up the events of server
server.addListener(
'listening',
function(){
sys.log('listening');
}
);
server.addListener(
'connection',
function(conn){
sys.log('connection');
if(coord.length > 0){// 最初の接続で最後の位置をクライアントに反映させる
conn.send(coord[coord.length - 1]);
}
conn.addListener(
'message',
function(message){
coord.push(message);
server.broadcast(message);
}
);
}
);
server.addListener(
'close',
function(conn){
sys.log('close');
}
);
server.listen(80);
■クライアント側(/public/client.js)
ドラッグ&ドロップで座標を送信する感じ。データが飛んできたら逆に座標をセットする感じ。ちなみにGoogle Chromeでしか動作テストはしてない。
$(function(){
var conn = new WebSocket("ws://192.168.11.3/");
conn.onmessage = function(e){// データが飛んできた時
var data = JSON.parse(e.data);
$('p#box').css({
"left" : data['left'],
"top" : data['top']
});
}
$('p#box').draggable({
"cursor" : "pointer",
"drag" : function(e, ui){// ドラッグした時
if(conn){
conn.send(JSON.stringify(ui.position));
}
}
});
});
html(/public/index.html)
まぁコンナ感じ。logo.pngにはchromiumのロゴを使用させていただいた。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>title</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/jquery-ui.min.js"></script> <script type="text/javascript" src="client.js"></script> </head> <body> <p id="box"><img src="./img/logo.png" /></p> </body> </html>
■完成
サーバーを起動。
node server.js
ｷﾀ━━━━━━(ﾟ∀ﾟ)━━━━━━ !!!!!
片方を動かすともう片方に反映される！