SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Tendances (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
 

Similaire à Node.js-Socket.io-HTML5

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
 

Similaire à Node.js-Socket.io-HTML5 (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
 

Dernier

Actividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolarActividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolar24roberto21
 
Slideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan GerenciaSlideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan Gerenciacubillannoly
 
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfLa Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfjeondanny1997
 
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxModelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxtjcesar1
 
LINEA DE TIEMPO LITERATURA DIFERENCIADO LITERATURA.pptx
LINEA DE TIEMPO LITERATURA DIFERENCIADO LITERATURA.pptxLINEA DE TIEMPO LITERATURA DIFERENCIADO LITERATURA.pptx
LINEA DE TIEMPO LITERATURA DIFERENCIADO LITERATURA.pptxkimontey
 
La tecnología y su impacto en la sociedad
La tecnología y su impacto en la sociedadLa tecnología y su impacto en la sociedad
La tecnología y su impacto en la sociedadEduardoSantiagoSegov
 
Trabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfTrabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfedepmariaperez
 
Documentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosDocumentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosAlbanyMartinez7
 
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdfBetianaJuarez1
 
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxAlexander López
 
Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)JuanStevenTrujilloCh
 
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024u20211198540
 
David_Gallegos - tarea de la sesión 11.pptx
David_Gallegos - tarea de la sesión 11.pptxDavid_Gallegos - tarea de la sesión 11.pptx
David_Gallegos - tarea de la sesión 11.pptxDAVIDROBERTOGALLEGOS
 
certificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfcertificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfFernandoOblitasVivan
 
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptxHugoGutierrez99
 
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxPLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxhasbleidit
 
Herramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfHerramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfKarinaCambero3
 
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptLUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptchaverriemily794
 
Viguetas Pretensadas en concreto armado
Viguetas Pretensadas  en concreto armadoViguetas Pretensadas  en concreto armado
Viguetas Pretensadas en concreto armadob7fwtwtfxf
 
Análisis de Artefactos Tecnologicos (3) (1).pdf
Análisis de Artefactos Tecnologicos  (3) (1).pdfAnálisis de Artefactos Tecnologicos  (3) (1).pdf
Análisis de Artefactos Tecnologicos (3) (1).pdfsharitcalderon04
 

Dernier (20)

Actividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolarActividades de computación para alumnos de preescolar
Actividades de computación para alumnos de preescolar
 
Slideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan GerenciaSlideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan Gerencia
 
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfLa Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
 
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptxModelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
Modelo de Presentacion Feria Robotica Educativa 2024 - Versión3.pptx
 
LINEA DE TIEMPO LITERATURA DIFERENCIADO LITERATURA.pptx
LINEA DE TIEMPO LITERATURA DIFERENCIADO LITERATURA.pptxLINEA DE TIEMPO LITERATURA DIFERENCIADO LITERATURA.pptx
LINEA DE TIEMPO LITERATURA DIFERENCIADO LITERATURA.pptx
 
La tecnología y su impacto en la sociedad
La tecnología y su impacto en la sociedadLa tecnología y su impacto en la sociedad
La tecnología y su impacto en la sociedad
 
Trabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfTrabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdf
 
Documentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos JuridicosDocumentacion Electrónica en Actos Juridicos
Documentacion Electrónica en Actos Juridicos
 
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
 
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
 
Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)
 
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024
 
David_Gallegos - tarea de la sesión 11.pptx
David_Gallegos - tarea de la sesión 11.pptxDavid_Gallegos - tarea de la sesión 11.pptx
David_Gallegos - tarea de la sesión 11.pptx
 
certificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfcertificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdf
 
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
 
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxPLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
 
Herramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfHerramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdf
 
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptLUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
 
Viguetas Pretensadas en concreto armado
Viguetas Pretensadas  en concreto armadoViguetas Pretensadas  en concreto armado
Viguetas Pretensadas en concreto armado
 
Análisis de Artefactos Tecnologicos (3) (1).pdf
Análisis de Artefactos Tecnologicos  (3) (1).pdfAnálisis de Artefactos Tecnologicos  (3) (1).pdf
Análisis de Artefactos Tecnologicos (3) (1).pdf
 

Node.js-Socket.io-HTML5

  • 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