SlideShare a Scribd company logo
1 of 81
Download to read offline
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
Agenda
              WebSocket

              Comet



              Deep Inside
              Socket.io
              Coding pattern   http://www.flickr.com/photos/27048731@N03/4004513994/




11   8   28
Agenda
              WebSocket

              Comet



              Deep Inside
              Socket.io
              Coding pattern
                               http://www.flickr.com/photos/johnlinford/3754434641/




11   8   28
WebSocket
                                 The WebSocket protocol
                         draft-ietf-hybi-thewebsocketprotocol-10

              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).
                           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
              WebSocket

              Comet



              Deep Inside
              Socket.io
              Coding pattern
                               http://www.flickr.com/photos/algenon_iii/5397440505/




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


                              H

                      E

                      L

                          L
                                  O   !

11   8   28
WebSocket




                  WebSocket




11   8   28
WebSocket
                                       OK!!

              !    O   L   L   E   H




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
              WebSocket

              Comet



              Deep Inside
              Socket.io
              Coding pattern   http://www.flickr.com/photos/11086497@N00/277491010/




11   8   28
Comet

              notification
                            Push




11   8   28
WebSocket




11   8   28
Comet   WebSocket

               ◯�        ◯�

               ◯�        ◯�

               ◯�        ◯�

               △         ◯�

               ☓         ◯�

               ☓         ◯�

               ☓         ◯�




11   8   28
Agenda
              WebSocket

              Comet



              Deep Inside
              Socket.io
              Coding 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
http://caniuse.com/




                           http://html5labs.interoperabilitybridges.com/



               09/10
11   8   28
IE               (Add-on          OK)
                    Firefox               10
              Chrome 13 14
                   Safari5.1               00
                     Opera               Off
11   8   28
Automatic Fallback
              WebSocket
                 Comet




11   8   28
Agenda
              WebSocket

              Comet



              Deep Inside
              Socket.io
              Coding pattern
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
Server
                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) {
                     // ---------------
                  });


              Client
                  var chat = io.connect('http://localhost/chat')

                  chat.on('connect', function () {
                    chat.emit('hi!');
                  });
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
Agenda
                                                a2c
              WebSocket
                                 camera      (teacher)
              Comet



              Deep Inside
              Socket.io
                               by @os0x
              Coding pattern
                                   my son   penguin
11   8   28
UI independent
                  coding


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 like      // UI part
                     // ------------------
                     var render = function(msg){

         this        }
                       $("#out").text(msg); // output




         Style ;-)   $("#input").change(function(e){
                       var mesg_ = $(this).val(); // input
                       render(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
                                 !!

              PC Web




                             WebSocket

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
Bookmarklet !!
     (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(); //
                });
              });
       }
     })();


11   8   28
$.bind()
                         js   render()   HTML/
                                          CSS




11   8   28
$.bind()
                         js   render()   HTML/
                                          CSS




11   8   28
$.bind()
                            js       render()   HTML/
                                                 CSS




                         Socket.io




11   8   28
$.bind()
                                 js        render()   HTML/
                                                       CSS

              $.trigger()




                              Socket.io


              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

More Related Content

Similar to 110828recruit agent ws

WebSocketでリアルタイム通信
WebSocketでリアルタイム通信WebSocketでリアルタイム通信
WebSocketでリアルタイム通信Kensaku Komatsu
 
WebSocket Server - Jul 2010
WebSocket Server - Jul 2010WebSocket Server - Jul 2010
WebSocket Server - Jul 2010takanao ENODH
 
Realizzare applicazioni Web con WebSocket, by Simone Bordet
Realizzare applicazioni Web con WebSocket, by Simone BordetRealizzare applicazioni Web con WebSocket, by Simone Bordet
Realizzare applicazioni Web con WebSocket, by Simone BordetCodemotion
 
Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSocketsGonzalo Ayuso
 
Analyzing the Performance of Mobile Web
Analyzing the Performance of Mobile WebAnalyzing the Performance of Mobile Web
Analyzing the Performance of Mobile WebAriya Hidayat
 
Websockets - DevFestX May 19, 2012
Websockets - DevFestX May 19, 2012Websockets - DevFestX May 19, 2012
Websockets - DevFestX May 19, 2012Sameer Segal
 
Websockets en Ruby en 5 Minutos
Websockets en Ruby en 5 MinutosWebsockets en Ruby en 5 Minutos
Websockets en Ruby en 5 Minutosdamianmarti
 
HTML5 WebSocket: The New Network Stack for the Web
HTML5 WebSocket: The New Network Stack for the WebHTML5 WebSocket: The New Network Stack for the Web
HTML5 WebSocket: The New Network Stack for the WebPeter Lubbers
 
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocketV2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocketbrent bucci
 
Real Time Web - What's that for?
Real Time Web - What's that for?Real Time Web - What's that for?
Real Time Web - What's that for?Martyn Loughran
 
Going Live! with Comet
Going Live! with CometGoing Live! with Comet
Going Live! with CometSimon Willison
 
WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java DevelopersWebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java DevelopersViktor Gamov
 
Dev con kolkata 2012 websockets
Dev con kolkata 2012   websocketsDev con kolkata 2012   websockets
Dev con kolkata 2012 websocketsSANKARSAN BOSE
 
Jwebsocketmobiletechcon2010en 100912071225 Phpapp01
Jwebsocketmobiletechcon2010en 100912071225 Phpapp01Jwebsocketmobiletechcon2010en 100912071225 Phpapp01
Jwebsocketmobiletechcon2010en 100912071225 Phpapp01purans
 

Similar to 110828recruit agent ws (20)

WebSocketでリアルタイム通信
WebSocketでリアルタイム通信WebSocketでリアルタイム通信
WebSocketでリアルタイム通信
 
Websocket shanon
Websocket shanonWebsocket shanon
Websocket shanon
 
The HTML5 WebSocket API
The HTML5 WebSocket APIThe HTML5 WebSocket API
The HTML5 WebSocket API
 
WebSocket Server - Jul 2010
WebSocket Server - Jul 2010WebSocket Server - Jul 2010
WebSocket Server - Jul 2010
 
Realizzare applicazioni Web con WebSocket, by Simone Bordet
Realizzare applicazioni Web con WebSocket, by Simone BordetRealizzare applicazioni Web con WebSocket, by Simone Bordet
Realizzare applicazioni Web con WebSocket, by Simone Bordet
 
Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSockets
 
Analyzing the Performance of Mobile Web
Analyzing the Performance of Mobile WebAnalyzing the Performance of Mobile Web
Analyzing the Performance of Mobile Web
 
Websockets - DevFestX May 19, 2012
Websockets - DevFestX May 19, 2012Websockets - DevFestX May 19, 2012
Websockets - DevFestX May 19, 2012
 
Websockets en Ruby en 5 Minutos
Websockets en Ruby en 5 MinutosWebsockets en Ruby en 5 Minutos
Websockets en Ruby en 5 Minutos
 
HTML5 WebSocket: The New Network Stack for the Web
HTML5 WebSocket: The New Network Stack for the WebHTML5 WebSocket: The New Network Stack for the Web
HTML5 WebSocket: The New Network Stack for the Web
 
Real time coding with jWebSocket
Real time coding with jWebSocketReal time coding with jWebSocket
Real time coding with jWebSocket
 
V2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocketV2 peter-lubbers-sf-jug-websocket
V2 peter-lubbers-sf-jug-websocket
 
Real Time Web - What's that for?
Real Time Web - What's that for?Real Time Web - What's that for?
Real Time Web - What's that for?
 
Going Live! with Comet
Going Live! with CometGoing Live! with Comet
Going Live! with Comet
 
WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java DevelopersWebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
WebSockets: The Current State of the Most Valuable HTML5 API for Java Developers
 
Rest, sockets em golang
Rest, sockets em golangRest, sockets em golang
Rest, sockets em golang
 
Websocket
WebsocketWebsocket
Websocket
 
Dev con kolkata 2012 websockets
Dev con kolkata 2012   websocketsDev con kolkata 2012   websockets
Dev con kolkata 2012 websockets
 
Jwebsocketmobiletechcon2010en 100912071225 Phpapp01
Jwebsocketmobiletechcon2010en 100912071225 Phpapp01Jwebsocketmobiletechcon2010en 100912071225 Phpapp01
Jwebsocketmobiletechcon2010en 100912071225 Phpapp01
 
jWebSocket MobileTechCon 2010 - WebSockets on Android, Symbian and BlackBerry
jWebSocket MobileTechCon 2010 - WebSockets on Android, Symbian and BlackBerryjWebSocket MobileTechCon 2010 - WebSockets on Android, Symbian and BlackBerry
jWebSocket MobileTechCon 2010 - WebSockets on Android, Symbian and BlackBerry
 

More from Kensaku Komatsu

Media processing with serverless architecture
Media processing with serverless architectureMedia processing with serverless architecture
Media processing with serverless architectureKensaku Komatsu
 
Full Matrix Auto Test Framework for WebRTC
Full Matrix Auto Test Framework for WebRTCFull Matrix Auto Test Framework for WebRTC
Full Matrix Auto Test Framework for WebRTCKensaku Komatsu
 
04122016 web rtc_globalsummit
04122016 web rtc_globalsummit04122016 web rtc_globalsummit
04122016 web rtc_globalsummitKensaku Komatsu
 
02172016 web rtc_conf_komasshu
02172016 web rtc_conf_komasshu02172016 web rtc_conf_komasshu
02172016 web rtc_conf_komasshuKensaku Komatsu
 
SkyWay国内唯一のCPaaS
SkyWay国内唯一のCPaaSSkyWay国内唯一のCPaaS
SkyWay国内唯一のCPaaSKensaku Komatsu
 
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ    uv4l-webrtc 軽くハックしてみたよ!ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ    uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!Kensaku Komatsu
 
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探るビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探るKensaku Komatsu
 
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.Kensaku Komatsu
 
14th apr2015 リックテレコ勉強会
14th apr2015 リックテレコ勉強会14th apr2015 リックテレコ勉強会
14th apr2015 リックテレコ勉強会Kensaku Komatsu
 
WebRTCが拓く 新たなWebビジネスの世界
WebRTCが拓く新たなWebビジネスの世界WebRTCが拓く新たなWebビジネスの世界
WebRTCが拓く 新たなWebビジネスの世界Kensaku Komatsu
 
Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性Kensaku Komatsu
 
知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたちKensaku Komatsu
 
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI WebRTCにより可視化されるリアルタイムクラウド。求められるAPI
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI Kensaku Komatsu
 
エフサミ2014 web rtcの傾向と対策
エフサミ2014 web rtcの傾向と対策エフサミ2014 web rtcの傾向と対策
エフサミ2014 web rtcの傾向と対策Kensaku Komatsu
 
HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )Kensaku Komatsu
 

More from Kensaku Komatsu (20)

Media processing with serverless architecture
Media processing with serverless architectureMedia processing with serverless architecture
Media processing with serverless architecture
 
Boxdev lt-09082016
Boxdev lt-09082016Boxdev lt-09082016
Boxdev lt-09082016
 
a pattern for PWA, PRPL
a pattern for PWA, PRPLa pattern for PWA, PRPL
a pattern for PWA, PRPL
 
Full Matrix Auto Test Framework for WebRTC
Full Matrix Auto Test Framework for WebRTCFull Matrix Auto Test Framework for WebRTC
Full Matrix Auto Test Framework for WebRTC
 
WebRTC 101
WebRTC 101WebRTC 101
WebRTC 101
 
04122016 web rtc_globalsummit
04122016 web rtc_globalsummit04122016 web rtc_globalsummit
04122016 web rtc_globalsummit
 
02172016 web rtc_conf_komasshu
02172016 web rtc_conf_komasshu02172016 web rtc_conf_komasshu
02172016 web rtc_conf_komasshu
 
SkyWay国内唯一のCPaaS
SkyWay国内唯一のCPaaSSkyWay国内唯一のCPaaS
SkyWay国内唯一のCPaaS
 
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ    uv4l-webrtc 軽くハックしてみたよ!ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ    uv4l-webrtc 軽くハックしてみたよ!
ラズパイでWebRTC ヾ(*´∀`*)ノキャッキャ uv4l-webrtc 軽くハックしてみたよ!
 
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探るビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る
 
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
 
FirefoxでgetStats()
FirefoxでgetStats()FirefoxでgetStats()
FirefoxでgetStats()
 
14th apr2015 リックテレコ勉強会
14th apr2015 リックテレコ勉強会14th apr2015 リックテレコ勉強会
14th apr2015 リックテレコ勉強会
 
WebRTCが拓く 新たなWebビジネスの世界
WebRTCが拓く新たなWebビジネスの世界WebRTCが拓く新たなWebビジネスの世界
WebRTCが拓く 新たなWebビジネスの世界
 
Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性Web of Thingsの現状とWebRTC活用の可能性
Web of Thingsの現状とWebRTC活用の可能性
 
25th nov2014 52thhtml5j
25th nov2014 52thhtml5j25th nov2014 52thhtml5j
25th nov2014 52thhtml5j
 
知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち知ってると得するかもしれないConstraintsたち
知ってると得するかもしれないConstraintsたち
 
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI WebRTCにより可視化されるリアルタイムクラウド。求められるAPI
WebRTCにより可視化されるリアルタイムクラウド。求められるAPI
 
エフサミ2014 web rtcの傾向と対策
エフサミ2014 web rtcの傾向と対策エフサミ2014 web rtcの傾向と対策
エフサミ2014 web rtcの傾向と対策
 
HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )HTML5 Night 2014 Web x Network Technology ( WebRTC )
HTML5 Night 2014 Web x Network Technology ( WebRTC )
 

Recently uploaded

COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 

Recently uploaded (20)

COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 

110828recruit agent ws

  • 1. 2011/8/28 http://slidesha.re/110828kom 11 8 28
  • 2. 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
  • 3. 11 8 28
  • 4. Today’s Main Idea WebSocket 11 8 28
  • 5. Agenda WebSocket Comet Deep Inside Socket.io Coding pattern http://www.flickr.com/photos/27048731@N03/4004513994/ 11 8 28
  • 6. Agenda WebSocket Comet Deep Inside Socket.io Coding pattern http://www.flickr.com/photos/johnlinford/3754434641/ 11 8 28
  • 7. WebSocket The WebSocket protocol draft-ietf-hybi-thewebsocketprotocol-10 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). ref) http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-10 11 8 28
  • 8. (´ ω ) 11 8 28
  • 9. 11 8 28
  • 10. !! 11 8 28
  • 11. !! var socket = new WebSocket('ws://example.com’); socket.send(‘hello’); socket.onmessage(function(evt){ alert(evt.data); } 11 8 28
  • 12. ( ∀ ) 11 8 28
  • 13. RealTime Web!! 11 8 28
  • 14. Agenda WebSocket Comet Deep Inside Socket.io Coding pattern http://www.flickr.com/photos/algenon_iii/5397440505/ 11 8 28
  • 15. 11 8 28
  • 16. Chat 11 8 28
  • 17. Chat on GMail http://mail.google.com/mail/help/chat.html 11 8 28
  • 18. Comet 11 8 28
  • 19. Comet!! http://ascii.jp/elem/000/000/355/355253/ 11 8 28
  • 20. Comet!! http://ascii.jp/elem/000/000/355/355253/ 11 8 28
  • 21. Comet!! http://ascii.jp/elem/000/000/355/355253/ 11 8 28
  • 23. WebSocket 11 8 28
  • 25. 11 8 28
  • 26. FAX e-mail twitter 11 8 28
  • 27. 11 8 28
  • 29. Comet 11 8 28
  • 30. !! 11 8 28
  • 31. Comet H E L L O ! 11 8 28
  • 32. WebSocket WebSocket 11 8 28
  • 33. WebSocket OK!! ! O L L E H 11 8 28
  • 34. 11 8 28
  • 35. CPU / CPU traffic WebSocket 1.3% 90kbps Comet 2.7% 330kbps 1 11 8 28
  • 36. 11 8 28
  • 38. Agenda WebSocket Comet Deep Inside Socket.io Coding pattern http://www.flickr.com/photos/11086497@N00/277491010/ 11 8 28
  • 39. Comet notification Push 11 8 28
  • 40. WebSocket 11 8 28
  • 41. Comet WebSocket ◯� ◯� ◯� ◯� ◯� ◯� △ ◯� ☓ ◯� ☓ ◯� ☓ ◯� 11 8 28
  • 42. Agenda WebSocket Comet Deep Inside Socket.io Coding pattern http://www.flickr.com/photos/paolomargari/2848065273/ 11 8 28
  • 43. Last Call version:10 Cache Poisoning Attack Keep-alive packet( ping, pong ) etc. 11 8 28
  • 44. http://caniuse.com/ http://html5labs.interoperabilitybridges.com/ 09/10 11 8 28
  • 45. IE (Add-on OK) Firefox 10 Chrome 13 14 Safari5.1 00 Opera Off 11 8 28
  • 46. Automatic Fallback WebSocket Comet 11 8 28
  • 47. Agenda WebSocket Comet Deep Inside Socket.io Coding pattern 11 8 28
  • 49. Ver 0.7 WebSocket Comet Fallback IE6/7 keep-alive, custom event, name space, storing data, ........ apache wave 11 8 28
  • 52. # npm install socket.io 11 8 28
  • 53. Point 1 Event 11 8 28
  • 54. 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
  • 55. 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
  • 56. Point 2 namespace 11 8 28
  • 57. Server 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) { // ---------------   }); Client   var chat = io.connect('http://localhost/chat')   chat.on('connect', function () {     chat.emit('hi!');   }); 11 8 28
  • 58. Point 3 storing data (server side) 11 8 28
  • 59. 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
  • 60. Point 4 broadcast 11 8 28
  • 61. emit() emit() broadcast.emit() 11 8 28
  • 62. Point 5 transports 11 8 28
  • 63. var options = {transports: [‘websocket’, ‘xhr-polling’]}; var socket = io.connect(url, options); 11 8 28
  • 64. Agenda a2c WebSocket camera (teacher) Comet Deep Inside Socket.io by @os0x Coding pattern my son penguin 11 8 28
  • 65. UI independent coding 11 8 28
  • 66. 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
  • 67. I like // UI part // ------------------ var render = function(msg){ this } $("#out").text(msg); // output Style ;-) $("#input").change(function(e){ var mesg_ = $(this).val(); // input render(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
  • 68. why? unit test 11 8 28
  • 69. keyword : multi device 11 8 28
  • 70. WebSocket !! PC Web WebSocket 11 8 28
  • 71. Demo : favorite app. + bookmarklet w/ socket.io http://chromium.googlecode.com/svn/trunk/samples/audio/o3d-webgl-samples/pool.html α 11 8 28
  • 72. Bookmarklet !! (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(); // }); }); } })(); 11 8 28
  • 73. $.bind() js render() HTML/ CSS 11 8 28
  • 74. $.bind() js render() HTML/ CSS 11 8 28
  • 75. $.bind() js render() HTML/ CSS Socket.io 11 8 28
  • 76. $.bind() js render() HTML/ CSS $.trigger() Socket.io socket.emit() socket.on() 11 8 28
  • 77. Web Web 11 8 28
  • 78. WebSocket → RealTime Web Comet socket.io Web RealTime Web 11 8 28
  • 79. Appendix : Nice blog http://d.hatena.ne.jp/Jxck/20110730/1312042603 11 8 28
  • 80. Appendix : Magic Words process.on('uncaughtException', function(err) { console.log(err); }); 11 8 28