Echtzeit trifft auf KI: Wie wir Gaming genutzt haben, um unsere neue Bibliothek vorzustellen, jetzt Open Source!

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!