Pizarra de dibujo colaborativa en tiempo real en HTML5/JS y websockets?

Question

Estoy tratando de armar un pequeño (ish) proyecto de escuela de verano para algunos de mis estudiantes avanzados y estoy investigando cómo hacerlo mejor y qué usar; con suerte, alguien aquí podría dirigirme en la dirección correcta.

Lo que nos interesa es investigar si HTML5 fue lo suficientemente lejos como para crear una pizarra de dibujo colaborativa en tiempo real, simplemente mediante el uso de tecnologías web sin complementos (CSS, HTML5/DOM y Javascript). Lo que finalmente nos esforzaríamos es esto: por ejemplo, tener un lienzo/página en línea en un servidor central que se muestre en una pantalla grande en el aula. Entonces nuestros estudiantes/usuarios sacarían sus teléfonos inteligentes, cargarían la página en sus navegadores móviles (estoy perfectamente bien con limitar esto a los navegadores móviles de webkit por ahora) y dibujarían en sus pantallas con las teclas/dedos (o en las computadoras con el mouse) - adivinar que esto no hace mucha diferencia) y se actualizaría en tiempo real para todos, tanto en sus pantallas como en la gran pantalla central del aula.

Supongo que las solicitudes push/get serían demasiado lentas para esto, ¿podría ser resuelto por websockets? ¿Alguien tiene buenas bibliotecas JS para recomendar para esto?

También, ¿cómo sería la arquitectura ideal (pero más fácil de entender para los alumnos)? Digamos que tienes 30 usuarios simultáneos en un clasroom: cada uno de ellos se conectaría con websockets al servidor y el servidor agruparía/combinaría todas sus solicitudes en una y luego devolvería el archivo combinado (una especie de JSON mínima o incluso solo coordenadas) para cada usuario conectado?

¿Podrían los websockets y (supongo) canvas llevar esto? ¿Para que todo parezca ágil? ¿Hay (jQuery-like) bibliotecas JS disponibles para facilitar nuestras vidas, o cree que es algo demasiado complejo para un proyecto de escuela de verano de 2 semanas?

Answer 1

aquí es un tutorial que describe cómo crear una pizarra multiusuario con JavaScript/HTML5/lienzo:

http://www.unionplatform.com/?page_id=2762

el ejemplo utiliza un marco de colaboración y un servidor llamado "plataforma de unión". incluso si decide rodar su propio marco de cliente y servidor, los mensajes en el ejemplo deberían darle una idea de cómo estructurar el código.

para una comparación de velocidad de manzanas con las manzanas de WebSocket vs cometa, ver: http://www.unionplatform.com/?page_id=2954

en mis pruebas, un ping básica sobre WebSocket es normalmente aproximadamente el doble de rápido que el de ping a través de HTTP. tanto websocket como coment son más que suficientemente rápidos para crear una pizarra colaborativa.

Answer 2

Por el lado de la red de cosas, intente mirar node.js para el servidor, junto con socket.io para el cliente.

En cuanto al dibujo en sí, algunas opciones populares son processing, raphael y cakejs.

Cuando se trata de la implementación, es posible que desee ver cómo los juegos en red se ocupan de problemas similares (gamedev.stackexchange.com podría ser útil).

Lo que vas a hacer es básicamente lo mismo que un simple juego de varios jugadores de arriba hacia abajo, con cada 'jugador' en este caso siendo la yema del dedo de los estudiantes, y el 'nivel' es el lienzo. Necesita actualizar el servidor en cuanto a su posición y si están 'disparando' (dibujo) o no.

Answer 3

Supongo que las solicitudes push/get serían demasiado lentas para esto, ¿podría ser resuelto por websockets? ¿Alguien tiene buenas bibliotecas JS para recomendar para esto?

Si necesita infraestructura en tiempo real, he creado una lista de tecnologías en tiempo real que podrían serle útiles. Estos incluyen el servicio alojado, como Pusher para el que trabajo, y las tecnologías de autoinstalación como las soluciones WebSocket y Comet.

WebSocket suena como la elección de la idea de la tecnología para ti, ya que se han convertido en HTML5 y ofrecen la comunicación bidireccional en tiempo real más efectiva entre un servidor web y un navegador (u otros clientes).

También, ¿cuál sería la arquitectura ideal (pero más fácil de entender para los estudiantes)? Digamos que tienes 30 usuarios simultáneos en un clasroom: cada uno de ellos se conectaría con websockets al servidor y el servidor agruparía/combinaría todas sus solicitudes en una y luego devolvería el archivo combinado (una especie de JSON mínima o incluso solo coordenadas) para cada usuario conectado?

Parece que probablemente deba almacenar el estado actual en algún lugar y en la carga inicial de la aplicación mostrar ese estado. Luego use su infraestructura en tiempo real para enviar deltas en ese estado, o si se trata de un dibujo en lienzo, solo información sobre la línea, etc. que se ha dibujado e información sobre quién lo dibujó.

¿Podrían los websockets y (supongo) el lienzo tomar esto? ¿Para que todo parezca ágil? ¿Hay (jQuery-like) bibliotecas JS disponibles para facilitar nuestras vidas, o cree que es algo demasiado complejo para un proyecto de escuela de verano de 2 semanas?

El dibujo en colaboración en tiempo real es definitivamente más alcanzable y se han creado varios ejemplos de esto. A google aparece una serie de posibilidades.

Si esta tecnología es completamente nueva para usted y prefiere concentrarse en la construcción de la aplicación colaborativa, consideraría utilizar un servicio para su aplicación en lugar de pasar por la molestia de aprender a instalar y configurar, o incluso código , tu propia infraestructura (no solo digo esto porque trabajo para ese servicio. Honestamente creo que tiene más sentido).

Answer 4

Definitivamente mira esto:

http://wesbos.com/html5-canvas-websockets-nodejs/