technologies of
the real time web

In this talk you'll get a deep dive into the inner workings that drive the real-time web. We'll have a look at the technologies, the fallbacks and the complete frameworks and services that enable you to go real-time today! Basically we're talking about the what, the why and the how of real-time web and you'll be familiarised with concepts like sockets, server sent events, NodeJS and SignalR! /

Intelligent Polling    =>    SignalR
Azure Service Bus

The real time what?

its not just web sockets

Real Time is a concept

The ability for your server-side code
to push content to connected clients

HTTP Polling    

LiveConnect (applet/js)

Forever Frame

(thank MS and Outlook!)

Long Polling 

XHR Streaming / multipart-replace 


umbrella term for HTTP hacks to simulate bi-directional communication between client and server.

[forever frame, long polling, script tag polling]

requires two HTTP connections
one for sending and one for recieving

Same Domain Policies
(have to self host)

The why?

Better User Experience
  • data driven pages
  • single page apps
  • bigger engagement
  • bigger exposure

when now is a must

its business critical / what you do

news/stock tickers

messaging apps

status updates


cost reduction

cut HTTP overhead

less bandwidth usage

less hardware stress

actual income

conversion rate?

more clients?

the how!

  • polling
  • long polling
  • forever frames
  • SSE
  • sockets
  • webRTC


check server for updates at regular intervals


set interval

// client
    $.ajax({ url: "poll" })
    .done(function (data) {
        // do something with data
}, 15000);

// server
app.get('/poll', function (req, res) {
    var data = getDataUpdates();

What if server does not respond in 15s?

set timeout

// client
(function poll () { // a self invocating closure
    setTimeout(function () {
        $.ajax({ url: 'poll' })
        .done(function (data) { 
            // do something with data, then...
    }, 15000);

// server

/* same as for setInterval */

A lot of wasted connections 

long polling

[ hanging get / COMET]

establish connection and wait

server responds when it has new data

if connection is closed, client re-establishes


// client
(function poll(){
  $.ajax({ url: 'longpoll', timeout: 15000})
  .done(function (data){
    // do someting with data

// server
var defers = [];
app.get('/longpoll', function (req, res) {
  // save response in array

function whenDataHappens(data){
  for(idx in defers){
  defers = [];


Data could be lost during reconnect

Browser support for simultaneous connections

Hanging Get not good for all servers

Not really true server push

forever frame

true push without polling

HTTP 1.1 incremental rendering support

avoids HTTP and TCP/IP set-up and tear-down

Chunked encoding

HTTP 1.1 allows sending a response 
before knowing its total length

Header: "Transfer-Encoding:  chunked"
var clients = [];
app.get('/foreverframe', function (req, res) {

    res.writeHead(200, {
    var msg = "connected via iframe!";
data-chunks wrapped in script-tags

hidden iframes

open after page load 

script-tags executed as they are recieved

<iframe src=""></iframe>
    window.ondata = function(data){
        // do something wit data
        $('iframe').attr('src', '/foreverframe');


all in all - its a hack

Server sent events

true event-based server push

shadowed by WebSockets

browser subscribe to stream of updates

Fancyful built-in functionality
  • automatic reconnects
  • event id's
  • arbitrary events

server side

// nodejs + express

var clients = [];
app.get('/stream', function(req, res){
    var id = (new Date()).toLocalTimeString();
    clients.push({res : res, id : id});
        'Content-Type' : 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection'   : 'keep-alive'        
    sendMessage(res, 'connected to server');
function sendMessage(res, msg){
    res.write('data: ' + msg + '\n\n');

client side

// client

  var source = new EventSource('/stream');
  source.onmessage = function(e){
    // do something with

  source.onopen = function(e){
    // called when connection opened

  source.onerror = function(e){
    // called on error


JSON & custom events

// server
app.get('/stream', function(){
    // first write headers, then...

    res.write('id: ' + (new Date).getTime() + '\n');
    res.write('event: customevent');
    res.write('data: {\n');
    res.write('data: "msg" : "hey SSE" \n');
    res.write('data: }\n\n');

// client
var source = new EventSource('/stream');

source.addEventListener('customevent', function(e){

    var data = JSON.parse(;
    var eventId = e.lastEventId;

}, false);

HTTP based so works on all servers

Browser Support 
  • FF > 6.0
  • Chrome
  • Opera < 11
  • Safari > 5.0

i.e. Long Polling or Forever Frame for IE

web sockets

Long-held, full-duplex single TCP connection

Network traffic comparison

1,000 clients polling/recieve once a second

  • http: 871,000 bytes = 6.6 Mbps
  • ws:    2,000       bytes = 0.015 Mbps

client side

// vanilla js

var connection = new WebSocket('ws://some-server', ['soap','xmpp']);
connection.onopen = function() {
    connection.send('hey Im here!'); // string or binary data
connection.onmessage = function(){};
// using

var socket = io.socket('http://some-server');

socket.on('named event', function(data){
    // do something with data
    socket.emit('another event', { msg: 'hola' });


// using nodejs
var app = require('express')(),
    server = require('http').createServer(app),
    io = require('').listen(server);


// setup socket
io.sockets.on('connection', function(socket){

    socket.on('another event', function(data){
    socket.emit('named event', { msg : 'connected' })

// routing
app.get('/', function(req, res){ /*...*/ });

are we ready?

Can we skip HTTP solutions?

  1. Need greater browser support

  2. Anti-virus manufacturers (such as Avast!) 
    stop interfering with connectivity

  3. Internet infrastructure is updated. 
    We want port 80 (WS), not just 443 (WSS).
    (some mobile carriers block WS)

web rtc

Imagine a world where your phone, 
TV and computer could all 
communicate on a common platform. 

Imagine it was easy to add video chat 
to your web application. 
That's the vision of WebRTC

Open standards for real-time, plugin-free video,
audio and data communication.

Current api

  • MediaStream (aka getUserMedia)
  • RTCPeerConnection
  • RTCDataChannel

browser-to-browser communication


Bundles with automatic fallback


$6k/month for 50k connections

$400/month for 10k connections

$2k/month unlimited connections



By Tobias Lundin


A deep dive into the inner workings that drive the real-time web. The technologies, the fallbacks and the complete frameworks and services that enable you to go real-time now!

  • 1,892