SlideShare ist ein Scribd-Unternehmen logo
1 von 18
HTML5 – Node.js – Socket.io
Aplicaciones
Web en tiempo real
¿Qué es una aplicación
web en tiempo real?
• http://www.lightstreamer.com/demo/StockListDemo/
Comunicación bidireccional entre el servidor y
los usuarios
a
a b
b
Servidor Web
1 Antecedentes
Limitaciones de la Web actual
Pull (Así funciona la Web)
Servidor Web
Petición
Navegador Web
Respuesta
Push (Lo que necesitamos)
Servidor Web
Navegador Web
Datos
Evento
Desde hace algunos años existen soluciones pero son
poco eficientes…
Servidor Web
Ajax (Polling)
petición
respuesta
petición
respuesta
petición
respuesta
• Script de prueba para Apache
2.2 con PHP 5.3
<?php
sleep(3);
echo «hola mundo»;
?>
Simulamos con un script,
una petición que toma
3 segundos en ejecutarse.
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
Servidores tipo Comet
Misma infraestructura, diferente filosofía
2
Con los servidores tipo Comet nos acercamos mucho más a la
solución ideal…
Servidor tipo Comet
Long polling
petición
respuesta
petición
respuesta
petición
Algunos servidores Comet / Websockets…
Python Java .Net Ruby Javascript
Tornado
Twisted…
Cometd
Protcolo
Bayeux
GlassFish
ActiveMQ…
WebSync
Protocolo
Bayeux
Thin/Faye
protocolo
Bayeux
Node.js*
Es posible
ejecutarlo en
Windows
Azure
Open Source Open Source Comercial Open Source Open Source
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
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
Peticiones
Tiempo (s)
WebSockets con HTML5
En el futuro y presente
3
Con el API de WebSockets se crea un canal bidirecional…
Servidor con
soporte para
WebSockets
respuesta
respuesta
inicio
Ejemplos con Node.js y
Socket.io
El futuro
Desde un chat simple, hasta startups innovadores
http://www.dymotics.com/
4
Walter Gerez
@wgerez
Skype: walter.gerez
Face: wgerez
Gracias

Weitere ähnliche Inhalte

Was ist angesagt? (14)

Servidores web: cloud
Servidores web: cloudServidores web: cloud
Servidores web: cloud
 
Semana 13 ejemplo del uso del rmi
Semana 13   ejemplo del uso del rmiSemana 13   ejemplo del uso del rmi
Semana 13 ejemplo del uso del rmi
 
Ajax
AjaxAjax
Ajax
 
ASP.NET MVC Core
ASP.NET MVC CoreASP.NET MVC Core
ASP.NET MVC Core
 
Kubernetes: Do's, don'ts and why's
Kubernetes: Do's, don'ts and why'sKubernetes: Do's, don'ts and why's
Kubernetes: Do's, don'ts and why's
 
Aspectos nodejs
Aspectos nodejsAspectos nodejs
Aspectos nodejs
 
Pruebas del servicio web
Pruebas del servicio webPruebas del servicio web
Pruebas del servicio web
 
Codemotion Madrid 2020 - Serverless con Micronaut
Codemotion Madrid 2020 - Serverless con MicronautCodemotion Madrid 2020 - Serverless con Micronaut
Codemotion Madrid 2020 - Serverless con Micronaut
 
IoT y Dispositivos
IoT y DispositivosIoT y Dispositivos
IoT y Dispositivos
 
Mi primera aplicación para windows 10
Mi primera aplicación para windows 10Mi primera aplicación para windows 10
Mi primera aplicación para windows 10
 
Apache Server vs Nginx
Apache Server vs NginxApache Server vs Nginx
Apache Server vs Nginx
 
Docker y todo eso... más o menos
Docker y todo eso... más o menosDocker y todo eso... más o menos
Docker y todo eso... más o menos
 
Introduccion a Node.js
Introduccion a Node.jsIntroduccion a Node.js
Introduccion a Node.js
 
Empezando con node.js
Empezando con node.jsEmpezando con node.js
Empezando con node.js
 

Ähnlich wie App en tiempo real con HTML5+Node.js+Socket.IO

Ajax reverse (Comet) con ASP.NET MVC - JUTI 2011
Ajax reverse (Comet) con ASP.NET MVC - JUTI 2011Ajax reverse (Comet) con ASP.NET MVC - JUTI 2011
Ajax reverse (Comet) con ASP.NET MVC - JUTI 2011Desarrollos NEA
 
Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax
Introducción a los lenguajes de programación de la plataforma Web 2.0: AjaxIntroducción a los lenguajes de programación de la plataforma Web 2.0: Ajax
Introducción a los lenguajes de programación de la plataforma Web 2.0: AjaxDavid Arango
 
T2 aplicaciones-web
T2   aplicaciones-webT2   aplicaciones-web
T2 aplicaciones-webloloky98
 
Sistemas Distribuidos basados en la Web
Sistemas Distribuidos basados en la WebSistemas Distribuidos basados en la Web
Sistemas Distribuidos basados en la WebTensor
 
Clase17(introduccion a la web)
Clase17(introduccion a la web)Clase17(introduccion a la web)
Clase17(introduccion a la web)Tensor
 
introduccion-a-las-aplicaciones-web-sistemas
introduccion-a-las-aplicaciones-web-sistemasintroduccion-a-las-aplicaciones-web-sistemas
introduccion-a-las-aplicaciones-web-sistemasJOSEALFREDOJUAREZORT
 
UTEL Administración de Servidores Web Introducción 2023.pptx
UTEL Administración de Servidores Web Introducción 2023.pptxUTEL Administración de Servidores Web Introducción 2023.pptx
UTEL Administración de Servidores Web Introducción 2023.pptxAlexVanSchulz
 

Ähnlich wie App en tiempo real con HTML5+Node.js+Socket.IO (20)

ASP.NET MVC
ASP.NET MVCASP.NET MVC
ASP.NET MVC
 
Ajax reverse (Comet) con ASP.NET MVC - JUTI 2011
Ajax reverse (Comet) con ASP.NET MVC - JUTI 2011Ajax reverse (Comet) con ASP.NET MVC - JUTI 2011
Ajax reverse (Comet) con ASP.NET MVC - JUTI 2011
 
Introducción a SignalR
Introducción a SignalRIntroducción a SignalR
Introducción a SignalR
 
Servidores web o http
Servidores web o httpServidores web o http
Servidores web o http
 
Servidor web
Servidor webServidor web
Servidor web
 
Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax
Introducción a los lenguajes de programación de la plataforma Web 2.0: AjaxIntroducción a los lenguajes de programación de la plataforma Web 2.0: Ajax
Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax
 
Serverless Wars
Serverless WarsServerless Wars
Serverless Wars
 
[Code Camp 2009] Aplicaciones de tiempo real con Silverlight y ASP.NET - COME...
[Code Camp 2009] Aplicaciones de tiempo real con Silverlight y ASP.NET - COME...[Code Camp 2009] Aplicaciones de tiempo real con Silverlight y ASP.NET - COME...
[Code Camp 2009] Aplicaciones de tiempo real con Silverlight y ASP.NET - COME...
 
T2 aplicaciones-web
T2   aplicaciones-webT2   aplicaciones-web
T2 aplicaciones-web
 
Sistemas Distribuidos basados en la Web
Sistemas Distribuidos basados en la WebSistemas Distribuidos basados en la Web
Sistemas Distribuidos basados en la Web
 
Clase17(introduccion a la web)
Clase17(introduccion a la web)Clase17(introduccion a la web)
Clase17(introduccion a la web)
 
Internetpres
InternetpresInternetpres
Internetpres
 
Aplicaciones Web
Aplicaciones WebAplicaciones Web
Aplicaciones Web
 
200310 - Apache Web Server
200310 - Apache Web Server200310 - Apache Web Server
200310 - Apache Web Server
 
Capitulo 2 servidores
Capitulo 2   servidoresCapitulo 2   servidores
Capitulo 2 servidores
 
Capitulo 2 servidores
Capitulo 2   servidoresCapitulo 2   servidores
Capitulo 2 servidores
 
Capitulo 2 servidores
Capitulo 2   servidoresCapitulo 2   servidores
Capitulo 2 servidores
 
Capitulo 2 servidores
Capitulo 2   servidoresCapitulo 2   servidores
Capitulo 2 servidores
 
introduccion-a-las-aplicaciones-web-sistemas
introduccion-a-las-aplicaciones-web-sistemasintroduccion-a-las-aplicaciones-web-sistemas
introduccion-a-las-aplicaciones-web-sistemas
 
UTEL Administración de Servidores Web Introducción 2023.pptx
UTEL Administración de Servidores Web Introducción 2023.pptxUTEL Administración de Servidores Web Introducción 2023.pptx
UTEL Administración de Servidores Web Introducción 2023.pptx
 

Kürzlich hochgeladen

PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxAlan779941
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.FlorenciaCattelani
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...JohnRamos830530
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21mariacbr99
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxFederico Castellari
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxJorgeParada26
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIhmpuellon
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativanicho110
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxMiguelAtencio10
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanamcerpam
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estossgonzalezp1
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITMaricarmen Sánchez Ruiz
 

Kürzlich hochgeladen (12)

PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 

App en tiempo real con HTML5+Node.js+Socket.IO

  • 1. HTML5 – Node.js – Socket.io Aplicaciones Web en tiempo real
  • 2. ¿Qué es una aplicación web en tiempo real? • http://www.lightstreamer.com/demo/StockListDemo/
  • 3. Comunicación bidireccional entre el servidor y los usuarios a a b b Servidor Web
  • 5. Pull (Así funciona la Web) Servidor Web Petición Navegador Web Respuesta
  • 6. Push (Lo que necesitamos) Servidor Web Navegador Web Datos Evento
  • 7. Desde hace algunos años existen soluciones pero son poco eficientes… Servidor Web Ajax (Polling) petición respuesta petición respuesta petición respuesta
  • 8. • Script de prueba para Apache 2.2 con PHP 5.3 <?php sleep(3); echo «hola mundo»; ?> Simulamos con un script, una petición que toma 3 segundos en ejecutarse.
  • 9. 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
  • 10. Servidores tipo Comet Misma infraestructura, diferente filosofía 2
  • 11. Con los servidores tipo Comet nos acercamos mucho más a la solución ideal… Servidor tipo Comet Long polling petición respuesta petición respuesta petición
  • 12. Algunos servidores Comet / Websockets… Python Java .Net Ruby Javascript Tornado Twisted… Cometd Protcolo Bayeux GlassFish ActiveMQ… WebSync Protocolo Bayeux Thin/Faye protocolo Bayeux Node.js* Es posible ejecutarlo en Windows Azure Open Source Open Source Comercial Open Source Open Source
  • 13. 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
  • 14. 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 Peticiones Tiempo (s)
  • 15. WebSockets con HTML5 En el futuro y presente 3
  • 16. Con el API de WebSockets se crea un canal bidirecional… Servidor con soporte para WebSockets respuesta respuesta inicio
  • 17. Ejemplos con Node.js y Socket.io El futuro Desde un chat simple, hasta startups innovadores http://www.dymotics.com/ 4