Unidad 6

Introducción 📜

Hasta ahora, has aprendido a conectar dispositivos físicos a tus aplicaciones interactivas usando comunicación serial. En esta unidad, vamos a explorar cómo conectar dos aplicaciones que se ejecutan en tu navegador en tiempo real.

Set: ¿Qué aprenderás en esta unidad? 💡

En esta unidad, descubrirás Node.js y Socket.IO, herramientas poderosas que nos permitirán crear un “puente” de comunicación. Node.js actuará como un servidor intermediario, y Socket.IO facilitará el envío y recepción de mensajes instantáneos entre las aplicaciones cliente (sketches de p5.js). Empezaremos analizando un caso de estudio funcional para entender la mecánica servidor-cliente y luego lo modificarás para crear tu propia experiencia interactiva conectada. Aunque en esta unidad ambas aplicaciones cliente correrán en tu computador, esto sienta las bases para futuras conexiones entre diferentes dispositivos o computadores.

¿Qué aprenderás?

Configurarás y ejecutarás un servidor básico usando Node.js, Express y Socket.IO.
Implementarás una comunicación en tiempo real entre dos sketches de p5.js utilizando Socket.IO a través de un servidor Node.js.
Analizarás la arquitectura cliente-servidor y el flujo de datos en una aplicación web en tiempo real.
Partiendo de la infraestructura de comunicación propuesta por un caso de estudio existente, crearás una nueva aplicación interactiva que utilice comunicación en red.

Actividad 01

Preparación del entorno y primer contacto

👣 Pasos:

Abre una terminal o símbolo del sistema en tu computador.
Navega (usando el comando cd) hasta la carpeta donde descargaste/clonaste el código fuente.
Ejecuta el comando:
Ventana de terminal
```
npm install
```
Una vez que termine la instalación, ejecuta el comando:
Ventana de terminal
```
npm start
```
Ten presente que el paso npm install solo es necesario la primera vez que trabajas con el proyecto.
Observa la salida en la terminal. Deberías ver un mensaje indicando que el servidor está escuchando.
Abre tu navegador web, te recomiendo usar Chrome o Edge.
En una ventana, escribe la dirección: http://localhost:3000/page1
En otra ventana del mismo navegador, escribe la dirección: http://localhost:3000/page2
Interactúa con las ventanas (muévelas si tu sistema operativo lo permite, observa los elementos visuales).

Seek: Investigación 🔎

Actividad 02

¿Qué es Internet?

Imagina Internet no como una “nube” etérea, sino como una gigantesca red de carreteras y cables conectando millones de lugares: bibliotecas, tiendas, oficinas, casas… y también unos lugares especiales llamados Servidores. Tu computador (o teléfono) es tu vehículo, conectado a estas carreteras.

Navegador y servidor

Tu navegador web (Chrome, Firefox, Safari, Edge…) es tu vehículo súper inteligente. No solo te lleva por las carreteras (Internet), sino que sabe cómo pedir cosas y, lo más importante, ¡Cómo mostrarte lo que recibe! Eres tú, el usuario, quien decide a dónde ir. Tú eres el Cliente.

Un Servidor es como una biblioteca o un almacén gigante abierto 24/7, ubicado en algún punto de esa red de carreteras. Su trabajo principal es “servir” información o funcionalidad cuando un Cliente (como tu navegador) se la pide correctamente.

La base: el modelo Cliente-Servidor = el Cliente pide, el Servidor responde.

¿Qué es una URL?

Para que tu Navegador sepa a qué Servidor específico ir dentro de esa inmensa red, necesita una dirección precisa. Esa dirección es la URL (Uniform Resource Locator).

Desglosemos una URL típica: http://www.ejemplo.com/pagina/index.html

http://
- El protocolo. Son las reglas del idioma que usarán tu navegador y el servidor para hablar. ¡Volveremos a esto!
www.ejemplo.com
- El nombre de dominio. Es como el nombre del edificio o de la biblioteca. Detrás de escena, este nombre se traduce a una dirección numérica (la dirección IP) que sí indica la ubicación física en la red.
/pagina/index.html
- La ruta específica dentro de ese servidor. Es como pedir ir a la “sección de arte, Estante 3, Libro 5” dentro de la biblioteca. Indica el recurso exacto que quieres.

Protocolo HTTP

Dijimos que http era el protocolo. ¿Pero qué significa eso? Recuerda las unidades anteriores donde usaste protocolos (ASCII, binario con framing) para que el micro:bit y p5.js se entendieran por el puerto serial. ¡Aquí es la misma idea, pero a gran escala!

HTTP (HyperText Transfer Protocol) es el conjunto de reglas estándar que usan los Navegadores (Clientes) y los Servidores para comunicarse en la web. Es como un idioma formal:

--- INICIO DE LA CONVERSACIÓN HTTP ---

➡️  Navegador (Cliente) envía una Petición HTTP (HTTP Request):
    "¡Hola servidor en www.ejemplo.com!
     SOY un navegador Chrome.
     POR FAVOR, ¿me puedes dar (método GET) el recurso que está en /pagina/index.html?"

⬅️  Servidor responde con una Respuesta HTTP (HTTP Response):
    "¡Entendido, Navegador!
     AQUÍ TIENES (Código de estado 200 OK).
     El archivo que pediste (index.html) es de tipo HTML (Content-Type).
     Aquí están sus contenidos: <html>...</html>"

--- FIN DE LA CONVERSACIÓN HTTP ---

HTML, CSS y JavaScript

Cuando el servidor responde con éxito a una petición de una página web, normalmente no envía una sola cosa, sino un “paquete” con instrucciones para tu Navegador. Este paquete suele contener tres tipos principales de archivos:

HTML (HyperText Markup Language):
- El esqueleto, la estructura de la página.
- Define qué elementos hay: títulos, párrafos, imágenes, botones, etc.
- Analogía: el plano de una casa.
CSS (Cascading Style Sheets):
- La decoración, el estilo visual.
- Define cómo se ven esos elementos: colores, fuentes, tamaños, posiciones.
- Analogía: la pintura, los muebles y las cortinas de la casa.
JavaScript (JS):
- La interactividad, la “magia” que hace que la página responda a tus acciones.
- Puede cambiar el HTML y el CSS dinámicamente, reaccionar a clics, enviar datos, ¡Y mucho más!
- Analogía: la electricidad, la plomería y los electrodomésticos que hacen la casa funcional y habitable.

¿Cómo se ejecuta JavaScript?

El Navegador recibe el HTML, lo lee y construye la estructura básica de la página (el DOM - Document Object Model). Luego aplica los estilos del CSS. Pero, ¿Cuándo y cómo entra en juego el JavaScript?

Normalmente, el HTML incluye etiquetas <script> que le dicen al navegador: "Oye, aquí hay código JavaScript, por favor, ejecútalo". Esto puede pasar:

Mientras se carga la página: si el <script> está en medio del HTML, el navegador pausa la construcción, ejecuta el JS y luego sigue.
Después de cargar el HTML: a menudo, los scripts se colocan al final del <body> o se marcan con atributos como defer o async para que se ejecuten después de que la estructura principal (DOM) esté lista. ¡Esto es importante para que el JS pueda encontrar y manipular los elementos HTML!

Una vez que el JS está “vivo”, no se ejecuta necesariamente de arriba abajo y termina (como un script simple). En la web, el JS a menudo funciona de forma dirigida por eventos.

El Modelo de ejecución: imperativo vs basado en eventos

Has estado usando p5.js. Recuerda las funciones setup() (se ejecuta una vez) y draw() (se ejecuta en bucle constante, ~60 veces por segundo). Este es un modelo bastante imperativo: tú le dices al programa qué hacer paso a paso, y draw() repite esos pasos continuamente.

El JavaScript que veremos en el caso de estudio (y en mucha programación web moderna) es más declarativo y basado en eventos. En lugar de un bucle draw() constante, defines funciones y luego le dices al navegador:

“CUANDO el usuario haga clic en este botón, ENTONCES ejecuta estaFuncion()”.

“CUANDO llegue un mensaje del servidor con el nombre getdata, ENTONCES ejecuta otraFuncion()”.

“CUANDO la ventana cambie de tamaño, ENTONCES ejecuta aquellaFuncion()”.

El código no se ejecuta en un bucle predecible, sino que reacciona a eventos que ocurren. El navegador se encarga de detectar esos eventos y llamar a las funciones que tú registraste (llamadas event listeners o manejadores de eventos).

¿Qué es Node.js?

Hasta ahora (en el curso), JavaScript vivía solo dentro de tu Navegador. Node.js fue una idea revolucionaria que cambió eso. ¿Y si pudiéramos tomar el motor de JavaScript súper rápido de Google Chrome (llamado V8) y usarlo fuera del navegador, directamente en un Servidor?

¡Eso es Node.js! Permite a los desarrolladores escribir el código del lado del servidor usando JavaScript, el mismo lenguaje que ya usan en el lado del cliente (navegador). En nuestro caso de estudio, server.js es un script de Node.js que:

Crea un servidor HTTP (como la biblioteca con la sección de historia de la que hablamos antes).
Escucha peticiones de los navegadores (como la tuya pidiendo /page1).
Envía los archivos HTML, CSS y JS necesarios.
Y además, maneja la comunicación en tiempo real (¡Siguiente punto!).

WebSockets y Socket.IO

El modelo HTTP normal de Petición/Respuesta es como enviar correos electrónicos: pides algo, esperas, recibes una respuesta. Funciona bien para pedir páginas web, pero ¿Qué pasa si quieres comunicación instantánea, como un chat o ver la posición del cursor de otra persona en tiempo real? Enviar un “correo” (HTTP Request) cada décima de segundo sería muy ineficiente.

Aquí entran los WebSockets. Son como establecer una línea telefónica directa y permanente entre el Navegador (Cliente) y el Servidor una vez que la conexión inicial se ha hecho. Una vez abierta, ambos pueden enviarse mensajes instantáneamente sin necesidad de nuevas peticiones HTTP formales.

Socket.IO es una librería (tanto para Node.js en el servidor como para JavaScript en el navegador) que hace que usar WebSockets (y otras técnicas de respaldo si WebSockets no está disponible) sea mucho más fácil. Nos da funciones simples como:

socket.on('nombreDelMensaje', funcionReceptora): para escuchar mensajes del otro lado.
socket.emit('nombreDelMensaje', datosAEnviar): para enviar mensajes al otro lado.

Actividad 03

Actividad 04

Explorando los clientes (p5.js + Socket.IO)

Apply: Aplicación 🛠

Actividad 05

Evidencias 🗂️

Reflect: Consolidación y metacognición 🤔

Para esta fase de pediré que hagas un diagrama que explique cómo funciona tu aplicación y cómo se comunican los diferentes componentes.