Name: Angular: Aplicaciones en tiempo real con sockets y rest-2019
Rating: 4.8 (1600 reviews)

Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Created byFernando Herrera

Last updated 1/2026

Spanish

What you'll learn

Tener un dominio completo de la emisión y escucha de eventos por sockets
Usar Angular en el Front-End y mezclar sockets con servicios rest en el Back-End
Crear aplicaciones que en tiempo real actualicen información de todos los clientes conectados
Aprender a disparar eventos de sockets por servicios REST
Crear clases y servicios reutilizables que te permitan la configuración por sockets en segundos.

Course content

12 sections • 117 lectures • 9h 43m total length

Curso Legacy2:16
Introducción1:00
¿Cómo funcionará el curso?3:30
¿Cómo hacer preguntas?3:42
Siempre lo digo, pero es necesario decirlo en todos los cursos
Instalaciones necesarias para seguir el curso5:43
Lista de las instalaciones necesarias para poder trabajar el curso sin problemas
Instalación y uso de Nodemon3:05
Usaré nodemon durante el curso, y es necesario que ustedes sepan cómo funciona.
Nota de Actualización - ¡Importante!3:45
¡Únete a Nuestra Comunidad de DevTalles en Discord!0:18

Introducción a la sección1:01
Breve resumen de lo que veremos a continuación
Temas puntuales de la sección0:18
Resumen puntual de los temas que veremos a continuación
¿Cómo crear una aplicación con respuestas en tiempo real?6:48
Introducción al tema de los sockets
Conceptos clave para el manejo de sockets7:35
Una serie de conceptos claves que necesitamos dominar para que se nos facilite el uso de sockets
Diferentes librerías para el manejo de sockets0:07
Aquí veremos hablaremos de varias librerías especializadas en el manejo de sockets para nuestras aplicaciones

Introducción a la sección0:51
Introducción a lo que haremos en esta sección, es importante señalar que no existe una única forma de hacer esto, siempre hay espacios para las optimizaciones y mejoras
Temas puntuales de la sección0:21
Una descripción puntual de los temas que aquí veremos
Inicio de proyecto - Express Server8:41
Empezaremos la configuración de Express
Creando nuestro servidor de express8:52
Aquí vamos a crear nuestro servidor de express que usaremos después para configurar los sockets
Creando servicios rest - Get y Post5:29
Obtener información del Post y argumentos por URL6:41
Configuración del CORS2:36
El CORS nos permitirá llamar nuestros servicios rest desde cualquier otro dominio
Realizar un backup a GitHub - Rest Server10:42
Esto es un procedimiento para prevenir que perdamos la información por cualquier motivo
Código fuente de la sección0:14
Aquí les dejo el código fuente por si acaso tuvieron algún inconveniente o problema

Introducción a la sección1:06
Una breve introducción a la sección
Temas puntuales de la sección0:32
Un resumen de los temas que veremos en esta sección
Continuación del proyecto - Socket.io7:45
Aquí tomaremos el código de la sección anterior, y empezaremos a configurar nuestros sockets
Patrón singleton para nuestra clase Server3:59
Aquí vamos a implementar el patrón singleton para asegurarnos que únicamente tengamos una instancia del server.
Nota de Actualización - ¡Importante!0:10
Angular - Conectarnos a nuestro servidor7:41
Aquí vamos a realizar una conexión hacia nuestro servidor mediante sockets
Estado del servidor de sockets desde el cliente7:49
Interfaz visual para indicar cuando hay conexión al servidor de sockets5:19
Aquí haremos una interfaz visual para que el usuario sepa cuando hay o no comunicación con el servidor de sockets
Detectar la desconexión de un usuario - Servidor6:46
Aquí aprenderemos a detectar cuando un cliente se desconecta
Emitir un mensaje mediante sockets al servidor11:14
Aquí aprenderemos cómo realizar el emit hacia el websocket server
Interfaz visual para enviar mensajes6:32
Aquí haremos la parte de Angular para el envío de mensajes
Escuchar emisión desde el servidor10:28
Aquí aprenderemos cómo escuchar eventos emitidos desde el servidor
Interfaz visual de los mensajes nuevos7:52
Aquí mostraremos los nuevos mensajes que recibamos vía sockets
Backup de los proyectos sección 44:45
Es momento de realizar un backup de los proyectos para estar listos para la siguiente sección
Código fuente de la sección0:23
Aquí tienen el código fuente de la sección por si lo llegan a necesitar

Introducción a la sección1:17
Un breve resumen de lo que veremos a continuación
Temas puntuales de la sección0:18
Un resumen puntual de los temas que veremos en esta sección
Inicio del proyecto - Sección 55:45
Aquí vamos a comenzar las preparaciones de lo que necesitaremos para esta sección 5
Implementando un sistema de rutas en Angular6:10
Es momento de implementar nuestras rutas en la aplicación de Angular, que nos permitan movernos entre pantallas
Nombre de usuario y login template15:21
Aquí vamos a trabajar la pantalla de login y el envío del nombre del usuario al servidor
Manejando usuarios conectados en el socket-server11:49
Manejar los usuarios conectados al socket-server
Manejo de usuarios - Socket Server10:31
Aquí aprenderemos a controlar los usuarios que están conectados en el socket server
Mantener el usuario a pesar de las reconexiones9:26
Aquí aprenderemos una forma de configurar nuevamente el usuario a pesar de que recarguemos y generemos un nuevo ID
Angular Guard - Obligar al usuario a siempre tener nombre5:53
Reconectar y renombrar usuario en el Socket Server4:37
Así conservaremos el usuario con su nuevo ID
Recibir mensajes privados desde un servicio REST9:34
Aquí haremos algo interesante, enviaremos un mensaje privado que le llegue únicamente a un usuario en particular
Tarea - Enviar un mensaje al chat general desde un servicio REST3:27
Aquí vamos a realizar un pequeño ejercicio para enviar un mensaje desde un servicio REST al chat
Backup de los proyectos sección 52:39
Código fuente de la sección0:16
Código fuente de la sección

Introducción a la sección1:28
Resumen de los temas que veremos en esta sección
Temas puntuales de la sección0:16
Resumen puntual de los temas de la sección
Inicio del proyecto - Sección 62:00
Aquí comenzaremos el proyecto de la sección 6, que es referente al manejo de las listas de usuarios
REST - Obtener los IDs de los usuarios activos5:34
Aquí crearemos un servicio REST que podamos llamar y obtener todos los usuarios activos
REST - Obtener los nombres y los IDs de las personas conectadas7:47
Componente de Lista de Usuarios11:07
Aquí mostraremos una lista de los usuarios conectados y en tiempo real detectaremos sus cambios
Tarea - Obtener lista de usuarios - socket7:56
Aquí resolveremos el problema de que al momento de entrar al chat, no tenemos la lista actualizada de personas
Logout - Cierre de sesión7:25
Aquí haremos el cierre de sesión del usuario
Realizar un backup - Socket Server - Base2:39
Aquí realizaremos un backup de todos los cambios hasta el momento
Código fuente de la sección0:10
Aquí les dejo el respaldo por si acaso lo necesitan

Introducción a la sección1:03
Un resumen de los temas y ejercicios que haremos en esta sección
Temas puntuales de la sección0:34
Un resumen de los temas que cubriremos en esta sección
Inicio del proyecto - Gráficas en tiempo real9:58
Angular - Gráfica dinámica - Sin Sockets8:17
Aquí vamos a crear la gráfica en primera instancia, luego le añadiremos sockets y servicios rest
Backend - Crear una clase para controlar la gráfica5:29
Aquí crearemos una clase que nos sirva para controlar la información de la gráfica
REST - Obtener la información inicial de la gráfica8:08
Aquí realizaremos un servicio REST para obtener la información inicial de la gráfica
Socket - Actualizar la gráfica mediante sockets7:08
Aquí actualizaremos la gráfica cuando se detecten cambios en la misma.
Código fuente de la sección0:13
Código fuente de todo lo realizado en esta sección

Introducción a la sección0:44
Un breve resumen de lo que a continuación veremos
Temas puntuales de la sección0:39
Resumen puntual de los temas que veremos a continuación
Demostración de la tarea e instrucciones iniciales2:09
Aquí les mostraré lo que haremos al finalizar la sección y también les daré los lineamientos iniciales.
Inicio del proyecto - Tarea - Encuesta8:17
Configuración de la gráfica8:00
Aquí continuaremos con la creación de la gráfica que luego haremos funcionar en tiempo real
Configuración del backend - Encuestas5:58
Conexión de sockets desde Angular - Encuestas8:24
Aquí realizaremos que nuestra aplicación funcione tanto con el servicio REST como con sockets
Código fuente de la sección0:23
Aquí les dejo el código fuente de la sección por si acaso lo necesitan

Introducción a la sección1:27
Una breve descripción de lo que veremos en la sección
Temas puntuales de la sección0:41
Una lista de temas puntuales de la sección
Demostración de lo que lograremos al finalizar la sección1:47
Una breve descripción de lo que haremos en esta sección
Enlaces para la próxima clase0:07
Abrir los siguientes enlaces y proceder con la siguiente clase
Inicio de proyecto - mapbox6:22
Aquí comenzaremos el proyecto de mapas
Textos para la siguiente clase0:09
Textos para la siguiente clase
Mostrar el mapa de Mapbox8:47
Aquí trabajaremos en mostrar el mapa de Mapbox
Mostrar marcadores en el mapa8:03
Aquí vamos a trabajar añadiendo marcadores al mapa
Crear marcadores y evento Drag de los mismos6:46
Aquí aprenderemos arrastrar marcadores y a crearlos
Eliminar marcadores5:19
Aquí aprenderemos a borrar marcadores y también a obtener eventos del popup
Descargar: Socket-server-multi0:10
Vamos a comenzar a configurar nuestro servidor de sockets
Inicializando nuestro servidor de sockets5:02
Aquí empezaremos la configuración de nuestro servidor de sockets
Crear la lógica para el manejo de sockets en el servidor9:38
Aquí crearemos una clase que nos ayude al manejo de sockets en nuestro backend
Conectar nuestra aplicación de Angular con nuestro servidor de sockets5:53
Un paso muy importante para comunicar el frontend con el backend
Angular - Leer los marcadores iniciales11:15
Aquí vamos a trabajar leyendo los marcadores iniciales de nuestra aplicación
Socket - Crear nuevos marcadores13:58
Aquí trabajaremos creando todo lo necesario para crear un socket que permita crear el marcador en todos los clientes
Socket - Borrar marcadores8:44
Aquí vamos a eliminar marcadores
Socker - Mover marcadores8:22
Aquí vamos a trabajar moviendo en tiempo real los marcadores
Código fuente de la sección0:06
Aquí les dejo el código fuente del servidor y de la aplicación de Angular

Introducción a la sección1:34
Un breve resumen de lo que veremos en la sección
Temas puntuales de la sección0:41
Temas que tocaremos en la sección
Inicio de proyecto - Mapas7:05
Aquí empezaremos a crear todo lo necesario para trabajar con la librería nativa de mapas de Google
Mostrar el mapa11:17
En este video trabajaremos mostrando un el mapa de google en Angular, usando la librería nativa de Google
Mostrar marcadores en el mapa7:45
Aquí aprenderemos a mostrar marcadores en el mapa
InfoWindow, Click, doble click y drag de un marcador9:32
Son varias cosas que debemos de hacer antes de conectar los sockets
Agregar marcadores al mapa4:10
Aquí agregaremos marcadores de forma dinámica
Backend - Creando la lógica para el manejo de marcadores8:54
Aquí comenzaremos las funciones necesarias para establecer la comunicación con sockets en nuestro backend
REST - Obtener marcadores iniciales9:07
Crearemos el servicio rest para obtener los marcadores iniciales del mapa
Configurar Socket.io en nuestra aplicación de Angular1:53
Es momento de volver a configurar socket.io en nuestra aplicacicón de Angular
Socket - Evento marcador-nuevo8:53
Vamos a escuchar y emitir cuando un nuevo marcador es creado.
Socket - Evento marcador-borrar5:50
Socket - Evento marcador-mover6:39
Aquí vamos a realizar el movimiento de un marcador conforme otro usuario lo mueva
Código fuente de la sección0:10
Aquí pueden descargar todo el código realizado en esta sección

Requirements

Es necesario tener conocimientos de Angular 2+
Todo el curso está hecho en TypeScript, por lo que es necesario que conozcas un poco de TypeScript
Conocimientos sobre Node son recomendados
Saber la teoría de servicios REST

Description

Nota Legacy:

Después de varios años desde el lanzamiento inicial de este curso, queremos informarte que el mismo ha pasado a ser versión legacy. Esto implica que su contenido no recibirá actualizaciones adicionales y nuestro equipo de Co-instructores no continuará proporcionando soporte a preguntas relacionadas a este curso.

Sin embargo, queremos que sigas aprendiendo con confianza. Por eso, te invitamos a unirte a nuestra comunidad en Discord, donde podrás conectar con otros estudiantes, compartir conocimientos y recibir apoyo de nuestra comunidad.

¡Gracias por tu comprensión y por ser parte de nuestra comunidad de aprendizaje!

Angular: Aplicaciones en tiempo real con sockets y rest

Este curso tiene varios objetivos en concreto, que van desde aprender a crear tu propio servidor REST, integrarle la comunicación de sockets y la creación de varias aplicaciones en Angular para el consumo de dichos servicios REST y establecer la comunicación en tiempo real con sockets.

Aquí una lista de temas que tocamos en el curso:

Socket io
Node
Express
REST
CORS
Api de google maps nativa
Tips interesantes en Angular
Gráficas en tiempo real
Interacción de mapas en tiempo real
Comunicación 1 a 1 y 1 a muchos mediante sockets
Emisión de eventos de sockets desde servicios REST
Obtener información de sockets desde servicios REST
Acciones personalizadas de sockets dede servicios REST
Typings
TypeScript
Y más

Todo el curso está escrito en TypeScript, desde el front hasta en backend. Al finalizar el curso podrás aplicar este conocimiento para crear tus propias aplicaciones que muestren información en tiempo real y notificar a tus usuarios cuando hay nueva información que les interese o necesiten recibir retroalimentación del servidor sin que el cliente lo solicite explícitamente.

Es importante que sepas que el curso no es para personas que deseen aprender Angular, presta atención en los requisitos del mismo, porque en el curso me enfoco en la creación del servidor de sockets, consumo de los mismos en Angular y el uso de servicios rest para emitir eventos que notifican a los clientes conectados por sockets.

El curso te enseñará tips de Angular, Google Maps, TypeScript, Node, Express y más… pero recuerda que no te enseñará Angular.

Puedes revisar los videos gratuitos y el currículo del curso para tener una mejor idea de lo que contiene.

Who this course is for:

Personas que quieran aprender sobre sockets
Personas que deseen crear aplicaciones en tiempo real
Personas que quieran seguir expandiendo sus conocimientos de Angular
Personas que quieran mejorar en TypeScript y Node
Personas que deseen integrar Sockets con servicios REST

What you'll learn

Explore related topics

Course content

Introducción8 lectures • 23min

¿Qué son los sockets?5 lectures • 16min

Configuración de Express, Rest Server en TypeScript9 lectures • 44min

Angular App + Socket Server15 lectures • 1hr 22min

Identificar usuarios de sockets y mensajes a sockets vía Rest Services14 lectures • 1hr 27min

Manejo de las lista de usuarios vía sockets y servicios REST10 lectures • 46min

Ejercicio - Gráfica en tiempo real8 lectures • 41min

Tarea - Encuesta en tiempo real8 lectures • 35min

MapBox - Aplicación de mapas en tiempo real19 lectures • 1hr 43min

GoogleMaps - Aplicación de Mapas en tiempo real14 lectures • 1hr 24min

Requirements

Description

Who this course is for: