Multiuser Sketchpad – Re-dev

tumblr_mjv0nvhUxe1s7jpgho1_1280Multiuser Sketchpad wurde von Mr. Doob als Technologie-Test entwickelt. Es ermöglichte skizzieren für mehreren Benutzer gleichzeitig. Dank der einfachen Art war dieses Tool sehr beliebt und es sind wirkliche Kunstwerke entstanden.

Der Quellcode für Server Backend wurde nie publiziert und ist sei lange Zeit nicht mehr im Betrieb. Mein Wochenendprojekt war die Re-Entwicklung des Servers mit möglichst gleichen Funktionalität wie das Original.

Der Quelltext des Original-Sketchpad’s war am Start eine gute Grundlage. Die Kommunikation wurde mittels Websockets gelösst und als Server habe ich node.js gewählt.

Prinzip: In einem regelmässigen Interval wird ein einfaches Datensatz zum Server übermittelt und so bleibt die Menge der Datenkommunikation berechenbar. Die Datenstruktur eines Packet basiert an kommagetrennten  Zeichenfolge. Für Empfang und Senden ist der Datensatz fast gleich.

Empfang: userID,Aktion,Parameter
Senden: Aktion, Parameter

userID – Benutzer welchen die Aktion betrifft – beim senden nicht notwendig – Server ergänzt die Information beim weiterleiten des Packets.
Aktion – Vordefinierten Aktionen für die Steuerung (USER_LIST = 0, USER_ID = 1, USER_CONNECTED = 2, USER_DISCONNECTED = 3,COMMAND = 4)
Parameter – Je nach Aktion benötigten Parameter (z.B. Aktion Nr. 2 – USER_CONNECTED wird gefolgt von einem userID des neuen Benutzers)

Als Weiteres werden unter der Aktion COMMAND als Parameter die Mausposition, der Status der Maustasten,  die gewählten Farbe, Chatnachrichten und Nicknamewechsel möglich. Die Position wird als Startpunkt eingetragen und nachher nur die Deltakoordinaten. (COMMAND_SETNICKNAME = 0, COMMAND_POSITION = 1, COMMAND_MOUSEDOWN = 2, COMMAND_MESSAGE = 3, COMMAND_COLOR = 4)

So wird die Zeichnung zwischen den einzelnen Teilnehmern in „Echzeit“ synchronisiert. Für den Fall, dass sich ein neuer Benutzer anmeldet, werden alle bisherigen Schritte in ein Protokoll gespeichert und dem neuen oder einem wiederkehrendem Klient gesendet.

Als Basis für den Backend war Code eines Tutorials für Chat mit Websocket. Die Erweiterung Für die Aktionen und  die Speicherung de Protokolls ist sehr rudimentär eingearbeitet.

Demo

server source

Diese Basis ist sehr gut für eine weitere Entwicklung und ich werde sicherlich versuchen die Funktionalität zu erweitern. Möglich würden: einfaches Loginsystem,verschiedene Räume mit Skizzen,  Vorlagen im Hintergrund, Senden der Skizze oder Einladung usw.