HTML5 canvas - Zeichung in time an mehrere Betrachter senden

[Myar]

Hallöchen!

Der Threadtitel klingt wahrscheinlich etwas verworren.
Meine Frage wäre auch eigentlich erstmal, ob das was ich vor habe mit Canvas so Sinn macht.

Mein Ziel ist es, dass ich ein Canvas Element habe und ich darin etwas mit der Maus zeichne, weitere Betrachter, die die Seite ebenfalls an ihrem Rechner an einem anderen Ort betrachten, sehen, was gezeichnet wird.

Wäre das mit Hilfe des Canvas Element elegant umsetzbar bzw. macht es so Sinn?

Mir würde jetzt erst nur einfallen, dass ich bei jeder Änderung am Bild, das Bild als Bilddatei auf dem Server speichere und die anderen Clients alle paar Sekunden das Bild neu laden und dann eine Änderung sehen.

Was heißt, wenn ich mehrere Sessions habe, die gerade ein Bild malen und mehrere Unterschiedliche Betrachter, die die jeweiligen Bilder betrachten und Änderungen mitverfolgen, dass ich u.U. nen Haufen an Bilddateien auf dem Server generiere die alle paar Sekunden abgerufen werden...
Ziemlich viel Traffic der da entsteht. Oder sehe ich das falsch? Falscher Ansatz?

Es wäre halt schön, wenn ich das über eine Browseranwendung realisieren könnte, da noch weitere Funktionen hinzukommen und ich den Vorteil einer Browseranwendung nutzen möchte.

Dann bin ich mal gespannt, was ihr dazu sagt

Gruß
Myar

 

[CPoly]

Erstmal vorweg: Das ist absolut machbar mit canvas.

Falscher Ansatz?

JA.



1. Sende bloß nicht das gesamte Bild bei Änderungen zum Server, sondern nur die Änderungen! Wenn jemand einen Strich von A nach B malt, dann sende die beiden Koordinaten zum Server. Das sind dann nur ein paar Byte im Vergleich zum Megabyte.

2. Die anderen Betrachter sollten nicht ständig nach Änderungen fragen, sondern diese einfach zugesendet bekommen.


Mittels Node.js und Socket.io hat man eine solche demo in 30 Minuten fertig. Hier ein Workshop http://www.tutorials.de/content/1332-workshop-echtzeitkommunikation-mit-node-js-und-socket-io.html

 

[Parantatatam]

Den zweiten Punkt, den CPoly angesprochen hat, kann man so leider nur lösen, wenn man Websockets nutzt. Ansonsten müsste man es wie bisher über AJAX und Polling lösen, was heißt, dass du seitens der Empfänger in einem bestimmten Rhythmus Anfragen an den Server senden musst, ob sich etwas geändert hat.

Zu den Websockets: wenn du das Canvas-Element von HTML5 nutzt, kannst du allgemein davon ausgehen, dass der Browser auch Websockets unterstützt. Somit würde das Polling entfallen. Du brauchst dafür aber auch noch einen speziellen Server, den man aber auch in PHP in kurzer Zeit erstellen kann – abgesehen davon, dass man ihn nicht in PHP schreiben sollte.

 

[Myar]

Hallöchen!

Danke für eure Antworten!

Okay, also immer abfragen, welche Koordinaten die Änderung hat - auf jeden Fall der bessere Ansatz.

Aber es scheint so, als würde ich am Polling nicht vorbei kommen, da ich keinen root Zugriff habe um Socket.io zu installieren.

Warum sollte man den Server nicht in PHP programmieren?

 

[Parantatatam]

Weil Server generell sehr viel Leistung erfordern und am besten so schnell und so gut wie möglich Zugriff auf die Speicherverwaltung haben. Außerdem ist mit PHP kein Multithreading möglich. Da PHP aber interpretiert wird, ist dies nicht möglich. Deshalb werden Server in den meisten Fällen auch in C/C++ geschrieben.

Wenn es bei dir aber nicht anders geht, dann kannst du theoretisch auch deinen Server in PHP schreiben. Dabei solltest du aber auch die Ausführzeit auf unbegrenzt stellen, da du in deinem Skript eine Endlosschleife brauchst, die immer und immer wieder darauf achtet, ob es neue Sockets gibt, ob Sockets beendet wurden oder ob es Änderungen seitens der Sockets oder für die Sockets gibt. Letztendlich sollte man dieses Skript aber auch als einzelnen Prozess über die Shell starten.