すべてのユーザーのモバイル デバイスで同時に起動するライトショーを作成しようとしています (最大 2000 ～ 3000 ユーザーが参加可能)。すべてのユーザーはインターネット (Wi-Fi またはモバイル データ) を使用します。私たちの FE では、サブスクリプションに Apollo を使用していますが、それは魅力的に機能します。

しかし問題は、ユーザー A がユーザー B よりも早くサブスクリプション イベントを取得できることです。これは、ユーザー A がユーザー B よりも早くゲームのプレイを開始することを意味します。ライトショー アーキテクチャがあり、ユーザーは早くも遅くも開始できないため、これが問題になります。ユーザーとしては違いがすぐにわかりますが、見た目は良くありません。

遅延の差は最大 300 ミリ秒になる可能性があることがわかります。 Android（Xiaomi 9）とiOS（iPhone11）の間の時間は、ほとんどが180ms程度です。 2 つの iOS デバイス iPhone 11 と iPhone 13 を比較すると、その差は約 50 ～ 100 ミリ秒です。この差をなくす、または少なくともすべてのデバイスで 40 ～ 60 ミリ秒に減らす方法はありますか?

BE から開始すると、サーバー時刻 (utc 0) が送信され、ライト ショーはタイムスタンプで開始されます=> FE では、すべてのデバイスに機能を解決する時間を与えるために 10 秒を追加したため、起動は次のようになります。遅延 -> 「タイムスタンプ 10 秒」。

FE では、ライブラリ「react-native-ntp-client」を使用して、すべてのタイプのデバイス (ios/android、デバイスごとに時間が若干異なることがわかったため) で同じ時刻を取得しました。次に、「start」と「ntpTime」の差を計算し、それをタイムアウトとして setTimeout 関数に提供します。これにより、ライト ショーの開始がトリガーされます。

以下に、ライト ショーが配置されている画面の使用例を示します。

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:number) => { // 関数を完了するのに十分な時間を確保するために開始を 10 秒遅らせます - lightshowStartAt はサーバーからのタイムスタンプです const lightshowStart = dayjs.unix(lightshowStartAt).add(10, 's'); ntpClient.getNetworkTime('time.cloudflare.com', 123, (エラー, 日付) => { if (エラー) { console.error('接続できません', エラー); 戻る; } console.log('NTP client date - ', date); // Mon Jul 08 2013 21:31:31 GMT 0200 (パリ、マドリッド (heure d’été)) let ntpTime = dayjs(date); // ミリ秒単位の差分 const diff = lightshowStart.diff(ntpTime); // このタイムアウトの後、すべてのデバイスが同時に再生を開始する必要があります setTimeout(() => { ライトショーStartHandler(); }、差分); }); }; if (データ && データ?.joinLightshow.started) { const lightshowData = data.lightshow; getServerTime(lightshowData.startedAt); } }、 [データ]）; useEffect(() => { if (データ && データ?.joinLightshow?.finished) { ライトショー終了ハンドラー(); } }、 [データ]）; 戻る （ <スタイル={style.container}の表示> ....  ); };

たくさんのコメントやご意見ありがとうございます;)