最近、リアルタイムWebが面白い

44

description

2013-07-20開催の「第26回オープンラボ岡山」のセッション資料 http://local.aguuu.com/events/19055

Transcript of 最近、リアルタイムWebが面白い

Page 1: 最近、リアルタイムWebが面白い
Page 2: 最近、リアルタイムWebが面白い

••

••

••

Page 3: 最近、リアルタイムWebが面白い

••

••

Page 4: 最近、リアルタイムWebが面白い

• olojp.net•

Page 5: 最近、リアルタイムWebが面白い
Page 6: 最近、リアルタイムWebが面白い

Page 7: 最近、リアルタイムWebが面白い

Page 8: 最近、リアルタイムWebが面白い
Page 9: 最近、リアルタイムWebが面白い

Page 10: 最近、リアルタイムWebが面白い

•サーバの変化 リアルタイム

Page 11: 最近、リアルタイムWebが面白い

※イメージと概念です。(実際に、これから説明するような仕組みに準じているかは知りません:p)

Page 12: 最近、リアルタイムWebが面白い

bit.ly/olo26-3

Page 13: 最近、リアルタイムWebが面白い

shootr.signalr.net

Page 14: 最近、リアルタイムWebが面白い
Page 15: 最近、リアルタイムWebが面白い

Page 16: 最近、リアルタイムWebが面白い

クライアント サーバ

Request

「データくださいな!」

Response

「はい、どうぞ!」

Page 17: 最近、リアルタイムWebが面白い

クライアント サーバ

「データをどうぞ」

Page 18: 最近、リアルタイムWebが面白い
Page 19: 最近、リアルタイムWebが面白い

Page 20: 最近、リアルタイムWebが面白い

••

クライアント サーバ

「変更ある?」

「ない」

「変更ある?」

「あったよ!」

Page 21: 最近、リアルタイムWebが面白い

••

••

Page 22: 最近、リアルタイムWebが面白い

••

Page 23: 最近、リアルタイムWebが面白い

Page 24: 最近、リアルタイムWebが面白い

クライアント サーバ

タイムアウトを長くし、応答を保留

「変更ある?」

「今んとこない」

「変更ある?」

変更があったら即、応答

「キタコレ」

Page 25: 最近、リアルタイムWebが面白い

••

••

••

Page 26: 最近、リアルタイムWebが面白い

Page 27: 最近、リアルタイムWebが面白い

クライアント サーバ

WebSocketのコネクション作成

お互い、任意のタイミングで通信を投げる

Page 28: 最近、リアルタイムWebが面白い

Page 29: 最近、リアルタイムWebが面白い

var ws;

// 接続ws = new WebSocket('ws://hoge.server.com/ServerApp/');

// 通信が来た時の処理ws.onmessage = function(e) {

// サーバから通信が来た時の処理を書くalert(e.data);

};

// データの送信(sentDataに送るデータが入ってるとして)ws.send(sentData);

Page 30: 最近、リアルタイムWebが面白い

••

Page 31: 最近、リアルタイムWebが面白い
Page 32: 最近、リアルタイムWebが面白い

••

Page 33: 最近、リアルタイムWebが面白い

••

••

Page 34: 最近、リアルタイムWebが面白い

••

Page 35: 最近、リアルタイムWebが面白い

••

••

••

Page 36: 最近、リアルタイムWebが面白い
Page 37: 最近、リアルタイムWebが面白い
Page 38: 最近、リアルタイムWebが面白い

Page 39: 最近、リアルタイムWebが面白い

••

••

Page 40: 最近、リアルタイムWebが面白い

Page 41: 最近、リアルタイムWebが面白い

••

Page 42: 最近、リアルタイムWebが面白い

••

••

Page 43: 最近、リアルタイムWebが面白い

全部つなげてリアルタイム通信できるとか、楽しくない??

Page 44: 最近、リアルタイムWebが面白い