CursosEmpresasBlogLiveConfPrecios

Cómo hacer aplicaciones en tiempo real

Clase 1 de 26 • Curso de Aplicaciones en Tiempo Real con Socket.io

Clase anteriorSiguiente clase

Contenido del curso

Fundamentos de Socket.io

  • 1
    Cómo hacer aplicaciones en tiempo real

    Cómo hacer aplicaciones en tiempo real

    Viendo ahora
  • 2
    Protocolos de comunicación: HTTP vs. WebSockets

    Protocolos de comunicación: HTTP vs. WebSockets

    07:49 min
  • 3
    ¿Qué es Socket.io?

    ¿Qué es Socket.io?

    03:48 min
  • 4
    Socket.io vs. WebSockets

    Socket.io vs. WebSockets

    06:00 min
  • 5
    ¿Cómo funciona Socket.io?

    ¿Cómo funciona Socket.io?

    10:49 min
  • 6
    Ciclo de vida de Socket.io

    Ciclo de vida de Socket.io

    06:17 min

Socket.io en la práctica

  • 7
    Creando nuestra primera aplicación con Socket.io

    Creando nuestra primera aplicación con Socket.io

    18:09 min
  • 8
    Obteniendo información de conexiones en el servidor

    Obteniendo información de conexiones en el servidor

    18:18 min
  • 9
    Emisión de eventos

    Emisión de eventos

    13:42 min
  • 10
    On, Once y Off

    On, Once y Off

    16:41 min
  • 11
    Broadcast de eventos

    Broadcast de eventos

    21:19 min
  • 12
    Creación de salas con Socket.io

    Creación de salas con Socket.io

    25:43 min
  • 13
    Namespaces en Socket.io

    Namespaces en Socket.io

    15:54 min
  • 14
    Lógica de envio de mensajes

    Lógica de envio de mensajes

    12:20 min
  • 15
    Manejo offline

    Manejo offline

    09:49 min
  • 16
    Eventos volátiles

    Eventos volátiles

    07:19 min
  • 17
    Manejo de Middlewares

    Manejo de Middlewares

    12:54 min

Herramientas extra

  • 18
    Debugging en Socket.io

    Debugging en Socket.io

    11:16 min
  • 19
    Configuración para testing usando la librería jest

    Configuración para testing usando la librería jest

    16:00 min
  • 20
    Testing con jest

    Testing con jest

    10:33 min
  • 21
    Admin UI

    Admin UI

    13:40 min

Proyecto WebChat

  • 22
    Estructura inicial del proyecto WebChat

    Estructura inicial del proyecto WebChat

    19:25 min
  • 23
    Sistema de autenticación

    Sistema de autenticación

    17:38 min
  • 24
    Programando la lógica del chat

    Programando la lógica del chat

    15:38 min
  • 25
    Detalles finales y demostración de chat en tiempo real

    Detalles finales y demostración de chat en tiempo real

    07:55 min

Cierre

  • 26
    ¿Quieres un Curso Práctico de Socket.io?

    ¿Quieres un Curso Práctico de Socket.io?

    01:58 min
  • Tomar el examen del curso
    • Irving Caamal

      Irving Caamal

      student•
      hace 3 años

      En Platzi no hay cursos avanzados...

      Si claro...

      Que buen curso, cuantos cursos por hacer D:

        uRieL Martinez Bautista

        uRieL Martinez Bautista

        student•
        hace 3 años

        Esto es avanzado? 😂

        Irving Caamal

        Irving Caamal

        student•
        hace 3 años

        Para mi sí, creo que la educación es subjetiva :D que padre que ya sepas tú y pienses que no es avanzado, pero para mi si que lo es! :D

      Alvaro Eduardo Garzón Pira

      Alvaro Eduardo Garzón Pira

      student•
      hace 3 años

      El profesor: "No trates de leer mis mensajes, ese no es mi WhatsApp"

      Yo: "¡Maldición!"

        Carlos Eduardo Gomez García

        Carlos Eduardo Gomez García

        teacher•
        hace 3 años

        Te caché! xD

      Rafael Alejandro Belalcázar Burbano

      Rafael Alejandro Belalcázar Burbano

      student•
      hace 3 años

      Estaba esperando este curso desde que lo anunciaron

        Carlos Eduardo Gomez García

        Carlos Eduardo Gomez García

        teacher•
        hace 3 años

        A por él! Cualquier feedback es bien recibido 💚

        Víctor José Ruiz Herrera

        Víctor José Ruiz Herrera

        student•
        hace 3 años

        #RetaxMaster @RetaxMaster

        ¿En este curso vemos el uso de socket_io con multiples instancias en el servidor?

        Por ejemplo si subo mi aplicacion en azure y subo las instancias a mas de dos, el socket revienta, porque no sabe a cual instancia responder.

        Espero leas este comentario. Gracias por este excelente curso.

      Carlos Alejandro Hernández Mejía

      Carlos Alejandro Hernández Mejía

      student•
      hace 3 años

      Introducción

      Una aplicación en tiempo real es aquella que permite mantener dos o más clientes conectados y que a su vez les informa sobre cambios en las páginas sin necesidad de que estas lo soliciten de manera explícita.

      💡 En pocas palabras, en estas aplicaciones, tanto el cliente cómo el servidor pueden mandar información cuando sea necesario.

      En la actualidad, vivimos rodeados de este tipo de aplicaciones. Por ejemplo, desde las aplicaciones de mensajería (como WhatsApp, Signal, Telegram, etc). hasta las redes sociales (como el feed Facebook, Twitter, Instagram, etc.) o aplicaciones de deliverys, son aplicaciones en tiempo real.

      Es aquí donde el modelo tradicional se nos queda corto, haciendo difícil el desarrollo de aplicaciones en tiempo real, ya que en dicho modelo el cliente debe enviar una solicitud para que el servidor pueda responder.

      💡 Es decir, no importa si el servidor tiene nueva información, esta no se verá reflejada en el navegador si este no la solicita y el navegador nunca sabrá cuándo solicitarla.

      En parte, esto se debe a que el protocolo HTTP está diseñado especialmente para aplicaciones del tipo cliente-servidor (dónde lo “común” es mandar peticiones al servidor y recibir una respuesta de este) y no para aplicaciones en tiempo real.

      Para resolver esta problemática, surgió el modelo Comet, que permitía simular aplicaciones en tiempo real, usando una solicitud HTTP de larga duración (HTTP Long-Polling Request).

      Esto consistía básicamente en que el cliente iniciaba una solicitud, la cual se mantenía abierta por mucho tiempo, para que el servidor pueda responder en cuanto tenga nueva información, pero sin finalizar la respuesta.

      💡 Comet también era conocido como “Ajas push” y fue usado por Gmail en sus inicios.

      Esto era ineficiente, por ello, surge el protocolo Websockets, el cual, proporciona un canal bidireccional y full-duplex que permite tener varios puntos finales (o sockets) conectados al mismo tiempo.

      Gracias a esto, los sockets pueden enviar datos a los demás (sin que estos los pidan), permitiendo tener una comunicación en tiempo real. Son más eficientes cuando necesitamos tener actualizaciones continuas, pues no se requiere enviar solicitudes para obtener una respuesta.

      💡 Los sockets permiten que múltiples aplicaciones cliente se actualicen de forma “automática” siempre que hayan nuevos datos del servidor.

      Carlos Antonio Molano Solarte

      Carlos Antonio Molano Solarte

      student•
      hace 3 años

      Se ve genial el curso...

      Juan Sebastián Joya Rodríguez

      Juan Sebastián Joya Rodríguez

      student•
      hace 3 años

      El nuevo curso de Programación Básica tiene como proyecto hacer un video juego, para lo cual se usan cientos de peticiones http. Considero que, quien quiera optimizar ese video juego, debe si o si tomar este curso

        Carlos Eduardo Gomez García

        Carlos Eduardo Gomez García

        teacher•
        hace 3 años

        Sería interesante ponerse como reto personal traducir esas peticiones HTTP a un modelo como el de WebSockets 👀

      Cristian Camilo Cortes Ortiz

      Cristian Camilo Cortes Ortiz

      student•
      hace un año

      ¿QUÉ ES UNA APLICACIÓN EN TIEMPO REAL?

      Una aplicación en tiempo real es un sistema de software diseñado para procesar y transmitir datos instantáneamente entre el servidor y el cliente, garantizando una interacción continua y sin demoras perceptibles. Utiliza tecnologías para mantener una comunicación bidireccional persistente, permitiendo la actualización dinámica de la interfaz de usuario en respuesta a eventos del servidor o de otros clientes. Esto es esencial en aplicaciones donde la inmediatez y la sincronización son críticas, como en:

      • chats
      • videojuegos multijugador
      • sistemas de monitoreo en vivo
      • plataformas de colaboración en tiempo real
        • Redes sociales

      ¿CUÁL ES EL PROBLEMA?

      El problema es que en el modelo tradicional cliente-servidor solo se puede actualizar la página únicamente si el cliente lo pide, es decir, no importa si el servidor tiene una nueva información, este no podrá mostrarla si el navegador no lo pide. Esto dificulta el desarrollo de aplicaciones en tiempo real, pues no se sabe cuándo el servidor tendrá información nueva para pedirla.

      En parte, esto se debe a que el protocolo HTTP no está especialmente diseñado para este tipo de aplicaciones. Este protocolo es usado en aplicaciones que usan el modelo tradicional cliente-servidor*, ya que lo común es mandar un request y recibir un response.*

      COMET

      Una de las formas mediante las cuales se podía simular aplicaciones en tiempo real con el protocolo HTTP era usando un modelo llamado “Comet” también era conocido como “Ajax Push”. Este modelo fue utilizado por Gmail en sus inicios.

      Comet usa una solicitud HTTP de larga duración (Long-Polling Request). Básicamente, el cliente inicia una solicitud que se mantiene abierta por mucho tiempo para que el servidor pueda responder datos en cuento tenga nueva información, pero este no finalizará la respuesta.

      PROTOCOLO WEBSOCKET

      El protocolo WebSocket es una tecnología de comunicación que permite una conexión bidireccional y persistente entre un cliente y un servidor. A diferencia de los protocolos tradicionales como HTTP*, que siguen un modelo de* petición-respuesta*,* WebSocket establece una única conexión que permanece abierta, permitiendo el intercambio continuo de datos en tiempo real con baja latencia.

      Raul Valdez Piedra

      Raul Valdez Piedra

      student•
      hace 3 años

      Iniciando este curso, suena muy interesante, ya había escuchado al respecto pero no me había dado el tiempo de aprenderla, vamos a darle a este curso, el instructor es muy bueno, así que nunca pares de aprender!!!

      Diego Reyes Cabrera

      Diego Reyes Cabrera

      student•
      hace 2 años

      Lo explicarán más adelante, pero igual quiero comentar que, un socket no envía información directamente a otros sockets, sino que se la envía al servidor. El servidor procesa la información enviada, y actualiza a todos los demás sockets que estén conectados al servidor por este protocolo.

      Obviamente hay que cubrir un montón más. Pero quise dejar eso claro por esta clase.

      Juan Pablo Lopez Ramirez

      Juan Pablo Lopez Ramirez

      student•
      hace 3 años

      Nunca había esperado tanto un curso como este jajaaja, el semestre pasado en la universidad no pude entender este tema y tengo la esperanza de que con este curso por fin podre comprenderlo.

      Alvaro Legarda

      Alvaro Legarda

      student•
      hace 3 años

      jajajajaj este profesor me sacó la risa con su is de enseñar, muy cool.

      Irving Juárez

      Irving Juárez

      student•
      hace 5 meses

      Incluso los videojuegos en linea son una aplicación en tiempo real... Incluso cualquier aplicación de mensajeria es una aplicación en tiempo real

      Xamir E Rojas

      Xamir E Rojas

      student•
      hace 3 años

      Estoy desarrollando un proyecto con SocketIO y me toca ir aprendiendo sobre la marcha.(Este curso lo estaba esperando hace mucho!) Y tengo una duda:

      Quisiera estar seguro... ¿Qué pasa si emito a un socket, pero nadie está escuchando?

        Angel Javier Sanchez Tenjo

        Angel Javier Sanchez Tenjo

        student•
        hace 3 años

        Puede ocurrir 2 escenarios de la situación que preguntas:

        1. El socket esta desconectado, desde el cliente genera un error de conexión; pero puedes capturar esa desconexión cuando ocurra.

        2. Tienes un socket abierto; siempre esta escuchando y envias un evento/mensaje que no esta mapeado en el server-socket no pasaria nada; el server solo recibe y no procesa el evento.

      Israel Josue Feric Godoy

      Israel Josue Feric Godoy

      student•
      hace un año

      😵‍💫mareado...

      Miguel Enrique Velásquez Millán

      Miguel Enrique Velásquez Millán

      student•
      hace un año

      Aww~ Je je je, mi momento favorito de la clase introductoria ❤️~

      <img height="140" width="282" src="https://i.imgur.com/4OUj5Vs.png" />

      Ahora sí que sí a hacer aplicaciones en tiempo real 🔥.

      Luis Angel Castillo Vega

      Luis Angel Castillo Vega

      student•
      hace 2 años

      En 2024... quien me ayuada en angular?

      Roberto Pérez

      Roberto Pérez

      student•
      hace 3 años

      Empezando este curso, estoy seguro que será muy genial, la introducción me encantó!

      Fermín Alejandro Flores Reyes

      Fermín Alejandro Flores Reyes

      student•
      hace 3 años

      Excelente! :3 a seguir aprendiendo

      Pablo Rocha

      Pablo Rocha

      student•
      hace 3 años

      Deseando terminar el curso para pasar una side project que actualmente "simula" tiempo real con recargas automáticas en cortos periodos de tiempo a websocket :)

      VICTOR MANUEL MURILLO CAMAYO

      VICTOR MANUEL MURILLO CAMAYO

      student•
      hace 3 años
      Solo he visto la introducción y no creo parar de aprender! Vamos con toda. Gracias profe

    Escuelas

    • Desarrollo Web
      • Fundamentos del Desarrollo Web Profesional
      • Diseño y Desarrollo Frontend
      • Desarrollo Frontend con JavaScript
      • Desarrollo Frontend con Vue.js
      • Desarrollo Frontend con Angular
      • Desarrollo Frontend con React.js
      • Desarrollo Backend con Node.js
      • Desarrollo Backend con Python
      • Desarrollo Backend con Java
      • Desarrollo Backend con PHP
      • Desarrollo Backend con Ruby
      • Bases de Datos para Web
      • Seguridad Web & API
      • Testing Automatizado y QA para Web
      • Arquitecturas Web Modernas y Escalabilidad
      • DevOps y Cloud para Desarrolladores Web
    • English Academy
      • Inglés Básico A1
      • Inglés Básico A2
      • Inglés Intermedio B1
      • Inglés Intermedio Alto B2
      • Inglés Avanzado C1
      • Inglés para Propósitos Específicos
      • Inglés de Negocios
    • Marketing Digital
      • Fundamentos de Marketing Digital
      • Marketing de Contenidos y Redacción Persuasiva
      • SEO y Posicionamiento Web
      • Social Media Marketing y Community Management
      • Publicidad Digital y Paid Media
      • Analítica Digital y Optimización (CRO)
      • Estrategia de Marketing y Growth
      • Marketing de Marca y Comunicación Estratégica
      • Marketing para E-commerce
      • Marketing B2B
      • Inteligencia Artificial Aplicada al Marketing
      • Automatización del Marketing
      • Marca Personal y Marketing Freelance
      • Ventas y Experiencia del Cliente
      • Creación de Contenido para Redes Sociales
    • Inteligencia Artificial y Data Science
      • Fundamentos de Data Science y AI
      • Análisis y Visualización de Datos
      • Machine Learning y Deep Learning
      • Data Engineer
      • Inteligencia Artificial para la Productividad
      • Desarrollo de Aplicaciones con IA
      • AI Software Engineer
    • Ciberseguridad
      • Fundamentos de Ciberseguridad
      • Hacking Ético y Pentesting (Red Team)
      • Análisis de Malware e Ingeniería Forense
      • Seguridad Defensiva y Cumplimiento (Blue Team)
      • Ciberseguridad Estratégica
    • Liderazgo y Habilidades Blandas
      • Fundamentos de Habilidades Profesionales
      • Liderazgo y Gestión de Equipos
      • Comunicación Avanzada y Oratoria
      • Negociación y Resolución de Conflictos
      • Inteligencia Emocional y Autogestión
      • Productividad y Herramientas Digitales
      • Gestión de Proyectos y Metodologías Ágiles
      • Desarrollo de Carrera y Marca Personal
      • Diversidad, Inclusión y Entorno Laboral Saludable
      • Filosofía y Estrategia para Líderes
    • Diseño de Producto y UX
      • Fundamentos de Diseño UX/UI
      • Investigación de Usuarios (UX Research)
      • Arquitectura de Información y Usabilidad
      • Diseño de Interfaces y Prototipado (UI Design)
      • Sistemas de Diseño y DesignOps
      • Redacción UX (UX Writing)
      • Creatividad e Innovación en Diseño
      • Diseño Accesible e Inclusivo
      • Diseño Asistido por Inteligencia Artificial
      • Gestión de Producto y Liderazgo en Diseño
      • Diseño de Interacciones Emergentes (VUI/VR)
      • Desarrollo Web para Diseñadores
      • Diseño y Prototipado No-Code
    • Contenido Audiovisual
      • Fundamentos de Producción Audiovisual
      • Producción de Video para Plataformas Digitales
      • Producción de Audio y Podcast
      • Fotografía y Diseño Gráfico para Contenido Digital
      • Motion Graphics y Animación
      • Contenido Interactivo y Realidad Aumentada
      • Estrategia, Marketing y Monetización de Contenidos
    • Desarrollo Móvil
      • Fundamentos de Desarrollo Móvil
      • Desarrollo Nativo Android con Kotlin
      • Desarrollo Nativo iOS con Swift
      • Desarrollo Multiplataforma con React Native
      • Desarrollo Multiplataforma con Flutter
      • Arquitectura y Patrones de Diseño Móvil
      • Integración de APIs y Persistencia Móvil
      • Testing y Despliegue en Móvil
      • Diseño UX/UI para Móviles
    • Diseño Gráfico y Arte Digital
      • Fundamentos del Diseño Gráfico y Digital
      • Diseño de Identidad Visual y Branding
      • Ilustración Digital y Arte Conceptual
      • Diseño Editorial y de Empaques
      • Motion Graphics y Animación 3D
      • Diseño Gráfico Asistido por Inteligencia Artificial
      • Creatividad e Innovación en Diseño
    • Programación
      • Fundamentos de Programación e Ingeniería de Software
      • Herramientas de IA para el trabajo
      • Matemáticas para Programación
      • Programación con Python
      • Programación con JavaScript
      • Programación con TypeScript
      • Programación Orientada a Objetos con Java
      • Desarrollo con C# y .NET
      • Programación con PHP
      • Programación con Go y Rust
      • Programación Móvil con Swift y Kotlin
      • Programación con C y C++
      • Administración Básica de Servidores Linux
    • Negocios
      • Fundamentos de Negocios y Emprendimiento
      • Estrategia y Crecimiento Empresarial
      • Finanzas Personales y Corporativas
      • Inversión en Mercados Financieros
      • Ventas, CRM y Experiencia del Cliente
      • Operaciones, Logística y E-commerce
      • Gestión de Proyectos y Metodologías Ágiles
      • Aspectos Legales y Cumplimiento
      • Habilidades Directivas y Crecimiento Profesional
      • Diversidad e Inclusión en el Entorno Laboral
      • Herramientas Digitales y Automatización para Negocios
    • Blockchain y Web3
      • Fundamentos de Blockchain y Web3
      • Desarrollo de Smart Contracts y dApps
      • Finanzas Descentralizadas (DeFi)
      • NFTs y Economía de Creadores
      • Seguridad Blockchain
      • Ecosistemas Blockchain Alternativos (No-EVM)
      • Producto, Marketing y Legal en Web3
    • Recursos Humanos
      • Fundamentos y Cultura Organizacional en RRHH
      • Atracción y Selección de Talento
      • Cultura y Employee Experience
      • Gestión y Desarrollo de Talento
      • Desarrollo y Evaluación de Liderazgo
      • Diversidad, Equidad e Inclusión
      • AI y Automatización en Recursos Humanos
      • Tecnología y Automatización en RRHH
    • Finanzas e Inversiones
      • Fundamentos de Finanzas Personales y Corporativas
      • Análisis y Valoración Financiera
      • Inversión y Mercados de Capitales
      • Finanzas Descentralizadas (DeFi) y Criptoactivos
      • Finanzas y Estrategia para Startups
      • Inteligencia Artificial Aplicada a Finanzas
      • Domina Excel
      • Financial Analyst
      • Conseguir trabajo en Finanzas e Inversiones
    • Startups
      • Fundamentos y Validación de Ideas
      • Estrategia de Negocio y Product-Market Fit
      • Desarrollo de Producto y Operaciones Lean
      • Finanzas, Legal y Fundraising
      • Marketing, Ventas y Growth para Startups
      • Cultura, Talento y Liderazgo
      • Finanzas y Operaciones en Ecommerce
      • Startups Web3 y Blockchain
      • Startups con Impacto Social
      • Expansión y Ecosistema Startup
    • Cloud Computing y DevOps
      • Fundamentos de Cloud y DevOps
      • Administración de Servidores Linux
      • Contenerización y Orquestación
      • Infraestructura como Código (IaC) y CI/CD
      • Amazon Web Services
      • Microsoft Azure
      • Serverless y Observabilidad
      • Certificaciones Cloud (Preparación)
      • Plataforma Cloud GCP

    Platzi y comunidad

    • Platzi Business
    • Live Classes
    • Lanzamientos
    • Executive Program
    • Trabaja con nosotros
    • Podcast

    Recursos

    • Manual de Marca

    Soporte

    • Preguntas Frecuentes
    • Contáctanos

    Legal

    • Términos y Condiciones
    • Privacidad
    • Tyc promociones
    Reconocimientos
    Reconocimientos
    Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
    Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
    Logo reconocimientoPrimera Startup EdTech · 2018
    Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
    Logo reconocimientoCEO Mejor Emprendedor del año · 2024
    De LATAM conpara el mundo
    YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads