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