Arco 03Backend y base de datosMisión 10Pendiente

Fiesta de dibujo en vivo

Un pizarrón compartido donde toda la familia dibuja al mismo tiempo desde teléfonos distintos.

Días: 4
Temas: 5
Pasos: 7

Temario de esta misión

Concepto
Cliente y servidor
El cliente es la página de cada quien. El servidor es la computadora de en medio que las conecta.
Concepto
Tiempo real
El servidor te habla sin que preguntes. Por eso un pizarrón compartido se siente vivo.
Herramienta
WebSocket
Un cable abierto entre tu página y el servidor, para mandarse cosas en los dos sentidos.
Herramienta
Canvas
La superficie donde se dibuja con el dedo o con el mouse.
Concepto
Qué se guarda y qué sólo pasa
El trazo se guarda; la posición del cursor no. Saber cuál es cuál te ahorra muchísima base de datos.

Por qué importa

Hasta ahora tu app hablaba con el servidor sólo cuando tú lo pedías. Ahora el servidor te va a hablar a ti sin que preguntes. Eso es lo que hace que un chat, un juego o un documento compartido se sientan vivos.

Desafío jefe · Cada quien su color

Que cada persona conectada tenga su propio color y que se vea un puntito con su nombre moviéndose en tiempo real, aunque no esté dibujando.

Pasos

1
Haz un canvas donde se pueda dibujar con el dedo o el mouse.
2
Manda cada trazo al servidor en lugar de sólo dibujarlo.
3
Haz que el servidor le mande ese trazo a todos los demás.
4
Ábrelo en dos pestañas y dibuja en una. Si aparece en la otra, ganaste el día.
5
Prueba con dos dispositivos reales, no sólo dos pestañas.
6
Haz que las líneas viejas sigan ahí cuando alguien llega tarde a la fiesta.
7
Agrega un botón de borrar todo y piensa quién debería poder apretarlo.

Lo que desbloqueas

Tiempo real
Qué es cliente y qué es servidor
Sincronizar a varias personas

Misión 10 de 20