WebSocket

1,604 views
1,493 views

Published on

Introduction on WebSocket.
For Webilea on 2013-02-06: http://www.meetup.com/webilea/events/101312452/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,604
On SlideShare
0
From Embeds
0
Number of Embeds
464
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WebSocket

  1. 1. WebSocketTwo-way realtime communication for websites
  2. 2. Chat on a webpage“Four times.” “Four times.”
  3. 3. Chat on a webpageRequirements:• Send messages client→server• Send messages server→client• Detect when client is connected to server (“presence”)
  4. 4. Traditional HTTPXMLHttpRequest Long Polling(HTTP from JavaScript) (Long-running XMLHttpRequest)var request = new XMLHttpRequest(); var request = new XMLHttpRequest();request.open("POST", "/send"); request.open("GET", "/receive");request.send("Four times."); request.send(); request.onload = function() { appendMessage(this.responseText); startNewRequest(); };
  5. 5. Other techniques and problems• Long-polling HTTP requests: XHR, script-tag• Streaming HTTP request: XHR, iframe• Using rtmp with Flash• Misuse of HTTP (proxies, browsers, servers)• Performance (network, httpd cpu)• Not supported in all browsers
  6. 6. WebSocket• Full-duplex persistent connection over TCP• Designed by W3C for the web (RFC Dec. ’11)• Uses port 80• Handshake features HTTP’s “Upgrade”-header• The TLS version passes some HTTP-proxies• Ping/pong frames for staying alive
  7. 7. WebSocket JavaScript APIvar ws = new WebSocket("wss://host"); var ws = new WebSocket("wss://host");ws.send("Four times."); ws.onmessage = function(event) {ws.send("It has to be."); appendMessage(event.data); };
  8. 8. Demo├── README.md├── client-sockjs│   ├── chat.js│   └── index.html├── client-websocket│   ├── chat.js│   └── index.html└── server ├── package.json └── server.js https://github.com/njam/websocket-demo-chat
  9. 9. Compatibilityhttp://caniuse.com/websockets
  10. 10. Emulation• WebSocket-like client-API plus server• Enables realtime-comm. in most used browsers• SockJS: Node.js, Erlang, Ruby, Python, ..• Socket.IO: Node.js, Java, Erlang, PHP, .......• Ratchet: PHP• APE (C), Atmosphere (Java), Tambur.io (WS), Pusher (WS)
  11. 11. Server application Integration1. Same application base: WS-server which reuses your app code Application code Apache WS Server
  12. 12. Server application Integration2. Message Queue / Service API: Messaging between app and WS server (Redis-SockJS push-only broker: cargomedia/socket-redis) Message QueueApplication code Broker Apache WS Server
  13. 13. Thankscargomedia.ch/jobs

×