WebSockets<br />Plugging Into The Web<br />Paul Fryer<br />Software Architect<br />Fiserv<br />
What is a WebSocket?<br />Full-duplex bidirectional communication channel.<br />A very low overhead TCP connection.<br />S...
Why WebSockets?<br />Way more faster than Log Polling.<br />Works with firewalls/proxies.<br />Go from kilobytes of data t...
Polling vs. WebSockets<br />Image Source: Kazzing.com<br />
Polling vs. WebSockets<br />Image Source: WebSocket.org<br />
Browser Support<br />
Where is it used?<br />Rich Internet Applications (RIA)<br />Online Games (Farmville)<br />Chat Applications<br />Streamin...
Pusher<br />Pusher (pusher.com) is a hosted API for quickly, easily and securely adding scalable real-time functionality v...
Client Handshake<br />GET /demo HTTP/1.1 <br />Host: example.com <br />Connection: Upgrade <br />Sec-WebSocket-Key2: 12998...
Server Handshake<br />HTTP/1.1 101 WebSocketProtocol Handshake Upgrade: WebSocket<br />Connection: Upgrade <br />Sec-WebSo...
The Connection<br />Data is sent in the form of UTF-8 text.<br />Each frame of data starts with 0x00 byte.<br />Each frame...
JavaScript API<br />onopen: When a socket has opened<br />onmessage: When a message has been received<br />onclose: When a...
JavaScript API<br />var socket = new WebSocket("ws://localhost:8000/ServiceEndpoint/");  <br />socket.onopen = function(){...
Socket.io<br />Socket IO is a library that supports non WebSocket JS clients. <br />It will leverage websockets if availab...
Kaazing Enterprise Gateway<br />
Building a WebSocket Server<br />.Net web socket server:<br />http://superwebsocket.codeplex.com/<br />Easy to build your ...
Everyone Go Here:<br />bit.ly/r2a459<br />
Ideas for Financial Industry<br />More responsive user interfaces.<br />Financial Dashboards<br />Corporate<br />Small Bus...
Upcoming SlideShare
Loading in...5
×

Web Sockets

2,200

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,200
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web Sockets

  1. 1. WebSockets<br />Plugging Into The Web<br />Paul Fryer<br />Software Architect<br />Fiserv<br />
  2. 2.
  3. 3. What is a WebSocket?<br />Full-duplex bidirectional communication channel.<br />A very low overhead TCP connection.<br />Supported in HTML5 browsers.<br />Cross Domain Capable.<br />
  4. 4.
  5. 5. Why WebSockets?<br />Way more faster than Log Polling.<br />Works with firewalls/proxies.<br />Go from kilobytes of data to 2 bytes.<br />Go from 150ms to 50ms latency.<br />
  6. 6. Polling vs. WebSockets<br />Image Source: Kazzing.com<br />
  7. 7. Polling vs. WebSockets<br />Image Source: WebSocket.org<br />
  8. 8. Browser Support<br />
  9. 9. Where is it used?<br />Rich Internet Applications (RIA)<br />Online Games (Farmville)<br />Chat Applications<br />Streaming Applications<br />Financial Data<br />Real Time News<br />Real Time Alerts<br />Analytics (chartbeat)<br />
  10. 10. Pusher<br />Pusher (pusher.com) is a hosted API for quickly, easily and securely adding scalable real-time functionality via WebSockets to web and mobile apps.<br />Example Apps Built on Pusher:<br />http://retrospectiveapp.heroku.com<br />http://jzlabs.com/stuff/marblepaint<br />
  11. 11. Client Handshake<br />GET /demo HTTP/1.1 <br />Host: example.com <br />Connection: Upgrade <br />Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 <br />Sec-WebSocket-Protocol: sample <br />Upgrade: WebSocket<br />Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 <br />Origin: http://example.com <br />^n:ds[4U<br />
  12. 12. Server Handshake<br />HTTP/1.1 101 WebSocketProtocol Handshake Upgrade: WebSocket<br />Connection: Upgrade <br />Sec-WebSocket-Origin: http://example.com <br />Sec-WebSocket-Location: ws://example.com/demo <br />Sec-WebSocket-Protocol: sample <br />8jKS'y:G*Co,Wxa-<br />
  13. 13. The Connection<br />Data is sent in the form of UTF-8 text.<br />Each frame of data starts with 0x00 byte.<br />Each frame of data ends with 0xFF byte.<br />UTF-8 text is in-between the start and ending bytes.<br />
  14. 14. JavaScript API<br />onopen: When a socket has opened<br />onmessage: When a message has been received<br />onclose: When a socket has been closed<br />
  15. 15. JavaScript API<br />var socket = new WebSocket("ws://localhost:8000/ServiceEndpoint/");  <br />socket.onopen = function(){  alert("Socket has been opened!");  <br />socket.onmessage = function(msg){  <br />alert(msg); //Awesome!  }  <br />
  16. 16. Socket.io<br />Socket IO is a library that supports non WebSocket JS clients. <br />It will leverage websockets if available, but fall back to other transports for earlier browsers.<br />http://socket.io<br />
  17. 17. Kaazing Enterprise Gateway<br />
  18. 18. Building a WebSocket Server<br />.Net web socket server:<br />http://superwebsocket.codeplex.com/<br />Easy to build your own web socket service on base classes.<br />Comes with an example chat application.<br />
  19. 19. Everyone Go Here:<br />bit.ly/r2a459<br />
  20. 20. Ideas for Financial Industry<br />More responsive user interfaces.<br />Financial Dashboards<br />Corporate<br />Small Business<br />Even Personal<br />Real time reporting.<br />Connected Devices (real time location).<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×