WebSocketがつなぐ未来のお話

自己紹介

• かみやん (Twitter@kamiyam)
• システム開発会社
• ほとんどWebのシステム
• Java・C#

最近はクライントサイド(HTML5・Javascript)の勉強をしてます。

アジェンダ

• WebSocketって何？
• WebSocketを使ったデモ
• ところで・・・
• まとめ

WebSocketって何？

• クライアント⇔サーバ間をつなぐ新しいプロトコルの1つです
• WebSocketの頭文字『ws://～』 or 『wss://～』
• 元々はHTML5の仕様の一部だった
• 現在は単独のプロトコル規格として策定中（プロトコルバージョンは76）
• WebSocketはサーバからもクライアントからも通信を行える完全双方向通信

HTTPプロトコルイメージ

Ajax(httpリクエスト）は都度コネクションを貼り、レスポンスを待つ

WebSocketプロトコルイメージ

WebSocketは一度コネクションを貼ると、通信をそのwsコネクション上でやり取りする

Ajaxのように都度コネクションを貼る必要が無くなるので、結果通信ロスが減る

どうやって使うの？

1. 一度httpプロトコル（要は普通にブラウザ）で画面表示
2. javascriptからwsオブジェクトをURL指定で生成
3. httpの場合の接続先：『ws://exsample.com』
4. httpsの場合の接続先：『wss://exsample.com』
5. これだけでクライアント⇔サーバの双方向通信が可能になります

クライアント実装

接続自体は非常に簡単

<script type="text/javascript">

var protocol = ( location.protocol == "https:" ) ? "wss" : "ws";
var url = protocol + "://" + "exsample.com";
var websocket = new WebSocket( url );
				
//WebSocketのイベントの登録
websocket.addEventListener( "open", openFunc, false );
websocket.addEventListener( "close", closeFunc, false );
websocket.addEventListener( "message", receiveMessage, false );

getElementById("button").addEventListener( "click", sendMessage, false );

function sendMessage()
{
	websocket.send( "送信する文字列とかJsonとか" );
}

function receiveMessage( msg )
{
	alert ( msg.data );
}
</script>
		  

サーバサイド実装

javaのWebSocketインターフェース

クライアントのイベント処理に応じて"onHogeHoge"が呼ばれる

    
import java.io.IOException;

public interface WebSocket
{
    public final byte LENGTH_FRAME = ( byte )0x80;
    public final byte SENTINEL_FRAME = ( byte )0x00;
    void onConnect( Outbound outbound );
    void onMessage( byte opcode, String data );
    void onFragment( boolean more, byte opcode,byte[] data, int offset, int length );
    void onMessage( byte opcode, byte[] data, int offset, int length );
    void onDisconnect();
    
    public interface Outbound
    {
        void sendMessage( String data ) throws IOException;
        void sendMessage( byte opcode, String data ) throws IOException;
        void sendMessage( byte opcode, byte[] data, int offset, int length ) throws IOException;
        void sendFragment( boolean more, byte opcode,byte[] data, int offset, int length ) throws IOException;
        void disconnect();
        boolean isOpen();
    }
}
		  

※jetty-websocket-7.2.0.v20101020.jarより

WebSocketを使った実装一例

(Jetty7では)Outboundをサーバ側がクライアントごとに名前をつけてコレクションして、
クライアント側から受けたメッセージをすべてのクライアントに流せばチャットなんかが作れます。

中の人はどうすればいいの？

WebSocketに対応できるサーバが必要

JAVA

Jetty7

Python

Apache + mod_pywebsocket

JavaScript(ServerSide!)

node.js

まとめ

• WebSocketは双方向通信プロトコル
• HTTPに比べ通信コストが軽量
• やっぱり、まだまだ策定段階
• この資料を書いている途中（9日）、Firefox4(Beta8)ではWebSocketの機能を一時的に無効化と発表したり
• リアルタイムWeb

多謝！

今回、中西 祐介さん(Twitter@hogenishi)のjQueryプラグイン”mukiSlide.js”を使わせていただきました。
ありがとうございます！

Twitter@hogenishi

http://twitter.com/#!/hogenishi

http://yusukenakanishi.com/

初jQueryプラグイン！HTMLのスライド mukiSlide.js

http://labs.yusukenakanishi.com/2010/03/13/mukislide/

mukiSlideデモ

http://factory.yusukenakanishi.com/javascript/jquery/plugin/mukislide/