Rendering della tela di canapa HTML5 lato client o server per un'applicazione lavagna bianca node.js?

Question

Stavo pensando che una piccola app web per la lavagna sarebbe un buon modo per migliorare le mie competenze su node.js e JavaScript. Ne ho visti alcuni sul web, il che ha senso in quanto sembra ideale per questo tipo di stack.

Prendendo solo un momento per pensare, tuttavia, mi stavo chiedendo i ruoli di client e server in questo tipo di applicazione web. Inciampando su node-canvas, sono diventato ancora più confuso. Di che cosa dovrebbero occuparsi specificamente il client e il server?

Se il server è in grado di eseguire il rendering su una tela, deve accettare e convalidare l'input dai client e quindi trasmetterlo a tutti gli altri utenti connessi tramite socket.io? In questo modo, il server conserva un master -canvas elemento di sorta. Una volta che un nuovo utente si connette, il server deve solo spingere la sua tela su quel client, portandolo al passo con qualsiasi cosa sia stata disegnata.

Tutte le indicazioni sull'implementazione - specifiche o filosofiche - sono apprezzate.

Grazie!

Answer 1

Una società che lavoro per implementare un'applicazione per la lavagna con node.js (ma non ha usato il nodo-canvas) e socket.io. Sfortunatamente, non posso darti codice o anche un sito web poiché non è stato rilasciato.

L'implementazione sembra molto simile. I client si connettono al nostro server e aggiornano il server ogni volta che viene disegnata la lavagna (coordinate JSON w/(x, y)) tramite socket.io. Il server quindi aggiorna il resto dei client e conserva una copia di tutte le coordinate (x, y) in modo che i nuovi clienti che partecipano possano vedere ciò che è già stato disegnato.

Buona fortuna con la tua app. Ultimamente sto programmando molto con node.js e il ragazzo lo adoro.

Answer 2

Ho scritto http://draw.2x.io, che utilizza il nodo-tela (precedentemente nodo-cairo, che ho scritto io stesso) insieme a socket.io.

Il modo in cui ho progettato la mia applicazione, il client essenzialmente fa tutta la generazione del tratto dall'input dell'utente. Questi sono a loro volta elaborati da un'astrazione su tela, che supporta un sottoinsieme di operazioni e parametri che ho definito io stesso. Se questo livello accetta qualsiasi input prodotto dai moduli di pittura, essi vengono anche spediti, tramite socket.io, al server.

Sul server ho lo stesso tipo di strato su tela che avvolge il nodo-tela. In questo modo replicherà l'input dell'utente in memoria, rendendo eventualmente possibile inviare un'immagine di stato ai nuovi client. Successivamente, i tratti - in attesa di validazione di parametri/contesto da parte dell'applicazione server - verranno pubblicati su altri client connessi, che ripeteranno la stessa procedura di cui sopra.

Answer 3

ecco un tutorial multiutente lavagna scritto in JavaScript/HTML5, tutte le fonti disponibili: http://www.unionplatform.com/?page_id=2762

non è nodo sul lato server, ma il codice lato client dovrebbe essere ancora utile se si desidera adattarlo a un back-end del nodo.