53ningen.com

WebSocket はじめのいっぽ

WebSocket はサーバー/クライアント間での効率的な双方向通信を実現するための仕組みです。チャット・グループウェア・ゲームなどで利用されることが多いです。サーバー側は WebSocket に対応している node.js などを利用します。

WebSocket の動作とクライアント側の実装

WebSocket による通信では、まずサーバーとのコネクションを確立を行います。クライアント側からサーバー側へ HTTP でコネクション確立のリクエストを送り、サーバー側が接続元やプロトコルを確認した後、接続可否のレスポンスを返します。接続が許可された場合、クライアント側は WebSocket によるコネクションを開始します。これをハンドシェイクと呼びます。クライアント側のハンドシェイクは以下の一行で済みます。

//  Insatiate WebSocket Object
var websocket = new WebSocket('ws://hoge.com/foo', 'protocol');

コネクションが確立すると onopen イベントハンドラ、切断さ...

HTML5のAPIまとめ

HTML5 と JavaScript と組み合わせて利用できる API について概要をまとめてみた。

Drag and Drop API

以前から mouseup,mousedown などのイベントが存在したが、HTML5 では draggable 属性に true と設定するだけで、ほぼ全ての要素がドラッグアンドドロップ可能になる。ドラッグする要素には draggable, ondragstart, id 属性の設定が必須。またドロップする要素には ondragenter, ondragleave, ondragover, ondrop 属性を設定できる。

ドラッグアンドドロップでのデータ受け渡しには DataTransfer を用いる。具体的な実装は以下のようにやる。

function onDrop(e) {
  var text = e.dataTransfer.getData('text/plain')
  //  以下略...
}

File API

この API を用いることにより、ファイルの読み書きをアドオンなしで行うことが出...