实时遇见人工智能：我们如何使用游戏来展示我们的新库，现已开放！

我们很高兴地宣布，我们正在开源用于创建交互式体验的代码，该体验在重大技术活动中为 3,000 多名用户同步数据，展示了我们新发布的实时库的强大功能和可扩展性。

多人无限工艺

其中一个关键部分是制作基于《Infinite Craft》的多人游戏《Super》。该游戏包括结合不同的元素来创造新的元素，培养创造力。

用户将从基本元素开始：“火”、“水”、“土”、“风”、“咖啡”、“JavaScript”和“开发者”。将“Fire”和“JavaScript”组合后，人工智能会分析组合并创建“Firebase”。

因为这些活动会聚集大量人员（有时 3500 人），所以我们无法在每个人之间同步每个新元素。这主要是因为游戏玩法不好玩；相反，这会令人困惑和有压力。到这些事件结束时，将添加多达 16k 个元素。你能想象如何在手机屏幕上显示 16k 个非结构化元素吗？

我们采取了不同的方法，将其变成了一场比赛。每个人都会玩单个实例，但如果他们发现了第一个发现（意味着之前没有人尝试过这种组合），则会向用户添加新积分，并且活动中的每个人都会收到推送通知。积分越多，最终获得大奖的机会就越大。

添加实时

我们使用 @superviz/realtime 包构建了 Next.js 项目，该包提供了基于发布者/订阅者 (PubSub) 设计模式的 WebSocket 基础设施。这允许应用程序的不同实例之间进行有效的事件驱动通信。

为此，我们创建了两个不同的频道：默认频道和游戏频道。默认通道是整个体验的通信，它会告诉用户激活是否已奖励积分，并且会在系统的其他部分之间同步（主要是同步用户数据）。我们有一个专门的游戏频道，它会通知每个正在监听 new.element 事件的人。

当有人组合两个元素时，它会向我们的 API 发送请求。 API 将分析用户是否有效以及元素组合是否已存在于我们的数据库中。如果这两个条件都不满足，它将向 OpenAI 发送创建元素的提示。在返回结果之前，我们会更新数据库并发布几个事件。

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

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

在游戏的前端，我们将监听 new.event 并使用 toast 添加推送通知。像这样：

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

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

但是应用程序的魔法发生在仪表板上，并且调度了其他事件。

有趣的仪表板

在我们的展位上，我们有一台巨大的电视来显示仪表板。它的设计既信息丰富又引人入胜，显示玩家活动和发现的实时更新。它是每个参与者活动的视觉表示。不仅让参与者了解自己的分数，还促进了整个活动的友好竞争和兴奋。

仪表板的灵感来自流行的多人游戏 Agar.io。就像 Agar.io 中的玩家通过消耗较小的细胞来成长一样，我们的仪表板将每个参与者表示为一个动态实体，随着他们获得积分而扩展。

设计理念围绕创建实时数据的视觉吸引力和直观表示。每个参与者都被描绘成一个圆形实体，同心环向外扩展以指示他们的分数和参与程度。这种有机的、类似细胞的可视化不仅使数据易于一目了然地解释，而且还为活动体验添加了游戏化元素。 我们还会为那些离线的用户增加透明度，以展示我们最近发布的状态功能。

幕后花絮

为了实现这一点，此页面将监听每个事件，这就足够了！这是该页面订阅的监听事件列表：

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

让我们分解仪表板监听的这些事件，并探索每个事件如何有助于创建动态的实时体验：

激活事件：仪表板侦听activation.start和activation.complete事件，这些事件在激活开始时添加进度环，并在激活完成时添加完整环。这些戒指是根据该人参与激活的顺序添加的，提供他们在活动过程中的实时视觉故事。

activation.game.update 事件负责展示游戏的实时进度。它更新玩家的分数，通过在仪表板上展开实体周围的环来直观地表示分数。

游戏更新： 它从游戏频道订阅 new.element 事件，这将显示创建的新元素的 Toast 通知。此功能将人们聚集在屏幕周围，以查看其他人实时创建的内容，从而营造一种社区意识和共享兴奋感。

我们看到了美丽元素的创造，如“实时通信”、“网络套接字”、“协作环境”、“远程工作”和有趣的元素如“星际咖啡”！

出席事件：代码订阅各种与出席相关的事件，这些事件在维护参与者活动的最新表示方面发挥着至关重要的作用。这些活动包括：

• Presence.leave：当参与者离线时触发，导致他们在仪表板上的表示变为半透明。
• Presence.joined-room：presence.joined-room：当参与者上线时触发。对于新参与者，一个新的单元格将进入屏幕。对于返回的参与者来说，它将恢复他们现有牢房的亮度。这种效果可以让参与者和组织者轻松发现当前活跃在活动中的人员。

这种实时更新为所有参与者创造了动态、引人入胜的体验，展示了实时库在处理多个同时发生的事件和更新方面的强大功能和多功能性。

黑客马拉松 AI 与实时技术的结合

我们最近举办了超级黑客马拉松 2.0，挑战是：人工智能遇到实时挑战，通过将人工智能与实时通信技术相结合来突破创新的界限。

参与者可以自由地创造任何他们能想象到的东西，就像我们的超级！ （但是我们不能通过这个项目参加我们自己的黑客马拉松？）

黑客马拉松看到了令人印象深刻的项目，这些项目利用了我们的实时库以及各种人工智能技术。参与者所表现出的创造力和创新确实令人惊叹。如果您对获奖项目感到好奇，并想了解他们如何将人工智能与实时功能相结合，我们邀请您阅读有关黑客马拉松获奖者的详细博客文章。它是一个很好的灵感来源，展示了我们的实时库与 AI 结合使用时的潜力。

经过多次请求，它是开源的

人们对我们游戏的巨大热情并没有随着活动的结束而结束。参与者渴望继续玩游戏，不受限制地探索，人们理所当然地沉迷于游戏玩法。我们清楚地听到了您的要求！

现在我们的新实时库已正式发布，我们很高兴地宣布我们正在将该项目的代码开源！这不仅可以让您继续玩游戏，还可以更好地了解幕后的一切工作原理。

您可以在我们的 GitHub 页面上找到该存储库。我们鼓励您克隆它、进行试验，甚至贡献您自己的改进或变体。

快乐编码和制作！

以上是实时遇见人工智能：我们如何使用游戏来展示我们的新库，现已开放！的详细内容。更多信息请关注PHP中文网其他相关文章！