This document discusses several methods for real-time data streaming between a client and server, including AJAX polling, AJAX long-polling, server-sent events, and WebSockets. AJAX polling involves the client repeatedly sending requests to the server, but the data is not truly real-time. AJAX long-polling improves on this by keeping the request open until the server has a response. Server-sent events allow the server to push data to the client as it becomes available. WebSockets establish a full-duplex communication channel that both client and server can use to continuously send data with very low overhead compared to HTTP polling methods. The document provides pros and cons of each approach and demonstrates WebSockets implementations

1. WebSocket
Methods for Real-Time Data Streaming
Bui Minh Hieu

2. AJAX Polling
Client sends AJAX request to server, server responds

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. 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. 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. AJAX Long Polling
Facebook uses Long Polling

7. Server-Sent Events (SSE)
Client opens connection with server
Server sends data to client as it becomes available

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. 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. WebSocket
Client opens connection with server
Client and server send data to each other as data becomes available on either side

11. WebSocket
Pros:
• Client/server can send data to each other often.
• No polling overhead
Cons:
• Not supported by old browsers.

12. HTTP Overhead

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. Browser Support

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. Demo

17. WebSockets in Laravel
Demo

19. 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

20. WebSockets in Rails with Action Cable
Demo

21. Thank you