Realtime bertemu AI: Cara kami menggunakan permainan untuk mempamerkan perpustakaan baharu kami, kini open souce!

Kami teruja untuk mengumumkan bahawa kami membuka sumber kod yang kami gunakan untuk mencipta pengalaman interaktif yang menyegerakkan data untuk lebih 3,000 pengguna di acara teknologi utama, menunjukkan kuasa dan kebolehskalaan perpustakaan Masa Nyata kami yang baru dikeluarkan.

Kraf Infinite Berbilang Pemain

Satu bahagian penting daripada ini ialah membuat Super, yang berasaskan Infinite Craft, berbilang pemain. Permainan ini terdiri daripada menggabungkan elemen yang berbeza untuk mencipta yang baharu, memupuk kreativiti.

Pengguna akan bermula dengan elemen penting: "Api", "Air", "Bumi", "Angin", "Kopi", "JavaScript" dan "Pembangun". Selepas menggabungkan "Fire" dan "JavaScript", AI akan menganalisis gabungan itu dan mencipta "Firebase".

Oleh kerana acara ini akan mengumpulkan sejumlah besar orang (kadang-kadang 3.5k orang), kami tidak dapat menyegerakkan setiap elemen baharu dalam kalangan semua orang. Ini adalah terutamanya kerana permainan tidak akan menyeronokkan; sebaliknya, ia akan mengelirukan dan tertekan. Menjelang akhir acara ini, itu akan menambah sehingga 16k elemen. Bolehkah anda bayangkan bagaimana untuk memaparkan 16k elemen tidak berstruktur pada skrin mudah alih?

Kami mengambil pendekatan berbeza dengan menjadikannya sedikit perlumbaan. Semua orang akan bermain dengan satu contoh, tetapi sekiranya mereka menjumpai penemuan pertama (bermakna tiada siapa sebelum ini telah mencuba gabungan ini), mata baharu ditambahkan kepada pengguna dan semua orang di acara itu akan mendapat pemberitahuan tolak. Dengan lebih banyak mata, terdapat peluang yang lebih besar untuk memenangi hadiah besar pada penghujung hari.

Menambah Masa Nyata

Kami telah membina dengan projek Next.js, menggunakan pakej @superviz/realtime kami, yang menawarkan infrastruktur WebSocket, yang berdasarkan corak reka bentuk Penerbit/Pelanggan (PubSub). Ini membolehkan komunikasi dipacu peristiwa yang cekap antara contoh aplikasi yang berbeza.

Untuk ini, kami telah mencipta dua saluran berbeza, saluran lalai dan permainan. Saluran lalai ialah komunikasi keseluruhan pengalaman, ia akan memberitahu sama ada pengaktifan telah memberikan mata kepada pengguna, dan akan menyegerak merentasi bahagian lain sistem (kebanyakannya menyegerakkan dada pengguna). Kami mempunyai saluran khusus untuk permainan itu, yang akan memberitahu setiap orang yang mendengar acara new.element.

Apabila seseorang menggabungkan dua elemen, ia akan menghantar permintaan kepada API kami. API akan menganalisis sama ada pengguna itu sah dan jika gabungan elemen sudah wujud dalam pangkalan data kami. Jika kedua-dua syarat ini tidak dipenuhi, ia akan menghantar gesaan kepada OpenAI untuk mencipta elemen. Sebelum mengembalikan keputusan, kami akan mengemas kini pangkalan data dan menerbitkan beberapa acara.

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

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

Di bahagian hadapan permainan, kami akan mendengar acara baharu dan menambah pemberitahuan tolak menggunakan roti bakar. Macam ni:

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

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

Tetapi keajaiban aplikasi berlaku pada papan pemuka dan dengan acara lain dihantar.

Papan pemuka yang suka bermain

Pada pendirian kami, kami mempunyai TV gergasi untuk memaparkan papan pemuka. Ia direka bentuk untuk bermaklumat dan memukau, memaparkan kemas kini masa nyata aktiviti dan penemuan pemain. Ia merupakan gambaran visual bagi setiap aktiviti peserta. Bukan sahaja memastikan peserta dimaklumkan tentang markah mereka tetapi juga menyemarakkan persaingan mesra dan keseronokan sepanjang acara.

Papan pemuka diilhamkan oleh permainan berbilang pemain popular Agar.io. Sama seperti cara pemain dalam Agar.io berkembang dengan menggunakan sel yang lebih kecil, papan pemuka kami mewakili setiap peserta sebagai entiti dinamik yang berkembang apabila mereka memperoleh mata.

Konsep reka bentuk berkisar pada penciptaan representasi data masa nyata yang menarik secara visual dan intuitif. Setiap peserta digambarkan sebagai entiti bulat, dengan cincin sepusat mengembang ke luar untuk menunjukkan skor dan tahap penglibatan mereka. Visualisasi organik seperti sel ini bukan sahaja menjadikan data mudah untuk ditafsirkan sepintas lalu tetapi juga menambahkan elemen gamifikasi pada pengalaman acara. Kami juga akan menambah ketelusan kepada pengguna yang berada di luar talian untuk mempamerkan ciri kehadiran kami yang dikeluarkan baru-baru ini.

Di sebalik tabir

Untuk merealisasikannya, halaman ini akan mendengar setiap acara, dan itu banyak! Ini ialah senarai acara mendengar halaman yang dilanggan:

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

Mari kita pecahkan acara yang didengari oleh papan pemuka kami dan terokai cara setiap acara menyumbang kepada mencipta pengalaman masa nyata yang dinamik:

Acara pengaktifan: Papan pemuka mendengar acara activation.start dan activation.complete, yang menambah gelang kemajuan apabila pengaktifan bermula dan menambah gelang lengkap apabila ia selesai. Cincin itu ditambah berdasarkan susunan bahawa orang itu akan mengambil bahagian dalam pengaktifan, memberikan kisah visual masa nyata perjalanan mereka melalui acara itu.

Acara activation.game.update bertanggungjawab untuk mempamerkan kemajuan masa nyata dalam permainan. Ia mengemas kini skor pemain, yang diwakili secara visual dengan mengembangkan cincin di sekeliling entiti mereka pada papan pemuka.

Kemas kini permainan: Ia melanggan acara new.element daripada saluran permainan, yang akan memaparkan pemberitahuan roti bakar dengan elemen baharu dicipta. Ciri ini mengumpulkan orang di sekeliling skrin untuk melihat perkara yang dibuat oleh orang lain dalam masa nyata, mewujudkan rasa komuniti dan keseronokan yang dikongsi.

Kami telah melihat penciptaan elemen yang cantik, seperti "Komunikasi masa nyata", "Soket web", "Persekitaran kerjasama", "Kerja jauh" dan unsur lucu seperti "kopi Intergalaksi"!

Acara kehadiran: Kod ini melanggan pelbagai acara berkaitan kehadiran, yang memainkan peranan penting dalam mengekalkan perwakilan aktiviti peserta yang terkini. Acara ini termasuk:

• presence.leave: Dicetuskan apabila peserta pergi ke luar talian, menyebabkan perwakilan mereka menjadi separa telus pada papan pemuka.
• presence.joined-room: presence.joined-room: Dipecat apabila peserta datang dalam talian. Untuk peserta baharu, sel baharu akan memasuki skrin. Bagi peserta yang kembali, ia akan memulihkan kecerahan sel sedia ada mereka. Kesan ini membolehkan peserta dan penganjur dengan mudah mengesan siapa yang sedang aktif dalam acara itu.

Kemas kini masa nyata ini mencipta pengalaman yang dinamik dan menarik untuk semua peserta, mempamerkan kuasa dan kepelbagaian perpustakaan Masa Nyata dalam mengendalikan berbilang acara dan kemas kini serentak.

Hackathon AI bertemu Realtime

Kami baru-baru ini menganjurkan Super Hackathon 2.0, dengan cabaran: AI memenuhi cabaran Masa Nyata, menolak sempadan inovasi dengan menggabungkan kecerdasan buatan dengan teknologi komunikasi masa nyata.

Peserta diberi kebebasan untuk mencipta apa sahaja yang mereka boleh bayangkan, sama seperti Super kami! (Tetapi kami tidak dapat menyertai hackathon kami sendiri dengan projek ini?)

Hackathon menyaksikan projek mengagumkan yang memanfaatkan perpustakaan Masa Nyata kami bersama pelbagai teknologi AI. Kreativiti dan inovasi yang dipamerkan oleh para peserta sungguh luar biasa. Jika anda ingin tahu tentang projek yang menang dan ingin meneroka cara mereka menggabungkan AI dengan keupayaan masa nyata, kami menjemput anda untuk membaca catatan blog terperinci kami tentang pemenang hackathon. Ia merupakan sumber inspirasi yang hebat dan mempamerkan potensi perpustakaan Masa Nyata kami apabila digandingkan dengan AI.

Selepas banyak permintaan, ia adalah sumber terbuka

Keghairahan yang luar biasa untuk permainan kami tidak berakhir dengan acara. Peserta tidak sabar-sabar untuk terus bermain, meneroka tanpa batasan, orang ramai secara sah ketagih dengan permainan. Kami mendengar permintaan anda dengan kuat dan jelas!

Sekarang perpustakaan Realtime baharu kami dikeluarkan secara rasmi, kami teruja untuk mengumumkan bahawa kami sedang membuat kod untuk projek ini sumber terbuka! Ini membolehkan anda bukan sahaja terus bermain tetapi juga memperoleh pemahaman yang lebih baik tentang cara semuanya berfungsi di belakang tabir.

Anda boleh mencari repositori pada halaman GitHub kami. Kami menggalakkan anda untuk mengklonkannya, bereksperimen dengannya, dan mungkin juga menyumbangkan peningkatan atau variasi anda sendiri.

Selamat mengekod dan membuat kerajinan!

Atas ialah kandungan terperinci Realtime bertemu AI: Cara kami menggunakan permainan untuk mempamerkan perpustakaan baharu kami, kini open souce!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!