Le temps réel rencontre l'IA : comment nous avons utilisé le jeu pour présenter notre nouvelle bibliothèque, désormais open source !

Nous sommes ravis d'annoncer que nous rendons open source le code que nous avons utilisé pour créer une expérience interactive qui a synchronisé les données de plus de 3 000 utilisateurs lors d'événements technologiques majeurs, démontrant ainsi la puissance et l'évolutivité de notre nouvelle bibliothèque en temps réel.

Artisanat infini multijoueur

Un élément clé de ce projet était de rendre le Super, basé sur Infinite Craft, multijoueur. Le jeu consiste à combiner différents éléments pour en créer de nouveaux, favorisant ainsi la créativité.

Les utilisateurs commenceraient par les éléments essentiels : "Feu", "Eau", "Terre", "Vent", "Café", "JavaScript" et "Développeur". Après avoir combiné "Fire" et "JavaScript", une IA analyserait la combinaison et créerait "Firebase".

Comme ces événements rassemblaient un grand nombre de personnes (parfois 3,5 000 personnes), nous ne pouvions pas synchroniser chaque nouvel élément entre tout le monde. C'était principalement parce que le gameplay ne serait pas amusant ; au contraire, ce serait déroutant et stressant. À la fin de ces événements, cela totaliserait 16 000 éléments. Pouvez-vous imaginer comment afficher 16 000 éléments non structurés sur un écran mobile ?

Nous avons adopté une approche différente en en faisant un peu une course. Tout le monde jouerait avec une seule instance, mais au cas où ils trouveraient une première découverte (c'est-à-dire que personne n'avait essayé cette combinaison auparavant), de nouveaux points étaient ajoutés à l'utilisateur et toutes les personnes présentes à l'événement recevraient une notification push. Avec plus de points, il y avait plus de chances de gagner un gros prix à la fin de la journée.

Ajout du temps réel

Nous avons construit avec un projet Next.js, en utilisant notre package @superviz/realtime, qui offre une infrastructure WebSocket, basée sur un modèle de conception Éditeur/Abonné (PubSub). Cela a permis une communication efficace basée sur les événements entre différentes instances de l'application.

Pour cela, nous avions créé deux chaînes différentes, celle par défaut et celle du jeu. Le canal par défaut était la communication de l'ensemble de l'expérience, il indiquerait si une activation a attribué des points à l'utilisateur et se synchroniserait sur d'autres parties du système (principalement en synchronisant les données de l'utilisateur). Nous avions une chaîne dédiée au jeu, qui informerait tous ceux qui écoutaient l'événement new.element.

Lorsque quelqu'un combinait deux éléments, il envoyait une requête à notre API. L'API analyserait si l'utilisateur était valide et si la combinaison d'éléments existait déjà dans notre base de données. Si aucune de ces conditions n'était remplie, il enverrait une invite à OpenAI pour créer l'élément. Avant de renvoyer le résultat, nous mettrions à jour la base de données et publierions plusieurs événements.

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

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

Sur le frontend du jeu, nous écoutions le new.event et ajoutions une notification push en utilisant toast. Comme ça :

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

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

Mais la magie de l'application s'est produite sur le tableau de bord et avec l'envoi de l'autre événement.

Un tableau de bord ludique

Sur notre stand, nous avions une télévision géante pour afficher le tableau de bord. Il a été conçu pour être à la fois informatif et fascinant, affichant des mises à jour en temps réel des activités et des découvertes des joueurs. C'était une représentation visuelle de chaque activité des participants. Non seulement il a tenu les participants informés de leurs scores, mais il a également alimenté une compétition amicale et un enthousiasme tout au long de l'événement.

Le tableau de bord a été inspiré du jeu multijoueur populaire Agar.io. Tout comme la façon dont les joueurs d'Agar.io grandissent en consommant des cellules plus petites, notre tableau de bord représentait chaque participant comme une entité dynamique qui se développait à mesure qu'il gagnait des points.

Le concept de conception tournait autour de la création d'une représentation visuellement attrayante et intuitive des données en temps réel. Chaque participant était représenté comme une entité circulaire, avec des anneaux concentriques s'étendant vers l'extérieur pour indiquer leur score et leur niveau d'engagement. Cette visualisation organique, semblable à une cellule, a non seulement rendu les données faciles à interpréter d'un seul coup d'œil, mais a également ajouté un élément de gamification à l'expérience événementielle. Nous ajouterions également de la transparence aux utilisateurs hors ligne afin de présenter notre fonctionnalité de présence récemment publiée.

Dans les coulisses

Pour que cela se produise, cette page écouterait chaque événement, et c'était largement suffisant ! Voici la liste des événements d'écoute auxquels la page a été abonnée :

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);
}, []);

Décomposons les événements que notre tableau de bord écoute et explorons comment chacun contribue à créer une expérience dynamique en temps réel :

Événements d'activation : Le tableau de bord écoute les événements activation.start et activation.complete, qui ajoutent un anneau de progression lorsqu'une activation démarre et ajoutent un anneau complet lorsqu'elle se termine. Les anneaux ont été ajoutés en fonction de l'ordre dans lequel la personne participerait aux activations, offrant ainsi une histoire visuelle en temps réel de son parcours à travers l'événement.

L'événement activation.game.update était chargé de présenter la progression en temps réel dans le jeu. Il met à jour le score du joueur, qui est représenté visuellement en élargissant l'anneau autour de son entité sur le tableau de bord.

Mises à jour du jeu : Il s'abonne aux événements new.element de la chaîne du jeu, qui afficheraient une notification toast avec le nouvel élément créé. Cette fonctionnalité rassemblait les gens autour de l'écran pour voir ce que les autres créaient en temps réel, créant ainsi un sentiment de communauté et d'enthousiasme partagé.

Nous avions vu créer de beaux éléments, comme « Communication en temps réel », « Sockets Web », « Environnement de collaboration », « Travail à distance » et d'autres amusants comme « Café intergalactique » !

Événements de présence : Le code s'abonne à divers événements liés à la présence, qui jouent un rôle crucial dans le maintien d'une représentation à jour de l'activité des participants. Ces événements incluent :

• présence.leave : déclenché lorsqu'un participant se déconnecte, ce qui rend sa représentation semi-transparente sur le tableau de bord.
• présence.joined-room : présence.joined-room : déclenché lorsqu'un participant se connecte. Pour les nouveaux participants, une nouvelle cellule entrerait à l’écran. Pour les participants qui reviennent, cela restaurerait la luminosité de leur cellule existante. Cet effet permet aux participants et aux organisateurs de repérer facilement qui est actuellement actif dans l'événement.

Cette mise à jour en temps réel crée une expérience dynamique et engageante pour tous les participants, mettant en valeur la puissance et la polyvalence de la bibliothèque Realtime dans la gestion de plusieurs événements et mises à jour simultanés.

Hackathon AI rencontre le temps réel

Nous avons récemment organisé un Super Hackathon 2.0, avec pour défi : l'IA rencontre le défi du temps réel, repoussant les limites de l'innovation en combinant l'intelligence artificielle avec les technologies de communication en temps réel.

Les participants ont eu la liberté de créer tout ce qu'ils pouvaient imaginer, un peu comme notre Super ! (Mais nous n'avons pas pu participer à notre propre hackathon avec ce projet ?)

Le hackathon a vu un nombre impressionnant de projets exploitant notre bibliothèque en temps réel ainsi que diverses technologies d'IA. La créativité et l'innovation manifestées par les participants étaient vraiment remarquables. Si vous êtes curieux de connaître les projets gagnants et souhaitez découvrir comment ils ont combiné l'IA avec des capacités en temps réel, nous vous invitons à lire notre article de blog détaillé sur les gagnants du hackathon. C'est une excellente source d'inspiration et met en valeur le potentiel de notre bibliothèque en temps réel lorsqu'elle est associée à l'IA.

Après de nombreuses demandes, c'est open source

L'enthousiasme débordant pour notre jeu ne s'est pas arrêté aux événements. Les participants étaient impatients de continuer à jouer, à explorer sans limites, les gens étaient légitimement accros au gameplay. Nous avons entendu vos demandes haut et fort !

Maintenant que notre nouvelle bibliothèque Realtime est officiellement publiée, nous sommes ravis d'annoncer que nous rendons le code de ce projet open source ! Cela vous permet non seulement de continuer à jouer, mais également de mieux comprendre comment tout fonctionne en coulisses.

Vous pouvez trouver le référentiel sur notre page GitHub. Nous vous encourageons à le cloner, à l'expérimenter et peut-être même à apporter vos propres améliorations ou variantes.

Bon codage et création !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!