app en tiempo real con html5+node.js+socket.io
DESCRIPTION
Presentación de mi charla de app en tiemp real con Node.js y Socket.IO en el #BarCampNeaTRANSCRIPT
![Page 1: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/1.jpg)
HTML5 – Node.js – Socket.io
Aplicaciones Web en tiempo real
![Page 2: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/2.jpg)
¿Qué es una aplicación web en tiempo real?
• http://www.lightstreamer.com/demo/StockListDemo/
![Page 3: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/3.jpg)
Comunicación bidireccional entre el servidor y los usuarios
aa b
b
Servidor Web
![Page 4: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/4.jpg)
1 Antecedentes
Limitaciones de la Web actual
![Page 5: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/5.jpg)
Pull (Así funciona la Web)Servidor Web
Petición
Navegador Web
Respuesta
![Page 6: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/6.jpg)
Push (Lo que necesitamos)Servidor WebNavegador Web
DatosEvento
![Page 7: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/7.jpg)
Desde hace algunos años existen soluciones pero son poco eficientes…
Servidor Web
Ajax (Polling)
peticiónrespuesta
petición
respuesta
petición
respuesta
![Page 8: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/8.jpg)
• Script de prueba para Apache 2.2 con PHP 5.3
<?phpsleep(3);echo «hola mundo»;?>
Simulamos con un script, una petición que toma3 segundos en ejecutarse.
![Page 9: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/9.jpg)
0
1
2
3
4
5
6
7
8
9
10
apache 2.2
Los servidores web tienen un número limitado de procesos…
Comportamiento de Apache 2.2 con 1000 peticiones, 100 de ellas concurrentes
Peticiones
![Page 10: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/10.jpg)
Servidores tipo Comet
Misma infraestructura, diferente filosofía
2
![Page 11: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/11.jpg)
Con los servidores tipo Comet nos acercamos mucho más a la solución ideal…
Servidor tipo Comet
Long pollingpetición
respuesta
petición
respuesta
petición
![Page 12: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/12.jpg)
Algunos servidores Comet / Websockets…
Python Java .Net Ruby Javascript
TornadoTwisted…
CometdProtcoloBayeux
GlassFishActiveMQ…
WebSync Protocolo Bayeux
Thin/Faye protocolo Bayeux
Node.js*Es posible ejecutarlo en Windows Azure
Open Source Open Source Comercial Open Source Open Source
![Page 13: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/13.jpg)
Acerca de Node.js
• Basado en el motor Javascript Google V8
• Todas las operaciones son asíncronas
• Uno de los servidores más rápidos del mercado
• Altamente eficiente• Ideal para la creación de
aplicaciones en tiempo real
![Page 14: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/14.jpg)
En Node.js todas las operaciones son asíncronas. No usa procesos…
Comportamiento de Node.js con 1000 peticiones, 100 de ellas concurrentes
0
1
2
3
4
5
6
7
8
9
10
Node
Series2
Peticiones
Tiempo (s)
![Page 15: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/15.jpg)
WebSockets con HTML5
En el futuro y presente
3
![Page 16: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/16.jpg)
Con el API de WebSockets se crea un canal bidirecional…
Servidor con soporte paraWebSockets
respuesta
respuesta
inicio
![Page 17: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/17.jpg)
Ejemplos con Node.js y Socket.io
El futuro
Desde un chat simple, hasta startups innovadoreshttp://www.dymotics.com/
4
![Page 18: App en tiempo real con HTML5+Node.js+Socket.IO](https://reader034.vdocuments.pub/reader034/viewer/2022052322/557c0eefd8b42ad1658b4f39/html5/thumbnails/18.jpg)
Walter Gerez@wgerezSkype: walter.gerezFace: wgerez
Gracias