<p>모든 사용자의 모바일 장치에서 동시에 실행되는 Lightshow를 만들려고 합니다(최대 2000-3000명의 사용자가 있을 수 있음). 모든 사용자는 인터넷(Wi-Fi 또는 모바일 데이터)을 사용합니다. FE에서는 구독을 위해 Apollo를 사용하는데 이는 정말 매력적입니다. </p> <p>하지만 문제는 사용자 A가 사용자 B보다 더 빨리 구독 이벤트를 얻을 수 있다는 것입니다. 이는 사용자 A가 사용자 B보다 먼저 게임을 시작한다는 것을 의미하는데, 이는 우리가 라이트쇼 아키텍처를 갖고 있고 사용자가 더 일찍 또는 나중에 시작할 수 없기 때문에 문제가 됩니다. 사용자로서 차이점을 즉시 확인할 수 있으며 좋아 보이지 않습니다. </p> <p>제가 본 바로는 지연 시간 차이가 최대 300ms에 이를 수 있다는 것입니다. Android(Xiaomi 9)와 iOS(iPhone11) 사이의 시간은 대부분 약 180ms+-입니다. 두 iOS 기기인 iPhone 11과 iPhone 13을 비교하면 그 차이는 약 50~100밀리초입니다. 이 차이를 없애거나 모든 장치에 대해 최소한 40-60ms로 줄이는 방법이 있습니까? </p> <p>BE부터 서버 시간(utc+0)을 보내고 라이트 쇼는 타임스탬프와 함께 시작됩니다 => FE에서는 모든 장치에 이 기능을 해결할 시간을 주기 위해 10초를 추가했습니다. 지연-> "타임스탬프 + 10초"입니다.</p> <p>FE에서는 모든 유형의 장치에서 동일한 시간을 얻기 위해 "react-native-ntp-client" 라이브러리를 사용했습니다(ios/android, 각 장치마다 시간이 약간씩 다르다는 것을 알았습니다). 그런 다음 "start"와 "ntpTime" 사이의 차이를 계산하고 이를 setTimeout 함수에 시간 초과로 제공하여 조명 쇼의 시작을 트리거합니다. </p> <p>아래에는 조명 쇼가 있는 화면을 사용하는 방법에 대한 예가 나와 있습니다. </p> <pre class="brush:php;toolbar:false;">'dayjs'에서 dayjs를 가져옵니다. 'react-native-ntp-client'에서 ntpClient를 가져옵니다. const LightshowScreen 내보내기: React.FC< LightshowScreenProps<'Lightshow'> > = ({경로}) => const {데이터, 로딩} = useSubscription(JOIN_LIGHTSHOW_SUBSCRIPTION, { 변수: {lightshowId: Route.params.lightshow.id}, }); useEffect(() => { const getServerTime = async (lightshowStartAt: 번호) => // 함수를 완료하는 데 충분한 시간을 제공하기 위해 시작을 10초 지연합니다. lightshowStartAt는 서버의 타임스탬프입니다. const lightshowStart = dayjs.unix(lightshowStartAt).add(10, 's'); ntpClient.getNetworkTime('time.cloudflare.com', 123, (오류, 날짜) => { if (오류) { console.error('연결할 수 없습니다', error); 반품; } console.log('NTP 클라이언트 날짜 - ', 날짜); // Mon Jul 08 2013 21:31:31 GMT+0200 (파리, 마드리드(heure d'été)) let ntpTime = dayjs(date); // ms 단위의 차이 const diff = lightshowStart.diff(ntpTime); // 이 시간 초과 후에는 모든 장치가 동시에 재생을 시작해야 합니다. setTimeout(() => { lightshowStartHandler(); }, 차이점); }); }; if (data & data?.joinLightshow.started) { const lightshowData = data.lightshow; getServerTime(lightshowData.startedAt); } }, [데이터]); useEffect(() => { if (data && data?.joinLightshow?.finished) { lightshowFinishHandler(); } }, [데이터]); 반품 ( <보기 스타일={style.container}> .... </보기> ); };</pre> <p>모든 의견과 생각에 감사드립니다.)</p>