こんばんは！@kakeyangです。

僕達の部では、月に2回程度勉強会を開催しています。

知識やノウハウの共有
先行技術の調査

が目的です。
今回は、その勉強会の内容をちょっとだけ紹介します。

今更感はあるのですが、今回はWebSocketに関して軽く調べてみましたので、
簡単にまとめてみたいと思います。

まずは、「WebSocket」の盛り上がりっぷりから。
はてなブックマークで月毎にWebSocket関連記事（3user以上）を検索してみると・・・

2010年01月・・・11件
2010年02月・・・0件
2010年03月・・・0件
2010年04月・・・9件
2010年05月・・・17件
2010年06月・・・26件
2010年07月・・・30件
2010年08月・・・20件
2010年09月・・・15件
2010年10月・・・8件
2010年11月・・・0件
2010年12月・・・0件

あれー！？夏場を峠に盛り下がってる！？
・・・ということは気にせずに進めます。。。

そもそもWebSocketって何？

WebSocketは、クライアントとサーバー間で双方向通信を実現するための仕組みです。

もともとHTML5の一機能として仕様の策定が進められていました。

これにより、手軽にハイパフォーマンスでリアルタイムな
Webサービスを実現することが可能となります。

対応ブラウザ

まだ仕様策定中のため、対応ブラウザは少ないです（本記事エントリ時点）。
仕様は2011年5月完成目標とのことです。

仕様バージョン75以前・・・safari／Chrome4、5
仕様バージョン76・・・Firefox4／Chrome6

WebSocketってどんな技術？

通信方式に関する技術なので、従来のHTTP通信と比較して説明します。

HTTP同期通信

f:id:k_chindamaikul:20150722182510j:plain

画面遷移する。
表示の切り替えはページ単位。
通信が全て完了しないと次に行けないので、重いページを開こうとしてしまった時ウザイ。

ajaxによる非同期通信

f:id:k_chindamaikul:20150722182544j:plain

画面遷移しない。
表示の切り替えはデータ単位。
サーバからのメッセージをほぼリアルタイムに反映。
結構PCのリソースを食う。
サーバ側からプッシュできない。ブラウザからポーリングすれば似た様なことはできる。

WebSocketによる通信

f:id:k_chindamaikul:20150722182609j:plain

画面遷移しない。
表示の切り替えはデータ単位。
通信毎に新しいコネクションを貼る必要がない上に、通信量が少ない。
仕様策定中で、頻繁に仕様が変更される。

サンプルコード

WebSocketを実現するには、ブラウザ側とサーバ側でプログラムを書く必要があります。

ここでは、サーバ側のサンプルをちょっとだけ書いてみました。
サーバ側のプログラムには、node.jsを使用しました。

node.jsとは

node.jsとはスタンドアロンのJavaScriptプログラム上でイベント駆動I/Oを実現する

フレームワーク。JavaScriptエンジンにはGoogle V8エンジンを採用しています。

動作が速いこと
大量のアクセスをさばけること

という設計思想で構築されている（っぽい）。

サーバにnode.jsをインストール

以下のURLより最新版のソースコードをダウンロード、makeします。

http://nodejs.org/dist/

$ wget http://nodejs.org/dist/node-v0.2.6.tar.gz
$ tar xvzf ./node-v0.2.6.tar.gz
$ cd node-v0.2.6
$ ./configure
$ make
'build' finished successfully (2m11.139s)
$ make install
'install' finished successfully (0.122s)

とりあえずnode.js本家サイトのサンプルで試してみる

以下のソースコードを適当なディレクトリに配置。

// test.js
var sys = require('sys'),
          http = require('http');
var count = 0;
http.createServer(function (request, response) {
    count ++;
    sys.log(count);
    response.writeHead(200, {'Content-Type': 'text/plain'});
    response.end('Hello\n');
}).listen(8124);
sys.log('Server running at http://127.0.0.1:8124/');

node.jsを起動

$ node ./test.js &
$ 13 Jan 16:11:19 - Server running at http://127.0.0.1:8124/
$ netstat &#8211;an | grep 8124
$ tcp        0      0 0.0.0.0:8124                0.0.0.0:*                   LISTEN

おぉ！ちゃんとListenしてる！