html5, web applications 2
TRANSCRIPT
<html>5<html>5
HTML5HTML5HTML5HTML5HTML5HTML5HTML5HTML5
HTML5, WebApplications 2
とくなが たかひさ （ id : totty_jp ）
<html>5<html>5
i. .
� 名前 : 徳永 貴久
� 所属 : EC-One
� 業務 : SE or PG (Java, Ruby, Flex, etc...)
� 性別 : ♂
� 年齢 : そのくらいです。
� blog : http://d.hatena.ne.jp/totty_jp/
� twitter : totty_jp
<html>5<html>5
ii.
� 今日は、Web Sockets API� サーバーPush型
� リアルタイム型
� 普通のWeb
� 現行のHttpプロトコルを利用した全てに適用できる！？
� メリットの高そうな利用用途� 西鉄バス位置情報サービス
� モバイル端末向けのデータサービス
<html>5<html>5
iii. Indexed Database API
� 実装されたブラウザが・・・� K/V型のデータストア（＋ index）
� 検証できる環境が出来るまでご容赦
<html>5<html>5
iv. Web Sockets API
� クライアントとサーバとの双方向通信を実現� 永続的な接続ができる（コネクション張りっぱなし）
� リソース的には、都度、コネクションを張ってヘッダを付与したやりとりよりECOな感じ
� リソース的に負荷は、コネクションを接続する際に多く必要とする為
� 双方向にデータの送信できるということは・・
� サーバー ＜＝＞ クライアント
� クライアント ＜＝＞ クライアント
� サーバー ＜＝＞ サーバー
� クライアント ＜＝＞ サーバー ＜＝＞ クライアント
� HTTPの拡張プロトコル� ただし、永続なので、クローズ処理は、明示的に行う必要がある
<html>5<html>5
iv. Web Sockets API
� Ajax� サーバーとの通信をポーリングし、そのポーリング期間でメッ
セージが配信される
� ポーリング期間中、都度サーバーと接続する為リソースの消費が多い
� Commet� プッシュ方式だが、永続的な接続には、煩雑な作業が必要になる
� ２つのHTTP接続を使って、双方向通信が実現できる
� Web Sockets� １つのソケットで、双方向通信が実現できる
� サーバー×クライアント間で、UTF-8なら変換が不要
<html>5<html>5
iv. Web Sockets API
� 対応ブラウザ� Google Chrome� Firefox� Safari � ？
� 対応サーバー（ソフトウェア）� Kaazing
� MinaというフレームワークでJava実装サーバー
� Jetty� Java純正サーバー
� apache（pywebsocket）� Python向け組み込み型モジュール
� 利用ポート（Httpと同じ）� 80番
� default port
� 443番� secure port
<html>5<html>5
iv. Web Sockets API
� Web Sockets Interface� Constractor
� var ws = new WebSocket(url, protocol)� ws://domain/hello ⇒ 平文通信 80ポート� wss://domain/hello ⇒ 暗号化通信 413ポート
� EventHandler� ws.onopen
� 通信開始イベント
� ws.onclose� 通信終了イベント
� ws.onmessage� メッセージの受信イベンﾄ
� Method� ws.send(“Hello WebSocket”)
� メッセージの送信
� ws.close（）� 通信終了
� Attribute� URL
� WebSocketに渡されたURLの解決した結果
� readyState� CONNECTING = 0 ・・・ コネクションは確立されていない� OPEN = 1 ・・・ コネクションは確立されている（通信可能）� CLOSED = 2 ・・・ コネクションは閉じている
� bufferedAmount� まだ、送信されていないデータ（メッセージ）のバイト数
<html>5<html>5
iv. Web Sockets API
� Demo
<html>5<html>5
iv. Web Sockets API
� Sample� websocketSample.html
<script>
var ws = new WebSocket("ws://localhost:81");
ws.onopen = openConnection;
ws.onclose = closeConnection;
ws.onmessage = recieveMsg;
window.onunload = closeConnection;
function openConnection() { //null }
function closeConnection() { ws.close(); }
function recieveMsg(evt) {
log("message receive -> ", evt.data);
}
function sendMsg() {
var msg = document.getElementById("msg").value;
ws.send(msg);
}
</script>
<html>5<html>5
iv. Web Sockets API
� Sample� websocketSample.html（続き）
<body>
<section>
<h2>Web Socket Demo</h2>
<div>
<table>
<tr>
<th>Mesaage</th>
<th colspan="2"> </th>
</tr>
<tr>
<td><input type="text" id="msg"></td>
<td><button onClick="sendMsg()"> </button></td>
</tr>
</table>
<table id="logTable"></table>
</div>
</section>
</body>
<html>5<html>5
v. それでそれでそれでそれで。。。。。。。。
� 前回は、ネットワーク世界のonline/offlineに不可欠となる技術として、HTML5のオフラインキャッシュ機能の紹介でした。
� 今回は、ネットワーク負荷が低くリアルタイム性のあるWeb Sockets 機能の紹介でした。
� この二つの機能と、他のHTML5によってWebの世界では、また一つ革新的な時代を迎えるだろうと考えています。