WebSocketsに触ってみる

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

ｷﾀ━━━━━━(ﾟ∀ﾟ)━━━━━━ !!!!!

片方を動かすともう片方に反映される！

TrackBack URL :

Comments (0)

@blog.justoneplanet.info