Fügen Sie Ihrer React-App in wenigen Minuten Zusammenarbeit in Echtzeit hinzu

Neulich hat jemand, den ich kenne, eine Nachricht geschrieben:

„Ich habe über die Feiertage versucht, meinem Sohn zu erklären, wie Anlagerenditen über Zoom funktionieren, und es wäre so einfach gewesen, wenn wir beide in so etwas wie einem Google-Dokument hätten arbeiten können.“

Herausforderung angenommen!

In den letzten Tagen hatte ich Spaß daran, einen Anlagerenditesimulator zu bauen, mit dem wir Anlagerenditen anhand mehrerer Parameter vorhersagen können.
Das Internet ist voll von solchen Websites, aber auf dieser wollte ich erkunden, wie wir Funktionen für die Zusammenarbeit einbetten und wie sie Menschen zusammenbringen können.

In diesem Leitfaden erfahren Sie, wie wir einer regulären React-App in nur 10 Minuten Echtzeit-Zusammenarbeit hinzufügen können, ohne Backend-Code zu schreiben oder sich mit Web-Sockets zu befassen. Als Bonus werden wir auch untersuchen, wie wir die Benutzererfahrung auf kollaborativen Websites verbessern können!

Der vollständige Quellcode für dieses Projekt ist auf GitHub verfügbar

Lass uns eintauchen!

Der Ausgangspunkt: Aufbau des Fundaments

Bevor wir uns mit den Funktionen für die Zusammenarbeit beschäftigten, brauchten wir eine solide Grundlage. Ich begann damit, eine Einzelspielerversion zu erstellen, in der Benutzer ihre Investitionsparameter eingeben konnten. Diese Eingaben würden dann in eine Berechnungsmaschine eingespeist, die Investitionsrenditeprognosen generiert und anzeigt.

Ich habe Bolt.new verwendet, um schnell loslegen zu können. Ich war beeindruckt von dem klaren Design und davon, wie schnell ich zu einem akzeptablen Ausgangspunkt gelangte. Trotz des enormen Vorsprungs musste ich noch einiges an der Berechnungslogik verfeinern und die Benutzeroberfläche nach meinen Wünschen anpassen.

---

Die Anwendung kollaborativ gestalten

Nachdem die Einzelspielerversion fertig war, habe ich mich darauf konzentriert, sie kollaborativ zu gestalten. Dieses Projekt bot eine perfekte Gelegenheit, React Together zu testen, eine Open-Source-Bibliothek, die ich in den letzten Monaten bei Multisynq entwickelt habe.

React Together bietet Hooks und Komponenten, die Funktionen für die Zusammenarbeit ermöglichen, ohne dass die Komplexität der Einrichtung von Backends oder der Verwaltung von Socket-Verbindungen anfällt. Der Implementierungsprozess erwies sich als unkompliziert, zeigte jedoch einige Bereiche mit Verbesserungspotenzial auf, die wir in zukünftigen Versionen der Bibliothek behandeln werden.

Lassen Sie uns nun die drei Schritte durchgehen, um unserer App Echtzeit-Zusammenarbeit hinzuzufügen! Starten Sie Ihre Timer?

Schritt 1: Einrichten des React Together-Kontexts

Der erste Schritt besteht darin, unsere Anwendung in einen React Together-Kontextanbieter zu packen. Diese Komponente übernimmt die gesamte Statussynchronisierung und Sitzungsverwaltung hinter den Kulissen.

// src/index.tsx
import { StrictMode } from 'react'
import { ReactTogether } from 'react-together'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ReactTogether sessionParams={{
      appId: import.meta.env['VITE_APP_ID'],
      apiKey: import.meta.env['VITE_API_KEY'],
    }}>
      <App />
    </ReactTogether>
  </StrictMode>,
)

React Together nutzt die Infrastruktur von Multisynq für die Anwendungssynchronisierung, wofür ein API-Schlüssel erforderlich ist. Sie können Ihren kostenlosen API-Schlüssel von multisynq.io/account erhalten. Und keine Sorge, diese Schlüssel sollen öffentlich sein, da Sie steuern können, welche Domänen sie verwenden dürfen.

Wir könnten React Together so konfigurieren, dass alle Benutzer automatisch mit derselben Sitzung verbunden werden, sobald sie die Website betreten. Tatsächlich wäre dies eine zweistufige Anleitung, aber ich habe mich für einen Ansatz im Stil von Google Docs entschieden, bei dem die Zusammenarbeit auf freiwilliger Basis erfolgt. Benutzer bleiben so lange getrennt, bis sie durch Klicken auf eine Schaltfläche explizit eine Sitzung erstellen oder einer Sitzung beitreten. Wir werden uns im dritten Schritt dieses Leitfadens mit der Sitzungsverwaltung befassen!

Schritt 2: Synchronisieren Sie den Status aller Benutzer

Nachdem React Together eingerichtet ist, besteht der nächste Schritt darin, den Status zwischen Benutzern zu synchronisieren. Dieser Vorgang ist unglaublich einfach: Wir müssen lediglich die useState-Hooks von React durch die useStateTogether-Hooks von React Together ersetzen.

Der useStateTogether-Hook funktioniert ähnlich wie useState, erfordert jedoch einen zusätzlichen rtKey-Parameter. Dieser Schlüssel identifiziert den Status in der gesamten Anwendung eindeutig und gewährleistet so eine ordnungsgemäße Synchronisierung auch in responsiven Layouts, in denen sich die DOM-Hierarchien zwischen den Ansichtsfenstern unterscheiden können.

So sieht die Transformation aus:

// src/index.tsx
import { StrictMode } from 'react'
import { ReactTogether } from 'react-together'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ReactTogether sessionParams={{
      appId: import.meta.env['VITE_APP_ID'],
      apiKey: import.meta.env['VITE_API_KEY'],
    }}>
      <App />
    </ReactTogether>
  </StrictMode>,
)

// Before
import { useState } from 'react'

export default function Calculator() {
  const [startingAmount, setStartingAmount] = useState(20000);
  const [years, setYears] = useState(25);
  const [returnRate, setReturnRate] = useState(10);
  const [compoundFrequency, setCompoundFrequency] = useState("annually");
  const [additionalContribution, setAdditionalContribution] = useState(500);
  const [contributionTiming, setContributionTiming] = useState("beginning");
  const [contributionFrequency, setContributionFrequency] = useState("month");

  // ...
}

Das Schöne an diesem Ansatz ist, dass die Anwendung weiterhin genau wie zuvor funktioniert – der einzige Unterschied besteht darin, dass die Statusaktualisierungen jetzt für alle verbundenen Benutzer synchronisiert werden.

Schritt 3: Sitzungsverwaltung hinzufügen

Der letzte Schritt besteht darin, den Benutzern eine Möglichkeit hinzuzufügen, gemeinsame Sitzungen zu erstellen, daran teilzunehmen und sie zu verlassen. Ich habe mich dafür entschieden, dies über einen Kopfbereich über dem Rechner zu implementieren, damit die Sitzungssteuerung für jeden leicht sichtbar ist.

React Together macht dies einfach, indem es vier wesentliche Haken bereitstellt:

• useIsTogether: Sagt uns, ob wir uns gerade in einer Sitzung befinden
• useCreateRandomSession: Erstellt eine neue private Sitzung
• useLeaveSession: Trennt die Verbindung zur aktuellen Sitzung
• useJoinUrl: Stellt eine gemeinsam nutzbare URL bereit, damit andere beitreten können

Hier ist eine vereinfachte Version der Header-Komponente (ich habe gerade die Klassennamen entfernt):

// After
import { useStateTogether } from 'react-together'

export default function Calculator() {
  const [startingAmount, setStartingAmount] = useStateTogether("startingAmount", 20000);
  const [years, setYears] = useStateTogether("years", 25);
  const [returnRate, setReturnRate] = useStateTogether("returnRate", 10);
  const [compoundFrequency, setCompoundFrequency] = useStateTogether("compoundFrequency", "annually");
  const [additionalContribution, setAdditionalContribution] = useStateTogether("additionalContribution", 500);
  const [contributionTiming, setContributionTiming] = useStateTogether("contributionTiming", "beginning");
  const [contributionFrequency, setContributionFrequency] = useStateTogether("contributionFrequency", "month");

  // ...
}

Mit dieser Implementierung können Benutzer nun mit nur einem Klick gemeinsame Sitzungen starten. Wenn jemand über die freigegebene URL beitritt, sieht er sofort den gleichen Status wie alle anderen, wobei alle Änderungen in Echtzeit für alle Teilnehmer synchronisiert werden.

Und das war's, es ist einfach und es funktioniert einfach! Außerdem können Sie es in weniger als 10 Minuten erledigen!!

---

Verbesserung der Zusammenarbeitserfahrung

Während die grundlegende Synchronisierung gut funktionierte, fühlte sich etwas nicht an: Elemente änderten sich „von selbst“ auf der Seite, ohne dass erkennbar war, wer die Änderungen vorgenommen hatte. Dies ist eine häufige Herausforderung bei kollaborativen Anwendungen, und Tools wie Google Docs lösen dieses Problem, indem sie anzeigen, wo andere Benutzer Inhalte ansehen und bearbeiten.

Bei echter Zusammenarbeit geht es nicht nur um die Synchronisierung von Zuständen – es geht darum, ein Gefühl der Präsenz zu schaffen. Benutzer müssen einander „sehen“, um effektiv zusammenarbeiten zu können.

Ich habe zunächst darüber nachgedacht, gemeinsame Cursor zu implementieren, damit Benutzer die Mauszeiger der anderen sehen können. Allerdings stellt dieser Ansatz bei responsiven Webanwendungen Herausforderungen dar:

• Mauskoordinaten werden zwischen verschiedenen Ansichtsfenstergrößen nicht sauber zugeordnet
• Cursorpositionen haben oft keinen Kontext – es ist unklar, warum sich der Cursor eines Benutzers an einer bestimmten Stelle befindet
• Die Bedeutung der Cursorposition kann bei verschiedenen Bildschirmlayouts nicht eindeutig sein

Stattdessen habe ich mich auf das konzentriert, was wir mit der Benutzerpräsenz wirklich erreichen wollen:

1. Vermitteln Sie Benutzern das Gefühl, dass andere aktiv anwesend sind
2. Zeigen Sie, welche Elemente jeder Benutzer gerade anzeigt oder bearbeitet

Die Lösung? Markieren Sie die Elemente, mit denen Benutzer interagieren. Dieser Ansatz ist einfacher, intuitiver und funktioniert zuverlässig über alle Ansichtsfenstergrößen hinweg. Sehen wir uns an, wie dies in zwei Schlüsselbereichen implementiert wird: Diagrammregisterkarten und Eingabefelder.

Hinzufügen der Benutzerpräsenz zu Diagrammregisterkarten

Beginnen wir mit einer einfachen Implementierung der Benutzerpräsenz: Zeigen Sie an, welche Benutzer die einzelnen Diagrammregisterkarten anzeigen.

Dazu benötigen wir einen besonderen gemeinsamen Zustand, in dem jeder Benutzer seinen eigenen Wert haben kann, der für alle anderen sichtbar ist.

React Together bietet mit dem useStateTogetherWithPerUserValues-Hook genau das, was wir brauchen (ja, das ist ein ziemlicher Leckerbissen!). Dieser Hook funktioniert ähnlich wie useStateTogether, aber anstatt einen einzelnen Wert zu teilen, ermöglicht er jedem Benutzer, seinen eigenen Wert zu haben, der für alle Teilnehmer sichtbar ist. Der Hook gibt drei Elemente zurück:

1. Der lokale Statuswert des aktuellen Benutzers
2. Eine Funktion zum Aktualisieren des lokalen Status
3. Ein Objekt, das den Statuswert jedes Benutzers enthält

So implementieren wir dies, um Benutzeravatare neben Registerkarten anzuzeigen:

// src/index.tsx
import { StrictMode } from 'react'
import { ReactTogether } from 'react-together'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ReactTogether sessionParams={{
      appId: import.meta.env['VITE_APP_ID'],
      apiKey: import.meta.env['VITE_API_KEY'],
    }}>
      <App />
    </ReactTogether>
  </StrictMode>,
)

Im obigen Codeausschnitt haben wir einen useState durch einen useStateTogetherWithPerUserValues ​​ersetzt, und die Anwendung funktionierte wieder wie zuvor, aber jetzt konnte jeder den Status aller anderen sehen! Dann mussten wir nur noch die neuen Informationen rendern, die wir gerade erhalten hatten.

Diese Implementierung zeigt Benutzeravatare neben jeder Registerkarte an und macht so deutlich, welche Benutzer welche Diagramme anzeigen. Wir filtern den Avatar des aktuellen Benutzers heraus, um Redundanz zu vermeiden, da Benutzer ihre eigene Anwesenheitsanzeige nicht sehen müssen.

Benutzerpräsenz in Eingabefeldern hinzufügen

Das Hinzufügen von Anwesenheitsindikatoren zu Eingabefeldern folgt einem ähnlichen Muster wie im vorherigen Beispiel, jedoch mit einer zusätzlichen Anforderung: Wir müssen verfolgen, wann Benutzer mit der Bearbeitung beginnen und aufhören. Glücklicherweise bieten die Komponenten von Ant Design die notwendigen Rückrufe für diesen Zweck.

Für jedes Eingabefeld wollte ich:

1. Zeigen Sie einen farbigen Rahmen, wenn jemand anderes bearbeitet
2. Zeigen Sie den Avatar des Herausgebers in der oberen rechten Ecke an
3. Behalten Sie konsistente Farben pro Benutzer während der gesamten Anwendung bei

So implementieren wir dies mit dem useStateTogetherWithPerUserValues-Hook:

// src/index.tsx
import { StrictMode } from 'react'
import { ReactTogether } from 'react-together'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ReactTogether sessionParams={{
      appId: import.meta.env['VITE_APP_ID'],
      apiKey: import.meta.env['VITE_API_KEY'],
    }}>
      <App />
    </ReactTogether>
  </StrictMode>,
)

Obwohl der Code etwas länger ist, ist das Prinzip einfach: Wir müssen nur verfolgen, welche Benutzer jedes Eingabefeld bearbeiten, und dann die gewünschte Visualisierung rendern.

Dieser gleiche Ansatz funktioniert für jeden anderen Eingabetyp, wie z. B. Dropdowns und Schieberegler!!

--

Und das ist es! Mit diesem vollständig kollaborativen Kapitalrendite-Simulator wird es für meinen Freund einfacher, seinem Sohn zu erklären, wie die Kapitalrendite über Zoom funktioniert. Mission erfüllt! ✨

Wenn ich sehe, wie einfach es ist, eine solche kollaborative Website zu erstellen, frage ich mich, wie das Internet uns einander näher bringen kann, wenn wir online sind ... Mehr dazu später!

Ich hoffe, Sie haben etwas Neues gelernt und können sich jederzeit an uns wenden, wenn Sie Feedback oder Fragen haben!!

Viel Spaß beim Codieren! ?

• ? Live-Demo
• ?‍? Quellcode
• ? React Together-Dokumente

Das obige ist der detaillierte Inhalt vonFügen Sie Ihrer React-App in wenigen Minuten Zusammenarbeit in Echtzeit hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!