Client-oder server-Seite-HTML5-canvas-rendering, für eine node.js whiteboard-Anwendung?
Dachte ich ein wenig whiteboard-web-app-das wäre ein schöner Weg, um zu verbessern meine node.js und JavaScript-Fähigkeiten. Ich habe ein paar gesehen auf der web, was sinnvoll ist, wie es scheint ideal für diese Art von Stapel.
Nur einen moment zu denken, jedoch wunderte ich mich über die Rollen von client und server in dieser Art von web-Anwendung. Stolpern Knoten-Leinwand, wurde ich noch mehr verwirrt. Was, konkret, sollte der client und der server dafür verantwortlich sein?
Wenn der server ist in der Lage rendering auf eine Leinwand, sollte es akzeptieren und Eingaben überprüft, die von den clients und sendet ihn an alle anderen angeschlossenen Nutzern über socket.io? Auf diese Weise ist, hält der server eine master-canvas-element von Sorten. Sobald ein neuer Benutzer eine Verbindung herstellt, der server hat einfach zu verdrängen, seine Leinwand, die client - brachte es bis zu Tempo mit dem, was gezeichnet wurde.
Jeder Führung auf die Umsetzung - spezifisch oder philosophisch - geschätzt wird.
Dank!
- Hier ist eine app, die implementiert ist genau so, wie Sie beschrieben: github.com/katspaugh/whiteboard. Knoten-Leinwand auf dem server für die Bereitstellung von snapshots für die synchronisation.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Schrieb ich http://draw.2x.io, die nutzt eine node-canvas (vorher Knoten-Kairo, die ich selbst geschrieben habe) zusammen mit socket.io.
Dem Weg dorthin habe ich mir eine Anwendung, die Kunden im wesentlichen nicht alle die Schlaganfall-generation von Benutzereingaben. Diese wiederum verarbeitet die von einer Leinwand Abstraktion, die unterstützt eine Untermenge der Operationen und der Parameter, die ich definiert habe mich. Wenn diese Ebene akzeptiert, was die Eingabe der Malerei-Module produzieren, sind Sie auch versendet werden, per socket.io, auf dem server.
Auf dem server habe ich die gleiche Art von Leinwand-layer wrapping Knoten-Leinwand. Dies wird so replizieren Sie die Eingabe durch den Benutzer im Speicher gibt, schließlich machen es möglich, einen Zustand Bild zu den neuen Kunden. Nach dieser werden die Striche -- pending parameter /Kontext der Validierung durch den server-Anwendung-werden veröffentlicht, um andere verbundene clients, die wiederholen Sie die gleiche Prozedur wie oben.
Einer Firma für die ich arbeite implementiert eine whiteboard-app mit node.js (aber nicht verwenden node-canvas) und Steckdose.io. Leider kann ich nicht geben Sie den code oder sogar eine website, da es nicht freigegeben wurde.
Ihre Umsetzung scheint sehr ähnlich. Clients mit unserem server verbinden und aktualisieren Sie den server, wenn das whiteboard gezeichnet (JSON-Daten w/(x,y) - Koordinaten) über socket.io. Der server aktualisiert dann den rest der Kunden und behält eine Kopie aller (x,y) - Koordinaten, so dass neue Kunden, die sich sehen können, was der bereits gezogen hat.
Glück mit Ihrer app. Ich habe die Programmierung mit node.js in letzter Zeit viel und junge ich Liebe es.
hier ist ein multiuser-whiteboard-tutorial geschrieben in javascript/html5, alle Quellen zur Verfügung:
http://www.unionplatform.com/?page_id=2762
ist es nicht, den Knoten auf der server-Seite, aber der clientseitige code, sollte noch nützlich sein, wenn Sie zur Anpassung an einen Knoten backend.