Ein Klick, wieder da – Fels in der Brandung: Cached‑ID‑Auto‑Join und robuste Wiederverbindung in PrivyDrop

Einleitung: Warum „Auto‑Join“ und „Wiederverbindung“ zählen

• Beim Wechsel von Senden zu Empfangen muss die Raum‑ID erneut eingefügt werden.
• In Café‑WLANs oder im Mobilfunk erzwingt ein kurzer Haker eine manuelle Wiederverbindung.

• „Cached‑ID‑Auto‑Join“ für Empfänger: Wenn die Bedingungen passen, füllen wir automatisch aus und treten sofort bei.
• Durchgängige, robuste Wiederverbindung: Fällt Socket oder P2P, erholen sich Aushandlung und Verbindung selbsttätig.

Funktion 1: Auto‑Join mit zwischengespeicherter ID (Empfänger)

• Sie sich im Empfangen‑Tab befinden und noch keinem Raum beigetreten sind;
• die URL keinen roomId‑Parameter enthält (URL hat Vorrang – kein Überschreiben);
• das Eingabefeld leer ist (kein Überschreiben der Nutzer‑Eingabe);
• eine gecachte ID in localStorage vorhanden ist.

• Code‑Anker:
  • Auto‑Join useEffect (Empfänger): https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/frontend/components/ClipboardApp.tsx#L151
  • Cache‑Helfer (localStorage): https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/frontend/lib/roomIdCache.ts#L1

• Sie sind bereits in einem Raum;
• die URL trägt explizit roomId (z. B. geteilter Deep‑Link);
• das Eingabefeld enthält bereits Text in Bearbeitung;
• keine gecachte ID gefunden.

Funktion 2: „ID speichern/verwenden“ auf Sender‑Seite (Doppelklick zum Aktualisieren)

• ID speichern: Ab Eingabelänge ≥ 8 wird der Button aktiv; Klick speichert die aktuelle Eingabe als Cache‑ID.
• Gecachte ID verwenden: Existiert eine, schreibt ein Klick sie ins Feld und tritt sofort bei; Doppelklick schaltet ~3 s auf „ID speichern“, um den Cache zu erneuern.

• Einfach/Doppelklick via 400 ms‑Fenster und Timer, Cleanup beim Unmount;
• Nach „Gecachte ID verwenden“ tritt der Sender sofort dem Raum bei (kein zusätzlicher „Beitreten“‑Klick);
• IDs mit weniger als 8 Zeichen werden nicht gespeichert – Schutz vor versehentlichen Kurz‑IDs.
• Code‑Anker:
  • Einfach/Doppelklick inkl. Timer‑Cleanup: https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/frontend/components/ClipboardApp/CachedIdActionButton.tsx#L112
  • Sofortiger Beitritt bei „Gecachte ID verwenden“ (Sender): https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/frontend/components/ClipboardApp/SendTabPanel.tsx#L193

Wiederverbindung: Von der Erkennung bis zur Erholung

• Socket getrennt: Nach Reconnect und geändertem socketId erfolgt der automatische Raum‑Beitritt;
• P2P getrennt/fehlgeschlagen/geschlossen: Status markieren und Verbindung neu aufbauen;
• Proaktiver socketId‑Check: Bei Socket‑Recovery erneut validieren.
• Code‑Anker:
  • Auto‑Beitritt nach Socket‑Connect: https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/frontend/lib/webrtc_base.ts#L121
  • Vereinheitlichter attemptReconnection‑Einstieg: https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/frontend/lib/webrtc_base.ts#L185
  • lastJoinedSocketId verfolgen und bei Bedarf initiator-online: https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/frontend/lib/webrtc_base.ts#L460
  • Sender verarbeitet recipient-ready und startet Neuverhandlung: https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/frontend/lib/webrtc_Initiator.ts#L12
  • Empfänger antwortet auf initiator-online mit recipient-ready: https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/frontend/lib/webrtc_Recipient.ts#L14
  • Backend‑Relais:
    • ready: https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/backend/src/socket/handlers.ts#L63
    • initiator-online: https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/backend/src/socket/handlers.ts#L102
    • recipient-ready: https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/backend/src/socket/handlers.ts#L108
    • peer-disconnected: https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/backend/src/socket/handlers.ts#L119

Sequenz (Mermaid)

Zuverlässigkeitsdetails

• ICE‑Kandidaten‑Queue: Ist die Remote‑Description nicht bereit oder die Verbindung im Schließen, werden Kandidaten gepuffert und später geflusht; siehe https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/frontend/lib/webrtc_base.ts#L219-L256.
• DataChannel‑Backpressure & Chunking: Sender‑Schwelle bufferedAmountLowThreshold=256KB (https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/frontend/lib/webrtc_Initiator.ts#L82); Netzsteuerung maxBuffer≈3MB / lowThreshold≈512KB / 64KB‑Chunks (https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/frontend/lib/transfer/NetworkTransmitter.ts#L66-L111, https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/frontend/lib/transfer/NetworkTransmitter.ts#L160-L210).
• Mobile Wake Lock: Beim Verbinden anfordern, bei Trennung/Fehler freigeben – reduziert Unterbrechungen im Hintergrund.
• Fehlerkapselung & Retries: seltene sendData failed werden gekapselt, angezeigt und erneut versucht (siehe sendWithBackpressure).

Kurze vs. lange IDs: Wiederverwendungsstrategie

• Kurze IDs (4‑stellig) erhalten nach „leerem Raum + Trennung“ eine Gnaden‑TTL von 15 Min. (900 s) – schnelle Wiederverbindung im Fenster; siehe https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/backend/src/socket/handlers.ts#L119-L125.
• Standard‑Ablaufzeit für Räume: 24 h; nur bei leerem Raum nach Trennung wird temporär auf 15 Min. umgestellt; siehe https://github.com/david-bai00/PrivyDrop/blob/v1.1.1/backend/src/services/redis.ts#L6.
• Lange IDs (UUID‑artig) eignen sich für Wiederverwendung über Sitzungen/Geräte hinweg – am besten mit dem Cache‑Button kombinieren.

Ausprobieren (Hands‑on)

1. Auf Sender‑Seite eine benutzerdefinierte ID (≥ 8 Zeichen) eingeben und „ID speichern“ klicken.
2. Zum Empfänger wechseln: Wenn die Bedingungen passen, wird automatisch ausgefüllt und beigetreten.
3. Ausfall simulieren (WLAN aus, Hotspot an, refresh & zurück) und die Auto‑Wiederverbindung beobachten.
4. Auf Sender‑Seite „Gecachte ID verwenden“ doppelklicken, kurzzeitig auf „ID speichern“ umschalten und auf eine neue lange ID aktualisieren.

• Hintergrund → Vordergrund; Wechsel WLAN ↔ Mobilfunk.
• Prüfen, ob der Empfänger auto‑beitritt und die Übertragung nahtlos fortsetzt.

Schluss & Aufruf

• Warum ich PrivyDrop Open Source gestellt habe
• Wie WebRTC Browser‑Direkttransfer ermöglicht
• Resumable Transfers: Schluss mit der Großdatei‑Anxiety