nodeをひやかしてみる

概要

    ノンブロッキングなサーバ実装 node.jsをインストールしてSocket.ioをインストールして

    なんていうか暇つぶし。

    目的はGWTでのSocket.io.jsの 薄い本(×)　薄いラッパー実装(○) を作るのでテストする機構が欲しかった。

インストール

    ちょっと前はHomeBrewとかでやってたけど

    GitHubからできるようになってて

    しかもしっかりフォルダで管理できたので、これで汎用だと思う。

    キャンペーンサイトはここ

    http://nodejs.org/

    インストール情報はここ

    https://github.com/joyent/node/wiki/Installation

    Macなら

    Step 3a - Installing on Unix (including BSD and Mac)

    丸コピでいける。

git clone --depth 1 git://github.com/joyent/node.git # or git clone git://github.com/joyent/node.git if you want to checkout a stable tag

cd node

git checkout v0.4.11 # optional.  Note that master is unstable.

export JOBS=2 # optional, sets number of parallel commands.

mkdir ~/local

./configure --prefix=$HOME/local/node

make

make install

echo 'export PATH=$HOME/local/node/bin:$PATH' >> ~/.profile

echo 'export NODE_PATH=$HOME/local/node:$HOME/local/node/lib/node_modules' >> ~/.profile

source ~/.profile

    最初やってたとき、GitHubからのcloneの時点でtimeoutのエラーが出て全俺が泣いた。

    あれはなんだったのか、、

+Socket.io

    サーバサイドにSocket.ioを入れてみる。

    http://socket.io/

    簡単に言うとWebSocketのラッパー。

    ブラウザ側のsocket.io.jsとサーバ側のsocket.ioからなり、

    xhrとかWebSocketとかでPush通信が使える。

インストール(socket.io)

    http://socket.io/#how-to-use

    nodeインストール後であれば、npmコマンドが効くので、

    サイトの内容に従ってインストール。

npm install socket.io

socket.ioで遊ぶ

    サーバサイド/

    下記内容をserversideSocketIO.jsとか適当にファイルにして、nodeで実行する。

var app = require('http').createServer(handler)

  , io = require('socket.io').listen(app)

  , fs = require('fs')

app.listen(80);

function handler (req, res) {

  fs.readFile(__dirname + '/index.html',

  function (err, data) {

    if (err) {

      res.writeHead(500);

      return res.end('Error loading index.html');

    }

    res.writeHead(200);

    res.end(data);

  });

}

io.sockets.on('connection', function (socket) {

  socket.emit('news', { hello: 'world' });

  socket.on('my other event', function (data) {

    console.log(data);

  });

});

    →serversideSocketIO.js

node serversideSocketIO.js

    これでサーバ起動。

    次にクライアントサイド/

    下記内容をclientsideSocketIO.htmlとかにして、デスクトップとかに置いとく

<script src="/socket.io/socket.io.js"></script>

<script>

  var socket = io.connect('http://localhost');

  socket.on('news', function (data) {

    console.log(data);

    socket.emit('my other event', { my: 'data' });

  });

</script>

    →clientsideSocketIO.html

"/socket.io/socket.io.js"の場所は、環境ごとに異なると思う。

    の部分、もちろん自分で用意しないとダメ。

    自分は、socket.ioインストール後、spotlightに聞いてみたら、

    /Users/俺/node_modules/socket.io/node_modules/socket.io-client/dist

    にあったので何も考えずにそれを使った。

    この状態でclientsideSocketIO.htmlをブラウザで開くと、通信が発生する。

    ウインドウを開いた時点で通信開通、閉じた時点でdiscard、とか出る。

    

    

以上。

GCCでコンパイルしたものの中身を見る

    http://www.codethecode.com/projects/class-dump/

    この辺が使える。

    

    コマンドラインで、アプリのパッケージのなかみを指定する。

    class-dump-3.3.3/class-dump /Applications/GitHub.app/Contents/MacOS/GitHub

    

GWTでSVGを書く

概要
    GWTからSVGを描画するには、複数種類のライブラリが存在している。
    今回はその中で、lib-gwt-svg-0.5.2 を使ってみた。
    Raphaël をGWTから使ったライブラリ 
    http://code.google.com/p/raphaelgwt/

    とかもあったんだけど、これはRaphaël.jsに依存する。
    管理するものが増えるので、できれば無いものを、、と探していたら、
    あった。

    LIB-GWT-SVG
    http://www.vectomatic.org/lib-gwt-svg


    更新頻度もごく最近まであり、バージョンも順調に上がってるみたい。

    動作してるサンプルのコードも見れる。
    http://www.vectomatic.org/gwt/lib-gwt-svg-samples/lib-gwt-svg-samples.html

    JavaDocもある。
    http://www.vectomatic.org/mvn-sites/lib-gwt-svg/apidocs/?org/vectomatic/dom/svg/OMNode.html

    じゃ、これで。


ダウンロード
    http://code.google.com/p/lib-gwt-svg/
    から、lib-gwt-svg-0.5.2.jar をDL。

    特に頑張らない。




プロジェクトへの組み込み
    DLした	lib-gwt-svg-0.5.2.jar　を、
    適当にソースファイルの近所にlibフォルダとか作っておいておく。

    Eclipseなどを使っている場合は、
    EclipseのPackageExplorerから、ライブラリを右クリック >
    	Build Path >  Add To Build Path とか押す。
        

    これで、ビルド時に lib-gwt-svg-0.5.2.jar が参照されるようになる。
    プロジェクト.gwt.xmlへと、インヘリットの記述を追加する

        <inherits name="org.vectomatic.libgwtsvg"/>

    以上。


Usage
    下地
        HTML svgContainer;
        OMSVGSVGElement svg;
        OMSVGDocument doc;

        svgContainer = new HTML();

        RootPanel.get().add(svgContainer);
        doc = OMSVGParser.currentDocument();
        svg = doc.createSVGSVGElement();
        svgContainer.getElement().appendChild(svg.getElement());


    適当に円
        OMSVGCircleElement drawCircle = doc.createSVGCircleElement(90, 90, 100);
        svg.appendChild(drawCircle);


    文字列
	OMSVGTextElement text = doc.createSVGTextElement(37,145,OMSVGLength.SVG_LENGTHTYPE_PX, "ウェヒヒ");
        text.getStyle().setSVGProperty(SVGConstants.CSS_FILL_PROPERTY,SVGConstants.CSS_RED_VALUE);
        text.getStyle().setSVGProperty(SVGConstants.CSS_STROKE_PROPERTY,SVGConstants.CSS_BLACK_VALUE);
        text.getStyle().setSVGProperty(SVGConstants.CSS_STROKE_WIDTH_PROPERTY, "10");
        text.getStyle().setSVGProperty(SVGConstants.CSS_FONT_SIZE_PROPERTY, "130");

        svg.appendChild(text);		

    円の処理の下とかに書けば出ると思う。
    

可能性を感じている所
    大抵のブラウザはもうSVG力(えすゔいじーりょく)高い
    http://caniuse.com/#search=svg




以上。