110828recruit agent ws
81
WebSocketが拓くマルチ デバイス連携サービス WebSocketの特徴と、プラクティスの紹介 2011/8/28 ＠リクルートエージェント こまつけんさく http://slidesha.re/110828kom 11年8月28日日曜日
-
Upload
kensaku-komatsu -
Category
Technology
-
view
3.238 -
download
0
Transcript of 110828recruit agent ws
WebSocketが拓くマルチデバイス連携サービスWebSocketの特徴と、プラクティスの紹介2011/8/28＠リクルートエージェント
こまつけんさく
http://slidesha.re/110828kom
11年8月28日日曜日
自己紹介名前：こまつけんさく
勤務先：NTTコミュニケーションズ
Twitter http://twitter.com/komasshu
Blog http://blog.livedoor.jp/kotesaki/
HTML5とか勉強会スタッフ
Google API Expert(HTML5)
Microsoft Most Valuable Professional(IE)11年8月28日日曜日
主な著書
昨年度末、日経コンピュータ誌に連載記事も書いてました。
11年8月28日日曜日
Today’s Main Idea
WebSocketの正しい理解、利用法
11年8月28日日曜日
AgendaWebSocketとは？
Cometとの違い
適用領域
Deep InsideSocket.ioCoding pattern
http://www.flickr.com/photos/27048731@N03/4004513994/
11年8月28日日曜日
Agenda
http://www.flickr.com/photos/johnlinford/3754434641/
WebSocketとは？
Cometとの違い
適用領域
Deep InsideSocket.ioCoding pattern
11年8月28日日曜日
WebSocketとは？
Abstract
The WebSocket protocol enables two-way communication between a client running untrusted code running in a controlled environment to a remote host that has opted-in to communications from that code. The security model used for this is the Origin-based security model commonly used by Web browsers. The protocol consists of an opening handshake followed by basic message framing, layered over TCP. The goal of this technology is to provide a mechanism for browser-based applications that need two-way communication with servers that does not rely on opening multiple HTTP connections (e.g. using XMLHttpRequest or <iframe>s and long polling).
The WebSocket protocoldraft-ietf-hybi-thewebsocketprotocol-10
ref) http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-10
11年8月28日日曜日
わかんなーい(´・ω・｀)ｼｮﾎﾞｰﾝ
11年8月28日日曜日
要はチャットが作れる
11年8月28日日曜日
チャットみたいなリアルタイムサービスが
できる!!
11年8月28日日曜日
送信と受信だけ!!
var socket = new WebSocket('ws://example.com’);
socket.send(‘hello’);
socket.onmessage(function(evt){ alert(evt.data);}
インスタンス生成
送信
受信
11年8月28日日曜日
簡単ですね(・∀・)
11年8月28日日曜日
RealTime Web!!
11年8月28日日曜日
Agenda
http://www.flickr.com/photos/algenon_iii/5397440505/
WebSocketとは？
Cometとの違い
適用領域
Deep InsideSocket.ioCoding pattern
11年8月28日日曜日
素朴な疑問
11年8月28日日曜日
Chatって前から出来てんじゃね？
11年8月28日日曜日
Chat on GMail
http://mail.google.com/mail/help/chat.html
11年8月28日日曜日
Comet使えば今でも作れる
11年8月28日日曜日
Comet!!
http://ascii.jp/elem/000/000/355/355253/11年8月28日日曜日
Comet!!
http://ascii.jp/elem/000/000/355/355253/11年8月28日日曜日
Comet!!
http://ascii.jp/elem/000/000/355/355253/11年8月28日日曜日
Comet = HTTPを使って、リアルタイムサービスを
実現するテク
11年8月28日日曜日
違いって何？WebSocket使うと何がいいの？
11年8月28日日曜日
http://www.flickr.com/photos/wold/2392054931/
閑話休題
11年8月28日日曜日
テレビにコメントとか送ったことある人？
11年8月28日日曜日
テレビにコメントするには？
電話（テレゴングっていいます）
FAX
などなど
11年8月28日日曜日
テレビ以外の別手段が必要
放送波
メールとか11年8月28日日曜日
http://www.flickr.com/photos/adforce1/5154126561/
本題に戻ります
11年8月28日日曜日
Cometってテレビのモデルに似てます
メッセージの送信
受信 受信
11年8月28日日曜日
テレビで、いっぱい送られると大変!!
放送波
11年8月28日日曜日
Cometも似たような感じ
受信
メッセージが沢山だと、送信はなにかと大変
受けるのは、得意
E
H
L
LO !
11年8月28日日曜日
WebSocketは電話に似てる電話回線
WebSocketコネクション
11年8月28日日曜日
WebSocketなら頻繁なメッセージ送信もOK!!
HELLO!
11年8月28日日曜日
デモ マウスジェスチャーエコー
11年8月28日日曜日
CPU使用率/トラフィックCPU traffic
WebSocket 1.3% 90kbps
Comet 2.7% 330kbps
接続数＝1の時の結果
11年8月28日日曜日
モバイルアクセスでは大きな違いが
11年8月28日日曜日
WebSocket = リアルタイムサービスの安定化と低コスト化を
実現する
11年8月28日日曜日
Agenda
http://www.flickr.com/photos/11086497@N00/277491010/
WebSocketとは？
Cometとの違い
適用領域
Deep InsideSocket.ioCoding pattern
11年8月28日日曜日
Cometでも大丈夫な領域
notificationサービスいわゆるサーバーからのPush
チャット
ボードゲーム
11年8月28日日曜日
WebSocketじゃないとキツイ領域
オンライン格闘ゲーム
インターネット電話
テレビ会議
11年8月28日日曜日
まとめると、こんな感じComet WebSocket
ノティファケーション ◯� ◯�
チャット ◯� ◯�
ボードゲーム ◯� ◯�
ホワイトボード共有 △ ◯�
格闘ゲーム ☓ ◯�
ネット電話 ☓ ◯�
テレビ会議 ☓ ◯�
11年8月28日日曜日
AgendaWebSocketとは？
Cometとの違い
適用領域
Deep InsideSocket.ioCoding pattern
http://www.flickr.com/photos/paolomargari/2848065273/
11年8月28日日曜日
現在の状態
プロトコル仕様はLast Call（version:10）
セキュリティの強化
Cache Poisoning Attackへの対応
バイナリーデータへの対応
Keep-alive packet( ping, pong )
etc.
11年8月28日日曜日
ブラウザのサポート状況
09/10でのバイナリー転送は、未実装の模様
http://html5labs.interoperabilitybridges.com/
http://caniuse.com/
11年8月28日日曜日
IEでは動かない(Add-onを入れればOK)Firefoxはバージョンが10
Chromeは13と14がバージョンの境目Safari5.1はバージョンが00
OperaはデフォルトOff
混沌11年8月28日日曜日
Automatic FallbackWebSocketが動かなかったら、
Cometに自動切り替え
が、必要ですね（ｷﾘｯ
11年8月28日日曜日
WebSocketとは？
Cometとの違い
適用領域
Deep InsideSocket.ioCoding pattern
Agenda
11年8月28日日曜日
特徴
Ver 0.7が最新
WebSocket失敗時に、自動でCometにFallback
IE6/7含めクロスブラウザで動作
リアルタイムサービスに必要な、様々な機能を提供
keep-alive, custom event, name space, storing data, ........
apache waveでも使ってますｗｗ
11年8月28日日曜日
例えば、Keep Alive
11年8月28日日曜日
How to Use
11年8月28日日曜日
# npm install socket.io
11年8月28日日曜日
Point 1
Event
11年8月28日日曜日
sample ( server )var app = require('express').createServer() , io = require('socket.io').listen(app);
app.listen(80);
app.get('/', function (req, res) { res.sendfile(__dirname + '/index.html');});
io.sockets.on('connection', function (socket) { socket.emit('msg', { hello: 'world' }); socket.on('control', function (data) { console.log(data); });});
11年8月28日日曜日
sample ( client )
<script src="/socket.io/socket.io.js"></script><script> var socket = io.connect('http://localhost'); socket.on('msg', function (data) { console.log(data); socket.emit('control', { my: 'data' }); });</script>
11年8月28日日曜日
Point 2
namespace
11年8月28日日曜日
var io = require('socket.io').listen(80);
var chat = io .of('/chat') .on('connection', function (socket) {
// --------------- });
var news = io .of('/news') .on('connection', function (socket) {
// --------------- });
var chat = io.connect('http://localhost/chat')
chat.on('connect', function () { chat.emit('hi!'); });
Server
Client
11年8月28日日曜日
Point 3
storing data(server side)
11年8月28日日曜日
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) { socket.on('set nickname', function (name) { socket.set('nickname', name, function () { socket.emit('ready'); }); });
socket.on('msg', function () { socket.get('nickname', function (err, name) { console.log('Chat message by ', name); }); });});
11年8月28日日曜日
Point 4
broadcast
11年8月28日日曜日
emit()
emit()
broadcast.emit()
11年8月28日日曜日
Point 5
transports
11年8月28日日曜日
var options = {transports:[‘websocket’, ‘xhr-polling’]};
var socket = io.connect(url, options);
11年8月28日日曜日
Agendaa2c
(teacher)
my son penguin
by @os0x
cameraWebSocketとは？
Cometとの違い
適用領域
Deep InsideSocket.ioCoding pattern
11年8月28日日曜日
UI independentcoding
11年8月28日日曜日
I don’t like this ;-($("#input").change(function(e){socket.emit(‘mesg’, $(this).val());
});
socket.on(‘mesg’ function(data){$(“#out”).text(data);
});
11年8月28日日曜日
I likethisStyle ;-)
// UI part// ------------------var render = function(msg){
$("#out").text(msg); // output}
$("#input").change(function(e){var mesg_ = $(this).val(); // inputrender(mesg_, "me");
$(this).trigger("changed", [mesg_]); // custom event});
// socket.io part// ------------------socket.on('connect', function(e){
render("connected");
socket.on('message', function(data){render(data, "someone");
});
$("#input").bind("changed", function(e, msg){socket.emit("message", msg);
});});
11年8月28日日曜日
why?
通信部分抜きで、ベース部分のコーディングが可能
unit testが容易
独立性・拡張性に優れる
11年8月28日日曜日
keyword :
multi device
11年8月28日日曜日
スマフォをWebSocketでリモコンにしちゃおう!!
WebSocketサーバー
スマフォで、PCのWebアプリを操作
11年8月28日日曜日
Demo : favorite app. + bookmarklet w/ socket.io
http://chromium.googlecode.com/svn/trunk/samples/audio/o3d-webgl-samples/pool.html
＋α11年8月28日日曜日
(function(){ var script = document.createElement('script'); script.src="http://localhost:40001/socket.io/socket.io.js"; document.body.appendChild(script);
var timer = setInterval(function(){ if(io){ start(); clearInterval(timer);} },100);
// Main function function start(){ var socket = io.connect("http://localhost:40001/pool", {transports:["xhr-polling"]});
socket.on("connect", function(){ socket.on("move", function(obj){
// poolの移動処理 }); socket.on("startShoot", function(){ // ボールにフォーカスをあてる }); socket.on("shoot", function(){
finishShooting(); // ボールを打つ }); }); }})();
Bookmarklet !!
11年8月28日日曜日
js HTML/CSS
$.bind() render()
11年8月28日日曜日
js HTML/CSS
$.bind() render()
11年8月28日日曜日
js HTML/CSS
$.bind() render()
Socket.io
11年8月28日日曜日
js HTML/CSS
$.bind() render()
Socket.io
$.trigger()
socket.emit() socket.on()
11年8月28日日曜日
今使っているWebアプリをリアルタイムWebにできるかも？
11年8月28日日曜日
まとめ
WebSocket → RealTime Web
Cometとの違い、適用領域
socket.ioの活用
既存Webサービスを、容易にRealTime Web対応に
マルチデバイス連携による新たな可能性
11年8月28日日曜日
Appendix : Nice blog
http://d.hatena.ne.jp/Jxck/20110730/1312042603
11年8月28日日曜日
Appendix : Magic Words
process.on('uncaughtException', function(err) { console.log(err);});
11年8月28日日曜日
http://www.flickr.com/photos/jenosaur/4051305996/
11年8月28日日曜日
![Virtual agent-mediated appraisal training: a single …pure.tudelft.nl/ws/files/33587579/Virtual_agent_Brinkman.pdfDownload by: [TU Delft Library] ... Además, proporciona una referencia](https://static.fdocuments.net/doc/165x107/5b3d37e87f8b9a560a8ddab7/virtual-agent-mediated-appraisal-training-a-single-pure-by-tu-delft-library.jpg)
