リアルタイムと AI の出会い: 新しいライブラリを紹介するためにゲームをどのように使用したかがオープンソースになりました。

主要な技術イベントで 3,000 人を超えるユーザーのデータを同期するインタラクティブなエクスペリエンスを作成するために使用したコードをオープンソース化することを発表できることを嬉しく思います。これは、新しくリリースされたリアルタイム ライブラリのパワーとスケーラビリティを実証します。

マルチプレイヤー無限クラフト

その重要な部分の 1 つは、Infinite Craft をベースにしたスーパーをマルチプレイヤーにすることでした。このゲームは、さまざまな要素を組み合わせて新しい要素を作成し、創造性を養います。

ユーザーは、「火」、「水」、「土」、「風」、「コーヒー」、「JavaScript」、「開発者」という重要な要素から始めることになります。 「Fire」と「JavaScript」を組み合わせると、AI がその組み合わせを分析して「Firebase」を作成します。

これらのイベントには膨大な数の人 (場合によっては 350 万人) が集まるため、すべての新しい要素を全員で同期させることはできませんでした。これは主に、ゲームプレイが面白くないためでした。むしろ、混乱とストレスを感じることになるでしょう。これらのイベントが終了するまでに、要素の数は最大 16,000 個になります。 16k の非構造化要素をモバイル画面に表示する方法を想像できますか?

私たちは、ちょっとしたレースにすることで、異なるアプローチをとりました。誰もが 1 つのインスタンスでプレイしますが、最初の発見を見つけた場合 (つまり、これまで誰もこの組み合わせを試したことがない)、新しいポイントがユーザーに追加され、イベントの参加者全員がプッシュ通知を受け取ります。ポイントが多ければ多いほど、一日の終わりに高額賞金を獲得するチャンスが大きくなります。

リアルタイムの追加

私たちは、パブリッシャー/サブスクライバー (PubSub) 設計パターンに基づいた WebSocket インフラストラクチャを提供する @superviz/realtime パッケージを使用して Next.js プロジェクトでビルドしました。これにより、アプリケーションの異なるインスタンス間の効率的なイベント駆動型通信が可能になりました。

このために、デフォルトとゲームの 2 つの異なるチャネルを作成しました。デフォルトのチャネルはエクスペリエンス全体のコミュニケーションであり、アクティベーションによってユーザーにポイントが付与されたかどうかを通知し、システムの他の部分と同期します (主にユーザーのデータを同期します)。私たちはゲーム専用のチャンネルを用意し、new.element イベントを聞いているすべての人に通知しました。

誰かが 2 つの要素を組み合わせると、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 をリッスンし、トーストを使用してプッシュ通知を追加します。同様に:

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 および activity.complete イベントをリッスンします。これらのイベントは、アクティベーションの開始時に進行状況リングを追加し、終了時に完全なリングを追加します。リングは、ユーザーがアクティベーションに参加する順序に基づいて追加され、イベントを通じてのリアルタイムの視覚的なストーリーを提供します。

activation.game.update イベントは、ゲームのリアルタイムの進行状況を示す役割を担っていました。プレーヤーのスコアが更新され、ダッシュボード上のエンティティの周囲のリングを拡大することで視覚的に表示されます。

ゲームの更新: ゲーム チャネルから new.element イベントをサブスクライブし、新しい要素が作成されたトースト通知を表示します。この機能により、画面の周りに人々が集まり、他の人が作成しているものをリアルタイムで確認できるようになり、コミュニティ感が生まれ、興奮を共有することができました。

私たちは、「リアルタイム通信」、「Web ソケット」、「コラボレーション環境」、「リモートワーク」などの美しい要素や、「銀河間コーヒー」のような面白い要素の作成を見てきました。

プレゼンス イベント: このコードは、参加者のアクティビティの最新の表現を維持する上で重要な役割を果たす、さまざまなプレゼンス関連イベントをサブスクライブします。これらのイベントには次のものが含まれます:

• present.leave: 参加者がオフラインになるとトリガーされ、ダッシュボード上で参加者の表現が半透明になります。
• present.joined-room: present.joined-room: 参加者がオンラインになると起動されます。新しい参加者の場合、新しいセルが画面に表示されます。戻ってきた参加者にとっては、既存のセルの明るさが復元されます。この効果により、参加者と主催者は、現在イベントでアクティブになっている人を簡単に見つけることができます。

このリアルタイム更新は、すべての参加者にとってダイナミックで魅力的なエクスペリエンスを生み出し、複数の同時イベントや更新を処理するリアルタイム ライブラリの能力と多用途性を示します。

ハッカソン AI とリアルタイムの出会い

私たちは最近、AI とリアルタイム通信テクノロジーを組み合わせてイノベーションの限界を押し上げる、AI とリアルタイムの挑戦という課題を掲げてスーパー ハッカソン 2.0 を主催しました。

参加者には、スーパー! と同じように、想像できるものは何でも作成する自由が与えられました。 (でも、このプロジェクトでは独自のハッカソンには参加できませんでした?)

ハッカソンでは、リアルタイム ライブラリとさまざまな AI テクノロジーを活用した印象的なプロジェクトが見られました。参加者が示した創造性と革新性は本当に驚くべきものでした。受賞プロジェクトに興味があり、AI とリアルタイム機能をどのように組み合わせたかを知りたい場合は、ハッカソンの受賞者に関する詳細なブログ投稿をぜひお読みください。これはインスピレーションの素晴らしい源であり、AI と組み合わせた場合のリアルタイム ライブラリの可能性を示しています。

多くのリクエストを経て、オープンソースになりました

私たちのゲームに対する圧倒的な熱意は、イベントだけでは終わりませんでした。参加者はプレイを続けて制限なく探索することに熱心で、人々は正当にゲームプレイに夢中になっていました。お客様のご要望をしっかりと聞きました！

新しいリアルタイム ライブラリが正式にリリースされたので、このプロジェクトのコードをオープンソースにすることを発表できることを嬉しく思います。これにより、プレイを続けるだけでなく、舞台裏ですべてがどのように機能するかをより深く理解することができます。

リポジトリは GitHub ページで見つけることができます。クローンを作成して実験し、独自の改善やバリエーションを提供することをお勧めします。

コーディングとクラフトを楽しんでください!

以上がリアルタイムと AI の出会い: 新しいライブラリを紹介するためにゲームをどのように使用したかがオープンソースになりました。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。