WebSocketプロトコルのバージョン変更

家のマシンから自分が作ったWebSocketサービスに接続出来なくなったので、少し調べてみたら、
Chrome14からはWebSocketプロトコルのバージョンがdraft10になっていた為でした。
Chrome13まではdraft76で、draft10とは互換性が無いとの事。

使用しているPHPWebSocketはまだ対応していないようですが、下記に関して対応する必要があります。

  $status = '101 Web Socket Protocol Handshake';
  if (array_key_exists('Sec-WebSocket-Key1', $headers)) {
    // draft-76
    $def_header = array(
    'Sec-WebSocket-Origin' => $origin,
    'Sec-WebSocket-Location' => "ws://{$host}{$path}"
    );
    $digest = $this->securityDigest($headers['Sec-WebSocket-Key1'], $headers['S    ec-WebSocket-Key2'], $key3);
  } else {
    // draft-75
    $def_header = array(
    'WebSocket-Origin' => $origin,
    'WebSocket-Location' => "ws://{$host}{$path}"
    );
    $digest = '';
  }

もう少し調べたいところですが、ちょっと時間がないので、、少し落ち着いてから調べます。

こちらに詳しく書かれていました。

twitter × Google maps with WebSocket

twitter API と Google Maps API のmashupサービス twigeo を作りました。
これだけだとありきたりの為、最近話題に上がるWebSocketを使用し、
“ほぼ”リアルタイムにServer => Clientへtweetをpushするようにしています。
誰得なサービスか分からないのですが、、皆さん様々な場所でtweetされているのですね。

WebSocketを実現する為にPHP WebSocketを使用させてもらいました。
PHP WebSocketはチャットのような複数クライアント間でメッセージのやり取りを行いやすいように
設計がされていますが、本サービスではクライアント間のやり取りはなく、
一方的にサーバ側からpushするのみとなりますので、少し手を入れる必要がありました。
また、twitter StreamingAPIを使用する際にOAuthが必要ですので、tmhOAuthを使用しています。
なお、現状WebSocketをサポートしているブラウザは、Chrome, Safariとなります。
Firefoxは次バージョンからサポートされるようです。

現在対応出来ていない仕様やバグは以下です。

  • tagエラー
  • 初期画面で自身の位置情報が固定
  • InのTweet量に対して、Outは視認性を良くする為にSleepを入れている関係上、叙々に配信が遅れてしまう

    • いづれも軽微な対応で済みそうですので、暇をみて対応したいと思います。

    HTML5入門

    入門 HTML5を読み進めています。今まで漠然と理解していた事が、詳細に説明されています。
    まだ読み途中ですが、メモ書き程度に残します。

    HTML5のサポート
    HTML5はひとつの大きなものではなく、個別の機能が集まったものである為、「HTML5のサポート」という言葉は意味をなさない。例えば、Canvasやビデオといった新機能がサポートされているかどうかは、機能毎に異なるということ。

    新機能の内、注目する機能は以下である。

      　

    1. Canvas

      2. 解像度に依存するビットマップ描画機能で、グラフ・ゲームのグラフィックスやビジュアル画像を表示する
      　

    2. video

      3. QuickTimeやFlashは不要となる。HTML5ビデオでは、全てのブラウザでサポートされているコーデックは存在しない。最終的には2種類に絞り込める。MAC系のh264, その他のOggである。
      GoogleによるChrome次期バージョンからのH264の非サポートは、コーデックを巡る主導権争いの１つである。
      　

    3. ローカルストレージ

      4. 従来のクッキーは容量制限があるが、HTML5ストレージはより大きな情報量を扱えるようになる。ローカルストレージのセキュリティだが、コンピュータに物理的にアクセス出来てしまった場合は読み取られる。しかし、ブラウザの中では、自身が保存した値を読んだり変更は可能だが、別サイトが保存した値へのアクセスは出来ない。同一生成元制限（SOP）という。
      　

    4. Web Workers

      5. ブラウザがJavaScriptをバックグラウンドで動作させるための標準的な方法を提供する。同時に動作する複数のスレッドを生成可能となる。
      　

    5. オフラインWebアプリケーション

      6. 文字通り、オフラインで動くアプリケーションで、オンライン状態に戻った際は、オフライン時に行われた処理（例えば、変更など）をサーバ側へアップする。
      　

    6. Geolocation

      7. 該当者（例えば、自分）が、世界のどこにいるのかを検出する機能で、その情報を他人と共有出来る。
      　

    7. inputタイプ

      8. 従来のフォームのinputタイプに定義が多く追加された。
      　

    8. プレースフォルダ

      9. 入力フィールドのプレースホルダを設定出来る。プレースホルダとは、フィールドにヘルプ文のように表示される文字の事。
      　

    9. マイクロデータ

      10. Webページに意味付けを追加する為の標準的な方法であるが、独自フォーマット定義も可能。

    個々の機能については、また読み進めてから検証していくこととします。