Real Time Collaborative Apps with JS by @albertein

Slides de la segunda plática GDLJS del 28 de Julio.

Un vistazo rápido a distintas tecnologías de JavaScript que permiten a multiples usuarios interactuar en tiempo real, todo esto en el browser. Los pros y contras de tecnologías que van desde polling, y websockets hasta lo más emocionante del mundo de RTC

Transcript

1. Real time collaborative apps with JS Alberto Avila (@albertein)
2. What it is? • 2+ people across the web interacting. • Google Docs • Chat apps. • Agar.io
3. How does it work? //TODO: Put image of clients communicating through a server
4. Communicating through the web
5. Polling window.setInterval(function() { $.ajax({...}); }, REFRESH_INTERVAL); • Need to establish connection periodically
6. Long Polling // Client function poll() { $.ajax({complete: poll, ...}); } poll(); // Server http.createServer(function(request, response) { onEvent(function(e) { response.end(payload); }); }).listen(8000);
7. Web sockets • full-duplex • HTTP friendly GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade
8. How to Web sockets? (with socket.io)
9. Server //server var app = require('http').createServer(handler); var io = require('socket.io')(app); io.on('connection', function (socket) { socket.on('ping', function (from, msg) { socket.emit('pong'); }); }); app.listen(8000);
10. Client var socket = io(); socket.on('connect', function () { socket.emit('ping'); });
11. WebRTC • full-duplex • peer2peer • audio, video & data streams.
12. How?
13. Singaling server • How to discover peers and negotiate its connection?
14. What about NAT?
15. ICE/STUN/TURN • ICE for connection negotiation • STUN for discovering external address • TURN to relay messages if everything else fails
17. STOP DEMO TIME
18. Thank you albertoavila@gmail.com (@albertein)