<p>我正在嘗試建立 Lightshow，它將同時在所有用戶的行動裝置上啟動（最多可以有 2000-3000 個用戶）。所有用戶都將使用網路（Wi-Fi 或行動數據）。在我們的 FE，我們使用 Apollo 進行訂閱，這就像一個魅力。 </p> <p>但問題是，用戶 A 可以比用戶 B 更快地獲取訂閱事件。這意味著用戶 A 將比用戶 B 更早開始玩遊戲，這是一個問題，因為我們有 lighshow 架構，而用戶可以『不能早點或晚點開始。作為用戶，您會立即看到差異，而且看起來不太好。 </p> <p>我看到的是延遲差異可以達到300ms。 android (小米 9) 與 ios (iPhone11) 之間的時間大多約為 180ms -。如果我們比較兩台 iOS 裝置 iPhone 11 和 iPhone 13，差異約為 50-100 毫秒。對於所有設備，有沒有辦法消除這種差異，或至少將其降低到 40-60 毫秒？ </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;">import dayjs from 'dayjs'; import ntpClient from 'react-native-ntp-client'; export const LightshowScreen: React.FC< LightshowScreenProps<'Lightshow'> > = ({route}) => { const {data, loading} = useSubscription(JOIN_LIGHTSHOW_SUBSCRIPTION, { variables: {lightshowId: route.params.lightshow.id}, }); useEffect(() => { const getServerTime = async (lightshowStartAt: number) => { // Delay start 10s to provide enough time to finish our functions - lightshowStartAt is timestamp from our server const lightshowStart = dayjs.unix(lightshowStartAt).add(10, 's'); ntpClient.getNetworkTime('time.cloudflare.com', 123, (error, date) => { if (error) { console.error('Cant connect', error); return; } console.log('NTP client date - ', date); // Mon Jul 08 2013 21:31:31 GMT 0200 (Paris, Madrid (heure d’été)) let ntpTime = dayjs(date); // Diff in ms const diff = lightshowStart.diff(ntpTime); // After this timeout all devices should start play at the same time setTimeout(() => { lightshowStartHandler(); }, diff); }); }; if (data && data?.joinLightshow.started) { const lightshowData = data.lightshow; getServerTime(lightshowData.startedAt); } }, [data]); useEffect(() => { if (data && data?.joinLightshow?.finished) { lightshowFinishHandler(); } }, [data]); return ( <View style={style.container}> .... </View> ); };</pre> <p>感謝您的所有評論和想法;)</p>