HTML5の仕様も、コミュニティの皆さんも動きが速すぎてすっかり置いてかれています。
とはいえ、HTML5は勉強しておいて絶対損はないはずなので、
マイペースで頑張りたいと思います。。

そんな中、今日、
噂のnode.websocket.jsでサーバサイドJSとHTML5 WebSocketを体験してみたの巻 - ダウンロードたけし（寅年）の日記
Real time online activity monitor example with node.js and WebSocket @ Bamboo Blog
なんていう素敵な記事を見つけました。
Apacheは好きだけどPythonはちょっと・・・な僕でもこれならできるはず！と
初めてのWeb Socketsに挑戦してみました。

というわけで、改めてお勉強。

まずはAPI仕様。（プロトコルは長いし英語なのでまた今度）
W3C - 『The Web Sockets API』日本語訳 - HTML5.JP
うん、これだけじゃわからんですね^^

デモとか見て勉強しよう。

こてさきAjax:apache+mod_pywebsocetを用いたliteなwebsocketsチャットサンプル - livedoor Blog（ブログ）
pywebsocketの例。サーバサイドの処理の説明がわかりやすいです。

こてさきAjax:apache + web sockets (pywebsocket) tips #0 - livedoor Blog（ブログ）
こてさきAjax:lite websocket チャットサンプルを更新しました。 - livedoor Blog（ブログ）
引き続きpywebsocket。
Origin checkとHeartBeatがキーワードというかいつかハマリそうな予感。
覚えておこう。

こてさきAjax:websocketでは、encodeURIComponet()は使うべきではない - livedoor Blog（ブログ）
データはUTF-8で送受信するので、encodeURI()しなくても良いと、ふむふむ。

なんとなくイメージが湧いてきた。
プレゼン資料とかも漁ってみる。
（やっぱシーケンスがあるとわかりやすいですね！）

WebSocketでリアルタイムWeb
かなり噛み砕いた説明でわかりやすいです。

100113_opera webkit勉強会(websocket)
こてさきAjax:websocket関連の説明png - livedoor Blog（ブログ）
図がいっぱい。素敵。

【特集】詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 (10) Web Sockets | エンタープライズ | マイコミジャーナル
Kaazingを使ったデモ。初心者を切り捨てない感じで助かります。

そろそろ良いかな…よし、やってみよう！

node.jsのインストール

node.jsのサイトからnode-v0.1.26.tar.gzをダウンロード。

cd node-v0.1.26/
./configure —prefix=/Users/t/node.js/
※ prefix指定はできない？

./configure
※ 諦めてそのままインストールする。

make
sudo make install

which node
/usr/local/bin/node

何事もなく終了。
※ ホントはユーザ権限でインストールしたかったけど・・・

Hello, node.js

とりあえず、指定ディレクトリをlsして返すプログラムを書いてみました。
queryから取ろうと思ったけど、うまく動かないメソッドとかもあったのでやめときました。

vi ls.js

var sys = require('sys');

var filename = process.ARGV[2];

var http = require("http");
http.createServer(function(req, res){
	res.sendHeader(200,{"Content-Type": "text/html; charset=UTF-8"});
	sys.exec('ls -alF ' + filename).addCallback(function _exec(stdout, stderr) {
		res.sendBody(stdout);
		res.finish();
	});  
}).listen(8000);
:wq

node ls.js .

[別ターミナルで]
telnet localhost 8000
GET / HTTP/1.1
host:localhost

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
Transfer-Encoding: chunked

1cc
total 80
drwxr-xr-x   9 t  staff   306  1 25 00:17 ./
drwxr-xr-x+ 47 t  staff  1598  1 24 23:27 ../
-rw-r--r--@  1 t  staff  6148  1 25 00:17 .DS_Store
-rwxr-xr-x@  1 t  staff   304  1 24 23:42 example.js*
-rwxr-xr-x@  1 t  staff   329  1 24 23:49 log.txt*
-rwxr-xr-x@  1 t  staff   334  1 25 00:17 ls.js*
drwxr-xr-x@ 20 t  staff   680  1 24 23:35 node-v0.1.26/
drwxr-xr-x   5 t  staff   170  1 25 00:17 old/
-rwxr-xr-x@  1 t  staff   601  1 24 23:50 tail.js*
こんな感じで返ってきます。

Hello, Web Sockets

ようやく本題・・・ですが眠いので既存サンプルを動かすだけにしときます。

git clone git://github.com/Guille/node.websocket.js.git
node.websocket.js at masterをチェックアウト

cd node.websocket.js

cp test/test.html ~/apache/htdocs/
apache上にクライアントを配置 

vi ~/apache/htdocs/test.html
var webSocket = new WebSocket('ws://localhost:8000/time');
ポートを8000に変更（apacheと競合してたので）

node runserver.js --port="8000"
Web Socketsサーバを起動

apachectl start
apacheを起動（8080を使ってます）

Google Chrome 4+からlocalhost:8080/test.htmlにアクセスすると、
時刻がリアルタイムで更新されるサンプルが表示されます。
（地味ですが確かにpullではなくpushで実現されています。）

まとめ

思っていたより手軽に触れそうです。
僕程度のスキルでも2時間程度で動かすとこまではできました。

さて、なんか面白いことできないかなー。