Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Socket

950 views

Published on

Web Socket

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Web Socket

  1. 1. WebSocket Methods for Real-Time Data Streaming Bui Minh Hieu
  2. 2. AJAX Polling Client sends AJAX request to server, server responds
  3. 3. AJAX Polling Pros: • Simple. Don’t need complicated setups. Cons: • Too many requests to server. • Data is not up-to-date in real-time.
  4. 4. AJAX Long-Polling Client sends AJAX request to server, server keeps request open until response available Client immediately sends another long-poll request after receiving response
  5. 5. AJAX Long-Polling Pros: • Data is updated in real-time. • Don’t need to request to server many times. Cons: • Hard to setup. • Consume a lot of resources. • Not ideal if data is updated too often.
  6. 6. AJAX Long Polling Facebook uses Long Polling
  7. 7. Server-Sent Events (SSE) Client opens connection with server Server sends data to client as it becomes available
  8. 8. Server-Sent Events (SSE) Pros: • Data is updated in real-time. • Work when data is updated too often. Cons: • Client can’t send data to server.
  9. 9. WebSocket Protocol allows for a persistent, full-duplex communication between a client and remote host. HTML5 defines a JavaScript API for the WebSocket protocol within the browser, allowing bi-directional communication between the browser and server.
  10. 10. WebSocket Client opens connection with server Client and server send data to each other as data becomes available on either side
  11. 11. WebSocket Pros: • Client/server can send data to each other often. • No polling overhead Cons: • Not supported by old browsers.
  12. 12. HTTP Overhead
  13. 13. Header traffic analysis 100,000 clients polling every 10 seconds HTTP: (871 x 100,000)/10 = 8,710,000 bytes = 69,680,000 bits per second (66 Mbps) WebSocket: Use only 2 bytes of overhead. No latency from establishing new TCP connections for each HTTP message. (2 x 100,000)/10 = 20,000 bytes = 160,000 bits per second (156 Kbps)
  14. 14. Browser Support
  15. 15. WebSocket spec • W3C/IETF Standard • Uses the WebSocket protocol instead of HTTP • Initial handshake via HTTP => Upgrade to WebSocket Connection • True full-duplex communication channel • Runs via port 80/443 => Proxy/Firewall friendly • URI for WebSockets and Secure WebSockets: • ws:// • wss://
  16. 16. Demo
  17. 17. WebSockets in Laravel Demo
  18. 18. Socket.IO is awesome • Server and client-side implementation (for Node on server side) • Abstracts WebSocket communications to automatically fall back to flash streaming or long-polling when necessary (on either server or client) • Adds features like heartbeats, timeouts, and disconnection support not provided in WebSocket API
  19. 19. WebSockets in Rails with Action Cable Demo
  20. 20. Thank you

×