Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Muddling my way through real time

Remy Sharp
September 23, 2014

Muddling my way through real time

If your business deals with data on the web, then that data must be handled in real time, otherwise you're doing your user a disservice.

Remy Sharp

September 23, 2014
Tweet

More Decks by Remy Sharp

Other Decks in Programming

Transcript

  1. View Slide

  2. http://game.rem.io

    View Slide

  3. Real time is easy,
    cheap, and expected.

    View Slide

  4. Fast
    Self-updating

    View Slide

  5. Instant
    Self-updating

    View Slide

  6. View Slide

  7. function updatePrices() {
    $.get('/prices?stock=MSFT', function (data) {
    renderPrices(data);
    setTimeout(updatePrices, 60 * 1000);
    });
    }

    View Slide

  8. The server is the ultimate source of truth.
    We want the server to push the prices to
    the client.

    View Slide

  9. "What is this magic..?" – Remy, 2002

    View Slide

  10. View Slide

  11. The real hurdle is that there's
    two parts to real time:
    client and the server.

    View Slide

  12. View Slide

  13. function main
    initialize()
    while message != quit
    message := get_next_message()
    process_message(message)
    end while
    end function

    View Slide

  14. http://tick.rem.io
    doc.write('console.log("start of the stream...")');
    var timer = setInterval(function () {
    doc.write('console.log("and more...")');
    }, 2000);

    View Slide

  15. http://tick.rem.io
    doc.write('console.log("start of the stream...")');
    var timer = setInterval(function () {
    doc.write('console.log("and more...")');
    }, 2000);

    View Slide

  16. var http = require('http');
    var server = http.createServer(function (req, res) {
    res.writeHead(200, { 'content-type': 'text/html' });
    res.write('console.log("start of the stream...")');
    var timer = setInterval(function () {
    if (res.connection.writable) {
    // keep sending a script with logging
    res.write('console.log("and more...")');
    } else {
    // else connection has closed, and we can't write anymore
    // so clear this interval, and *attempt* to end the response
    clearInterval(timer);
    res.end();
    }
    }, 2000);
    });
    server.listen(8080);
    http://tick.rem.io

    View Slide

  17. Codified into standards
    1. XHR2
    2. EventSource
    3. WebSockets

    View Slide

  18. Codified into standards
    1. XHR2
    2. EventSource
    3. WebSockets

    View Slide

  19. Consider only sending required data upstream.

    View Slide

  20. View Slide

  21. Mobile over SSL or long polling
    Authorisation & sessions
    Scaling client connections: alias CNAME
    Scaling server: HAProxy, node-proxy, nginx +
    forwarding & redis backed lookup table
    Details

    View Slide

  22. 0314b28f43.example.com
    2c46ac0eab.example.com
    115885a3ea.example.com
    Socket server
    nginx
    catch all for
    example.com

    View Slide

  23. $ npm install primus
    emit - named events
    metroplex - use redis to lookup servers & spark
    locations
    omega-supreme - allow broadcasting to server or
    sparks

    View Slide

  24. client
    client
    client
    Server
    Server
    primus.metroplex.servers(function (e, serve
    servers.forEach(function (server) {
    primus.forward(server, {
    emit: [type, data]
    }, noop);
    });
    });
    Redis

    View Slide

  25. Thanks.

    View Slide