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
キタ━━━━━━(゚∀゚)━━━━━━ !!!!!
片方を動かすともう片方に反映される!