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

e-mail

twitter

などなど

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日日曜日

http://socket.io/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日日曜日