Wir freuen uns, Ihnen mitteilen zu k?nnen, dass wir den Code, den wir zur Erstellung eines interaktiven Erlebnisses verwendet haben, das Daten für über 3.000 Benutzer bei gro?en Technologieveranstaltungen synchronisiert hat, als Open Source ver?ffentlichen und so die Leistungsf?higkeit und Skalierbarkeit unserer neu ver?ffentlichten Echtzeitbibliothek demonstrieren.

Multiplayer Infinite Craft

Ein wichtiger Teil davon war die Entwicklung des Super, das auf Infinite Craft basierte, im Mehrspielermodus. Das Spiel besteht darin, verschiedene Elemente zu kombinieren, um neue zu schaffen und so die Kreativit?t zu f?rdern.

Benutzer würden mit den wesentlichen Elementen beginnen: ?Feuer“, ?Wasser“, ?Erde“, ?Wind“, ?Kaffee“, ?JavaScript“ und ?Entwickler“. Nach der Kombination von ?Fire“ und ?JavaScript“ analysiert eine KI die Kombination und erstellt ?Firebase“.

Da diese Veranstaltungen eine gro?e Anzahl von Menschen (manchmal 3,5.000 Menschen) zusammenbringen würden, konnten wir nicht jedes neue Element unter allen synchronisieren. Das lag vor allem daran, dass das Gameplay keinen Spa? machen würde; Stattdessen w?re es verwirrend und stressig. Am Ende dieser Ereignisse w?ren das 16.000 Elemente. K?nnen Sie sich vorstellen, wie man 16.000 nichtstrukturierte Elemente auf einem mobilen Bildschirm anzeigt?

Wir haben einen anderen Ansatz gew?hlt und es zu einer Art Rennen gemacht. Jeder würde mit einer einzelnen Instanz spielen, aber für den Fall, dass er eine erste Entdeckung fand (was bedeutet, dass noch niemand zuvor diese Kombination ausprobiert hatte), wurden dem Benutzer neue Punkte gutgeschrieben und jeder Teilnehmer der Veranstaltung erhielt eine Push-Benachrichtigung. Mit mehr Punkten war die Chance, am Ende des Tages einen gro?en Preis zu gewinnen, gr??er.

Hinzufügen von Echtzeit

Wir haben mit einem Next.js-Projekt erstellt und dabei unser @superviz/realtime-Paket verwendet, das eine WebSocket-Infrastruktur bietet, die auf einem Publisher/Subscriber-Entwurfsmuster (PubSub) basiert. Dies erm?glichte eine effiziente ereignisgesteuerte Kommunikation zwischen verschiedenen Instanzen der Anwendung.

Hierfür hatten wir zwei verschiedene Kan?le erstellt, den Standard und das Spiel. Der Standardkanal war die Kommunikation des gesamten Erlebnisses, er würde erkennen, ob eine Aktivierung dem Benutzer Punkte verliehen hat, und würde mit anderen Teilen des Systems synchronisiert werden (haupts?chlich durch Synchronisierung von Benutzerdada). Wir hatten einen eigenen Kanal für das Spiel, der jeden benachrichtigte, der das new.element-Event h?rte.

Wenn jemand zwei Elemente kombiniert, sendet er eine Anfrage an unsere API. Die API würde analysieren, ob der Benutzer gültig war und ob die Elementkombination bereits in unserer Datenbank vorhanden war. Wenn keine dieser Bedingungen erfüllt w?re, würde es eine Aufforderung an OpenAI senden, das Element zu erstellen. Bevor wir das Ergebnis zurücksenden, würden wir die Datenbank aktualisieren und mehrere Ereignisse ver?ffentlichen.

await Promise.all([
  defaultChannel.publish("activation.game.update", {
    userId: user.id,
    points: quantity,
  }),

  gameChannel.publish("new.element", {
    element,
    user,
    points: quantity,
  }),
]);

Im Frontend des Spiels h?rten wir uns das new.event an und fügten mithilfe von Toast eine Push-Benachrichtigung hinzu. Etwa so:

await Promise.all([
  defaultChannel.publish("activation.game.update", {
    userId: user.id,
    points: quantity,
  }),

  gameChannel.publish("new.element", {
    element,
    user,
    points: quantity,
  }),
]);

Aber die Anwendungsmagie geschah auf dem Dashboard und beim Ausl?sen des anderen Ereignisses.

Ein verspieltes Dashboard

Auf unserem Stand hatten wir einen riesigen Fernseher, auf dem das Armaturenbrett angezeigt wurde. Es wurde so gestaltet, dass es sowohl informativ als auch faszinierend ist und Echtzeitaktualisierungen der Spieleraktivit?ten und Entdeckungen anzeigt. Es war eine visuelle Darstellung jeder einzelnen Teilnehmeraktivit?t. Die Teilnehmer wurden nicht nur über ihre Ergebnisse informiert, sondern sorgten auch w?hrend der gesamten Veranstaltung für freundschaftlichen Wettbewerb und Spannung.

Das Dashboard wurde vom beliebten Multiplayer-Spiel Agar.io inspiriert. ?hnlich wie Spieler in Agar.io durch den Verbrauch kleinerer Zellen wachsen, stellte unser Dashboard jeden Teilnehmer als dynamische Einheit dar, die sich mit zunehmenden Punkten vergr??erte.

Das Designkonzept drehte sich um die Schaffung einer visuell ansprechenden und intuitiven Darstellung von Echtzeitdaten. Jeder Teilnehmer wurde als kreisf?rmige Einheit dargestellt, wobei sich konzentrische Ringe nach au?en erweiterten, um seine Punktzahl und den Grad seines Engagements anzuzeigen. Diese organische, zellenartige Visualisierung machte die Daten nicht nur auf einen Blick leicht zu interpretieren, sondern fügte dem Veranstaltungserlebnis auch ein Element der Gamifizierung hinzu. Wir würden auch den Benutzern, die offline waren, Transparenz bieten, um unsere kürzlich ver?ffentlichte Pr?senzfunktion zu pr?sentieren.

Hinter den Kulissen

Um dies zu erm?glichen, hat sich diese Seite jedes einzelne Ereignis angeh?rt, und das war genug! Dies ist die Liste der H?rereignisse, für die die Seite abonniert wurde:

const handleGameUpdate = (message) => {
  const userFromMessage = message.data.user;
  const element = message.data.element;

  if (userFromMessage.email ===
    JSON.parse(localStorage.getItem(USERDATA_KEY) as string))
    return;

  toast(`${userFromMessage?.name} just discovered ${element.name.toUpperCase()} and has more chance of winnin!`);
};

useEffect(() => {
  gameChannel.subscribe("new.element", handleGameUpdate);
}, []);

Lassen Sie uns die Ereignisse aufschlüsseln, die unser Dashboard überwacht, und untersuchen, wie jedes dazu beitr?gt, ein dynamisches Echtzeiterlebnis zu schaffen:

Aktivierungsereignisse: Das Dashboard wartet auf die Ereignisse ?activation.start“ und ?activation.complete“, die einen Fortschrittsring hinzufügen, wenn eine Aktivierung beginnt, und einen vollst?ndigen Ring hinzufügen, wenn sie abgeschlossen ist. Die Ringe wurden in der Reihenfolge hinzugefügt, in der die Person an den Aktivierungen teilnehmen würde, und lieferten eine visuelle Echtzeitgeschichte ihrer Reise durch das Ereignis.

Die Veranstaltung ?activation.game.update“ war dafür verantwortlich, den Spielfortschritt in Echtzeit zu pr?sentieren. Es aktualisiert den Punktestand des Spielers, der durch die Erweiterung des Rings um seine Entit?t auf dem Dashboard visuell dargestellt wird.

Spielaktualisierungen: Es abonniert new.element-Ereignisse vom Spielkanal, die eine Toastbenachrichtigung mit dem erstellten neuen Element anzeigen würden. Diese Funktion versammelte Menschen um den Bildschirm, um in Echtzeit zu sehen, was andere erstellten, und erzeugte so ein Gemeinschaftsgefühl und gemeinsame Begeisterung.

Wir hatten die Entstehung wundersch?ner Elemente wie ?Echtzeitkommunikation“, ?Web-Sockets“, ?Kollaborationsumgebung“, ?Remote-Arbeit“ und lustiger Elemente wie ?Intergalaktischer Kaffee“ gesehen!

Pr?senzereignisse: Der Code abonniert verschiedene pr?senzbezogene Ereignisse, die eine entscheidende Rolle bei der Aufrechterhaltung einer aktuellen Darstellung der Teilnehmeraktivit?ten spielen. Zu diesen Ereignissen geh?ren:

• Presence.leave: Wird ausgel?st, wenn ein Teilnehmer offline geht, wodurch seine Darstellung auf dem Dashboard halbtransparent wird.
• pr?senz.joined-room: pr?senz.joined-room: Wird ausgel?st, wenn ein Teilnehmer online geht. Für neue Teilnehmer würde eine neue Zelle auf dem Bildschirm erscheinen. Für zurückkehrende Teilnehmer würde es die Helligkeit ihrer vorhandenen Zelle wiederherstellen. Durch diesen Effekt k?nnen Teilnehmer und Organisatoren leicht erkennen, wer gerade an der Veranstaltung aktiv ist.

Diese Aktualisierung in Echtzeit schafft ein dynamisches, ansprechendes Erlebnis für alle Teilnehmer und demonstriert die Leistungsf?higkeit und Vielseitigkeit der Echtzeitbibliothek bei der Verarbeitung mehrerer gleichzeitiger Ereignisse und Aktualisierungen.

Hackathon KI trifft auf Echtzeit

Wir haben kürzlich einen Super Hackathon 2.0 mit der Herausforderung ?KI trifft auf Echtzeit“ veranstaltet und dabei die Grenzen der Innovation durch die Kombination künstlicher Intelligenz mit Echtzeit-Kommunikationstechnologien verschoben.

Den Teilnehmern wurde die Freiheit gegeben, alles zu kreieren, was sie sich vorstellen konnten, ?hnlich wie bei unserem Super! (Aber wir konnten mit diesem Projekt nicht an unserem eigenen Hackathon teilnehmen?)

Beim Hackathon gab es beeindruckende Projekte, die unsere Echtzeitbibliothek neben verschiedenen KI-Technologien nutzten. Die Kreativit?t und Innovationskraft der Teilnehmer war wirklich bemerkenswert. Wenn Sie neugierig auf die Gewinnerprojekte sind und erfahren m?chten, wie sie KI mit Echtzeitfunktionen kombiniert haben, laden wir Sie ein, unseren ausführlichen Blogbeitrag über die Hackathon-Gewinner zu lesen. Es ist eine gro?artige Inspirationsquelle und zeigt das Potenzial unserer Echtzeitbibliothek in Kombination mit KI.

Auf vielfachen Wunsch ist es Open Source

Die überw?ltigende Begeisterung für unser Spiel endete nicht mit den Ereignissen. Die Teilnehmer waren begierig darauf, weiterzuspielen und ohne Einschr?nkungen zu erkunden, die Leute waren regelrecht süchtig nach dem Gameplay. Wir haben Ihre Wünsche laut und deutlich geh?rt!

Nachdem unsere neue Realtime-Bibliothek offiziell ver?ffentlicht wurde, freuen wir uns, Ihnen mitteilen zu k?nnen, dass wir den Code für dieses Projekt als Open Source ver?ffentlichen! Dadurch k?nnen Sie nicht nur weiterspielen, sondern auch besser verstehen, wie alles hinter den Kulissen funktioniert.

Das Repository finden Sie auf unserer GitHub-Seite. Wir ermutigen Sie, es zu klonen, damit zu experimentieren und vielleicht sogar Ihre eigenen Verbesserungen oder Variationen beizusteuern.

Viel Spa? beim Codieren und Basteln!

Das obige ist der detaillierte Inhalt vonEchtzeit trifft auf KI: Wie wir Gaming genutzt haben, um unsere neue Bibliothek vorzustellen, jetzt Open Source!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!