Masterclass

Empezando con WebSockets en HTML con Andros Fenollosa

Lo que puedes lograr con HTML yendo más allá de lo que habías imaginado.

Duración total: 01:19:29
Código descargable
Acceso 100% online

Descripción de la masterclass

¿De qué va?

Veremos como podemos conectar backend y frontend a través de WebSockets. Una alternativa diferente a la tradicional API REST que nos pone por delante del JavaScript una solución basada en HTML.

Durante la sesión veremos el código de una aplicación de red social que Andros nos preparó usando esta tecnología.

Además con todo este despliegue entenderemos las diferencias entre Web Socket, SSE y API Rest.

Tecnologías utilizadas

Web Sockets
HTML
JavaScript
Python
Django

Nivel de dificultad

Intermedio

Si quieres ver todos los enlaces y el vídeo tienes que suscribirte o entrar como usuario suscriptor.

Podrás ver a:

Andros Fenollosa

Desarrollador Fullstack, Project Manager en Sapps estudio, CTO en CC Solutions, docente en Idecrea y escritor. Compagina su actividad profesional con la enseñanza de tecnologías web. Además, formó parte del Podcast “República Web”, es bloguero apasionado, enamorado de la programación funcional y donante de código en diversos proyectos Opensource.

Explora los capítulos

1. Qué son los WebSockets [10:00]

Qué son los WebSockets

[04:54]

Qué es Server-Side Events 🔥

[01:53]

Cómo funciona SSE

[01:53]

Pregunta: ¿Consume menos recursos que Web Sockets? 🔥

[01:20]

2. HTML sobre WebSockets (SPA sin JavaScript) [20:30]

HTML sobre WebSockets (SPA sin JavaScript)

[03:44]

El caso de AlpineJS

[01:36]

Pregunta: ¿Necesitas un servidor más potente que en una API? 🔥

[03:40]

Comentarios sobre seguridad

[02:17]

Ejemplo práctico: tiempo real y para todos los usuarios

[05:13]

Inspeccionando las conexiones en tiempo real 🔥

[04:00]

3. Código de la red social [22:30]

Código de la red social

[00:50]

Dependencias de Python y Django

[05:40]

Revisión de Docker Compose (Caddy, Redis)

[03:07]

Revisión del código HTML

[02:08]

Request y consumer en Django 🔥

[02:40]

Pregunta: ¿Qué pasa si el servidor se desconecta? 🔥

[02:35]

Envío del WebSocket

[01:40]

Revisión del código JavaScript

[03:50]

4. Usando Stimulus para conectar back y front [26:29]

Usando Stimulus para conectar back y front

[04:50]

Explicación del código con Stimulus

[05:00]

Ventaja de usar Stimulus 🔥

[01:20]

La red social usando Stimulus

[02:10]

Pregunta: ¿Puedes enviar datos a usuarios concretos?