Sockets – Echtzeit-Kommunikation

Der Collab Server bietet umfangreiche Echtzeit-Features über Sockets.

Verbindung

import { io } from 'socket.io-client';

const socket = io('http://localhost:4000', {
  query: {
    room: 'artwork:item-001',
    artworkId: 'item-001'
  }
});

Room-Struktur

Room beitreten

socket.emit('join-room', { room: 'artwork:item-001' });

Kommunikations-Modi

1. Artwork ↔ Artwork

Direkte Kommunikation zwischen Artworks:

// Senden
socket.emit('artwork:message', {
  type: 'custom-event',
  payload: { x: 100, y: 200 },
  targetRoom: 'artwork:item-002'
});

// Empfangen
socket.on('artwork:message', (data) => {
  console.log(data.payload);
});

2. Studio ↔ Artwork

Debugging und Parameter-Kontrolle:

// Studio fordert Parameter an
socket.emit('request-parameter-dump', {
  targetRoom: 'artwork:item-001'
});

// Artwork sendet Parameter
socket.on('request-parameter-dump', () => {
  socket.emit('parameter-dump', {
    type: 'parameter-dump',
    payload: tweakpane.exportState(),
    artworkId: 'item-001'
  });
});

3. Multi-Screen Entity Transfer

Entities zwischen Screens übertragen:

// Entity verlässt Screen rechts
socket.emit('entity:transfer', {
  entity: entityData,
  direction: 'right',
  sourceScreen: 'screen-1'
});

// Nachbar-Screen empfängt Entity
socket.on('entity:receive', (data) => {
  spawnEntity(data.entity, 'left');
});

4. Input Broadcast

Gemeinsame Inputs für alle Artworks:

// Maus-Position broadcasten
socket.emit('input:broadcast', {
  type: 'mouse',
  x: mouseX,
  y: mouseY
});

// Alle Artworks empfangen
socket.on('input:broadcast', (data) => {
  sharedMouse.x = data.x;
  sharedMouse.y = data.y;
});

Event-Typen

Control Events

Data Events

System Events

Topology

Für Multi-Screen Installationen:

socket.emit('topology:configure', {
  screens: [
    { id: 'screen-1', neighbors: { right: 'screen-2' } },
    { id: 'screen-2', neighbors: { left: 'screen-1', right: 'screen-3' } },
    { id: 'screen-3', neighbors: { left: 'screen-2' } }
  ]
});

Logging

Zentrales Log-System:

// Log senden
socket.emit('log', {
  level: 'info',
  message: 'Artwork gestartet',
  artworkId: 'item-001',
  timestamp: Date.now()
});

// Logs empfangen (Studio)
socket.on('log', (data) => {
  console.log(`[${data.artworkId}] ${data.message}`);
});

Verbindungs-Status

socket.on('connect', () => {
  console.log('Connected:', socket.id);
});

socket.on('disconnect', (reason) => {
  console.log('Disconnected:', reason);
});

socket.on('connect_error', (error) => {
  console.error('Connection error:', error);
});

Best Practices

1. Room-basiert arbeiten – Nicht global broadcasten
2. Payload minimieren – Nur nötige Daten senden
3. Throttling – High-Frequency Events throttlen
4. Reconnect-Logik – Automatisch neu verbinden
5. Error Handling – Fehler abfangen und loggen