Realtime Web Apps: WebSockets & WebRTC

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

Let’s code

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

Let’s code

Thank you!