Html5, Web Applications 2

HTML5

HTML5, WebApplications 2

とくながたかひさ（ id : totty_jp ）

<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

ii.
今日は、Web Sockets API
サーバーPush型
リアルタイム型
普通のWeb
現行のHttpプロトコルを利用した全てに適用できる！？

メリットの高そうな利用用途
西鉄バス位置情報サービス
モバイル端末向けのデータサービス

<html>5

iii. Indexed Database API
実装されたブラウザが・・・
K/V型のデータストア（＋ index）
検証できる環境が出来るまでご容赦

<html>5

iv. Web Sockets API
クライアントとサーバとの双方向通信を実現
永続的な接続ができる（コネクション張りっぱなし）
リソース的には、都度、コネクションを張ってヘッダを付与したやり
とりよりECOな感じ
リソース的に負荷は、コネクションを接続する際に多く必要とする為

双方向にデータの送信できるということは・・
サーバー＜＝＞クライアント
クライアント＜＝＞クライアント
サーバー＜＝＞サーバー
クライアント＜＝＞サーバー＜＝＞クライアント

HTTPの拡張プロトコル
ただし、永続なので、クローズ処理は、明示的に行う必要がある

<html>5

iv. Web Sockets API
Ajax
サーバーとの通信をポーリングし、そのポーリング期間でメッ
セージが配信される
ポーリング期間中、都度サーバーと接続する為リソースの消費が
多い

Commet
プッシュ方式だが、永続的な接続には、煩雑な作業が必要になる
２つのHTTP接続を使って、双方向通信が実現できる

Web Sockets
１つのソケットで、双方向通信が実現できる
サーバー×クライアント間で、UTF-8なら変換が不要

<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

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

iv. Web Sockets API
Demo

<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

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

v. それで。。
それで。。
前回は、ネットワーク世界のonline/offlineに不可欠となる
技術として、HTML5のオフラインキャッシュ機能の紹介
でした。

今回は、ネットワーク負荷が低くリアルタイム性のある
Web Sockets 機能の紹介でした。

この二つの機能と、他のHTML5によってWebの世界では、
また一つ革新的な時代を迎えるだろうと考えています。

<html>5

Html5, Web Applications 2

More Related Content

What's hot

Similar to Html5, Web Applications 2

Html5, Web Applications 2