WebSocketの使い方と実際に使えそうなアプリを考えてみる

に(ry

Hello world.

B14(B3)のSasakiです．

本日12/19はわたしが更新します.


ちゅーわけで WebSocket
ってなんですか！？！？

• 通信規格のひとつ
• １つのコネクションで全てのデータの送受信ができる．

そういうことです。 WebSocketの接続を確立するためには，
クライアント側はハンドシェイク要求を送信，
サーバ側はハンドシェイク応答
を返さなければなりません。

以下はウェブブラウザがサーバに送る要求

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: AAA
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

サーバ側が返す応答

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: BBB
Sec-WebSocket-Protocol: chat

…という感じで、接続が確立できるます．


で、WebSocketにはJavaScriptAPIが用意されてます．
これが、比較的充実している模様．

IE	FireFox	Chrome	Safari	iOS Safari	Android Browser
10.0	○	○	6.0	12.1	×

WebSocket接続を確立する。

  //接続開始
  var ws = new WebSocket('ws://localhost:2000/chat');

  //確立したら呼び出される
  ws.onopen = dunction(){};

  //データの送信
  ws.send('Hello');

  //データが到着したら呼び出される
  ws.onmessage = function(e){
    var data = e.data;
  }

  //接続を切る（クライアントから）
  ws.close();

  //（サーバから）データがついたら呼出し
  ws.onclose = function(e){
    var wasClean = e.wasClean; 
    var code = e.code;
    var reason = e.reason;
  }

などなどの基本操作がAPIとして用意されてます．

めっちゃ便利．



で、そもそも、何に使えんのこれ、って話です


ミソは、大量のデータをサーバに送れること
であると思ってます．
で、双方向通信なのでサーバからクライアントにもデータ渡したりができる(?)の．

つまり、

• チャット→多数のテキストデータを送信/DBに更新があったらクライアントに反映
• おえかき→常に動くカーソルの座標を送信し続ける/カーソルの動きが他のクライアントから見られる

などのサービスに用いられるのですね．


ちなみに，実装において一番ポピュラーなのはnode.jsだそう．
phpでもできます．


実装編は、また今度ということで許してください．