WebSockets & WebRTCFederico Pinna
@0xfede
Agenda• Real-time apps and asynchronous events
• Comet, WebSockets and socket.io
• Web Real-time Communication
• Signalling
• Data Channels & Media Stream
HTTPclient server
request
response
Data Pushclient server
event
HTTP pollingclient server
request
response
request
response
request
response
Comet
AKA: Ajax Push, HTTP Streaming, HTTP Server Push
• Hidden iframe
• Long-polling
HTTP long-pollingclient server
request
request
response
WebSocketclient server
request + upgrade
response
WebSocketclient server
frames
WebSocket
ws = new WebSocket(url);
ws.onmessage = function(data) { }
ws.send(data);
socket.io
• Comet & WebSocket
• Client & Server modules
• Super stable & efficient
WebRTC
• Real-time Communication Between Browsers
• Media Capture And Streams
• RTCPeerConnection
• getUserMedia()
WebRTC
WebRTC
Client Clientdata
WebRTC
Client Client
nat/fw
WebRTC
Client Client
nat/fw nat/fw
• Interactive Connectivity Establishment, ICE
• Session Traversal Utilities for NAT, STUN
• Traversal Using Relays around NAT TURN
WebRTC
WebRTC
Client Client
STUN
probe probe
WebRTC
Client Clientdata
STUN
WebRTC
Client Client
STUN TURN
data data
WebRTC
Client Clientdata
STUN TURN
data data
WebRTCclient client
SDP offer
SDP answer
ICE candidate
ICE candidate