WebSocketMethods for Real-Time Data Streaming

Bui Minh Hieu

AJAX PollingClient sends AJAX request to server, server responds

AJAX PollingPros:

• Simple. Don’t need complicated setups.

Cons:• Too many requests to server.• Data is not up-to-date in real-time.

AJAX Long-PollingClient sends AJAX request to server, server keeps request open until response available

Client immediately sends another long-poll request after receiving response

AJAX Long-PollingPros:

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

AJAX Long PollingFacebook uses Long Polling

Server-Sent Events (SSE)Client opens connection with server

Server sends data to client as it becomes available

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.

WebSocketProtocol

allows for a persistent, full-duplex communication between a client and remote host.

HTML5defines a JavaScript API for the WebSocket protocol within the browser, allowing bi-directional communication between the browser and server.

WebSocketClient opens connection with server

Client and server send data to each other as data becomes available on either side

WebSocketPros:

• Client/server can send data to each other often.• No polling overhead

Cons:• Not supported by old browsers.

HTTP Overhead

Header traffic analysis100,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)

Browser Support

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://

Demo

WebSockets in LaravelDemo

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

WebSockets in Rails with Action CableDemo

Thank you