실시간과 AI의 만남: 게임을 사용하여 이제 오픈 소스가 된 새로운 라이브러리를 선보인 방법!

주요 기술 이벤트에서 3,000명 이상의 사용자를 위해 데이터를 동기화하는 대화형 환경을 만드는 데 사용한 코드를 오픈 소스화하여 새로 출시된 실시간 라이브러리의 성능과 확장성을 입증하게 되었음을 발표하게 되어 기쁘게 생각합니다.

멀티플레이어 무한 공예

이 중 핵심 부분 중 하나는 Infinite Craft를 기반으로 하는 Super를 멀티플레이어로 만드는 것이었습니다. 이 게임은 다양한 요소를 결합하여 새로운 요소를 창조하고 창의력을 키우는 방식으로 구성됩니다.

사용자는 "불", "물", "지구", "바람", "커피", "자바스크립트", "개발자" 등 필수 요소부터 시작합니다. "Fire"와 "JavaScript"를 결합한 후 AI가 조합을 분석하여 "Firebase"를 생성합니다.

이러한 이벤트에는 엄청난 수의 사람(때로는 3500명)이 모이기 때문에 모든 사람이 새로운 요소를 모두 동기화할 수는 없었습니다. 이는 주로 게임플레이가 재미없기 때문이었습니다. 대신 혼란스럽고 스트레스가 많을 것입니다. 이러한 이벤트가 끝나면 최대 16,000개의 요소가 추가됩니다. 16,000개의 비구조적 요소를 모바일 화면에 표시하는 방법을 상상할 수 있나요?

우리는 약간의 경주를 통해 다른 접근 방식을 취했습니다. 모든 사람이 단일 인스턴스로 플레이하지만 첫 번째 발견을 발견한 경우(아무도 이 조합을 시도한 적이 없음을 의미) 사용자에게 새로운 포인트가 추가되고 이벤트에 참석한 모든 사람이 푸시 알림을 받게 됩니다. 포인트가 많을수록 최종적으로 큰 상품을 받을 수 있는 기회가 더 커졌습니다.

실시간 추가

게시자/구독자(PubSub) 디자인 패턴을 기반으로 하는 WebSocket 인프라를 제공하는 @superviz/realtime 패키지를 사용하여 Next.js 프로젝트로 빌드했습니다. 이를 통해 다양한 애플리케이션 인스턴스 간의 효율적인 이벤트 중심 통신이 가능해졌습니다.

이를 위해 기본 채널과 게임이라는 두 가지 채널을 만들었습니다. 기본 채널은 전체 경험에 대한 통신이었으며 활성화로 인해 사용자에게 포인트가 부여되었는지 알려주고 시스템의 다른 부분에서 동기화됩니다(주로 사용자 데이터 동기화). 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를 수신하고 토스트를 사용하여 푸시 알림을 추가합니다. 다음과 같습니다:

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

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

하지만 대시보드와 다른 이벤트가 전달되면서 애플리케이션 마법이 일어났습니다.

재미있는 대시보드

우리 스탠드에는 대시보드를 표시할 거대한 TV가 있었습니다. 플레이어 활동 및 발견에 대한 실시간 업데이트를 표시하여 유익하고 매력적으로 디자인되었습니다. 이는 모든 참가자의 활동을 시각적으로 표현한 것입니다. 참가자들에게 자신의 점수를 알려줄 뿐만 아니라 행사 내내 우호적인 경쟁과 흥미를 불러일으켰습니다.

대시보드는 인기 멀티플레이어 게임 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);
}, []);

대시보드에서 수신하는 이벤트를 분석하고 각 이벤트가 역동적인 실시간 경험을 만드는 데 어떻게 기여하는지 살펴보겠습니다.

활성화 이벤트: 대시보드는 활성화가 시작될 때 진행 링을 추가하고 활성화가 완료되면 전체 링을 추가하는 activate.start 및 activate.complete 이벤트를 수신합니다. 활성화에 참여하는 순서에 따라 반지가 추가되어 이벤트를 통한 여정에 대한 실시간 시각적 스토리를 제공합니다.

activation.game.update 이벤트는 게임의 실시간 진행 상황을 보여주는 역할을 담당했습니다. 대시보드에서 개체 주변의 링을 확장하여 시각적으로 표시되는 플레이어의 점수를 업데이트합니다.

게임 업데이트: 게임 채널에서 new.element 이벤트를 구독하여 새 요소가 생성된 알림 메시지를 표시합니다. 이 기능은 화면 주위에 사람들을 모아 다른 사람들이 무엇을 만들고 있는지 실시간으로 확인함으로써 공동체 의식을 형성하고 즐거움을 공유했습니다.

우리는 "실시간 커뮤니케이션", "웹 소켓", "협업 환경", "원격 근무"와 같은 아름다운 요소와 "은하간 커피"와 같은 재미있는 요소가 생성되는 것을 보았습니다!

현재 상태 이벤트: 이 코드는 참가자 활동을 최신 상태로 유지하는 데 중요한 역할을 하는 다양한 현재 상태 관련 이벤트를 구독합니다. 이러한 이벤트에는 다음이 포함됩니다.

• 존재.탈퇴: 참가자가 오프라인이 되면 트리거되어 대시보드에서 참가자의 표현이 반투명해집니다.
• 존재.조인된 방: 존재.조인된 방: 참가자가 온라인 상태가 되면 시작됩니다. 새로운 참가자의 경우 새 셀이 화면에 표시됩니다. 돌아오는 참가자의 경우 기존 셀의 밝기를 복원합니다. 이 효과를 통해 참가자와 주최자는 현재 이벤트에 누가 참여하고 있는지 쉽게 확인할 수 있습니다.

이 실시간 업데이트는 모든 참가자에게 역동적이고 매력적인 경험을 제공하여 여러 동시 이벤트와 업데이트를 처리하는 실시간 라이브러리의 강력함과 다양성을 보여줍니다.

해커톤 AI와 실시간의 만남

저희는 최근 슈퍼 해커톤 2.0을 개최했습니다. 'AI가 실시간 도전 과제를 충족하고 인공 지능과 실시간 통신 기술을 결합하여 혁신의 한계를 뛰어넘는 도전 과제'를 제시했습니다.

참가자들에게는 Super!처럼 상상할 수 있는 모든 것을 자유롭게 만들 수 있는 기회가 주어졌습니다. (그런데 이번 프로젝트로 저희 해커톤에 참가하지 못하셨나요?)

해커톤에서는 다양한 AI 기술과 함께 실시간 라이브러리를 활용한 인상적인 프로젝트를 보았습니다. 참가자들이 보여준 창의성과 혁신은 정말 놀라웠습니다. 우승한 프로젝트에 대해 궁금하고 AI와 실시간 기능을 어떻게 결합했는지 알아보고 싶다면 해커톤 우승자에 대한 자세한 블로그 게시물을 읽어보시기 바랍니다. 이는 훌륭한 영감의 원천이며 AI와 결합될 때 실시간 라이브러리의 잠재력을 보여줍니다.

많은 요청 끝에 오픈 소스입니다.

저희 게임에 대한 뜨거운 열기는 이벤트로 끝나지 않았습니다. 참가자들은 계속해서 플레이하고, 제한 없이 탐색하기를 원했으며, 사람들은 게임 플레이에 합법적으로 중독되었습니다. 우리는 귀하의 요청을 크고 명확하게 들었습니다!

이제 새로운 Realtime 라이브러리가 공식적으로 출시되었으므로 이 프로젝트의 코드를 오픈 소스로 만들고 있음을 발표하게 되어 기쁘게 생각합니다! 이를 통해 계속 플레이할 수 있을 뿐만 아니라 모든 것이 뒤에서 어떻게 작동하는지 더 잘 이해할 수 있습니다.

GitHub 페이지에서 저장소를 찾을 수 있습니다. 이를 복제하고, 실험하고, 자신만의 개선 사항이나 변형을 제공할 수도 있습니다.

즐거운 코딩과 제작을 즐겨보세요!

위 내용은 실시간과 AI의 만남: 게임을 사용하여 이제 오픈 소스가 된 새로운 라이브러리를 선보인 방법!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!