¿Es Posible Crear Un Sitio Web Interactivo para Múltiples Usuarios en HTML5?
El HTML en sí no puede hacer eso. El principal problema es que incluso si logras mover cosas en el navegador (lo que podrías hacer con solo HTML y CSS, aunque si logras hacerlo, sería un uso bastante exótico de CSS), no hay manera de evitar el hecho de que tu sitio web de alguna manera necesita obtener esa información de un cliente a los demás, es decir, si muevo una caja en mi computadora, tu computadora necesita saberlo. Y HTML en sí no puede hacer eso por sí solo.
En resumen, necesita algún tipo de servidor; y también se necesita cierta cantidad de scripting del lado del cliente, canónicamente hecho en JavaScript, para instrumentar el intercambio de información en el lado del cliente de las cosas.
Hay muchas maneras de diseñar esto, y los detalles variarán drásticamente, pero en pocas palabras, lo que necesita hacer es esto:
En el cliente:
-
Use JavaScript para aferrarse a los eventos de movimiento de esas cajas.
-
Cuando un cuadro se haya movido, envíe un mensaje adecuado al servidor.
-
Al mismo tiempo, escuche los mensajes que llegan del servidor y mueva las casillas en consecuencia.
La tecnología canónica a usar para hablar con el servidor serían websockets, pero si insistes, también podrías hacerlo con solicitudes AJAX simples, es menos eficiente y más torpe, porque no puedes «escuchar» mensajes usando solo HTTP, tienes que seguir sondeando el servidor. (Es decir, es » ¿tienes un mensaje para mí? ¿qué tal ahora? ¿qué tal ahora? ¿qué tal ahora? …»vs.» dime cuando tengas un mensaje para mí, esperaré»).
El formato de mensaje probablemente debería basarse en JSON: está integrado en JavaScript del navegador, se sabe que no causa problemas en el cable y es el formato más utilizado, por lo que habrá un buen soporte sin importar qué tecnologías elija para el resto de su pila. No es el formato de serialización más eficiente, pero no estamos hablando de cantidades masivas de datos aquí.
Para la parte real de «mover cajas», puede usar algún marco de interfaz como React, Vue, etc., pero para este tipo de cosas, creo que es más fácil usar la manipulación directa del DOM a través de la API de DOM del navegador incorporada.
En el servidor:
-
Mantenga una estructura de datos compartida que describa dónde se encuentra cada bloque.
-
Escuche las conexiones websocket.
-
Cuando se conecte un nuevo cliente, envíe las posiciones de todos los bloques y mantenga la conexión abierta.
-
Cuando un cliente envía una actualización de posición de bloque, actualice la estructura de datos compartidos y reenvíe la actualización a todos los clientes conectados.
No importa mucho qué idioma y pila uses para el servidor, siempre y cuando haya un buen soporte para websocket.
De hecho, esto es esencialmente un chat web, excepto que sus » mensajes de chat «son posiciones de caja en lugar de texto, y con el toque de mantener el» historial de chat «en forma comprimida (la estructura de datos de la» situación actual») indefinidamente.
por supuesto, el diablo está en los detalles. Está tratando con una estructura de datos compartida a la que se accede simultáneamente, por lo que debe protegerla contra las condiciones de carrera (p. ej., cuando un nuevo cliente se conecta y otro cliente envía una actualización mientras envía el estado actual al nuevo cliente, pero antes de comenzar a transmitir actualizaciones a ese nuevo cliente, el nuevo cliente no recibirá esa actualización y su situación será inconsistente con el resto de la red), necesita atender las desconexiones (y reconectarse automáticamente), necesita tiempos de espera en sus conexiones para no filtrar conexiones activas (p. ej., necesita eliminar clientes desconectados y con tiempo de espera de la lista de clientes en el servidor), necesita autenticación, necesita HTTPS (incluidos los websockets a través de HTTPS), necesita implementar todo en algún lugar, etc. sucesivamente.