android – A number of system (telephones) synchronization – React Native

I am making an attempt to create Lightshow which can begin on mobiles for all customers (it may be as much as 2000-3000 customers) on the similar time. At our FE we’re utilizing Apollo with subcriptions, which works like a allure.

However the issue is, that Person A can acquire the subscription occasion sooner that the Person B. It implies that Person A will begin enjoying prior to the Person B, and it is a downside as a result of now we have lighshow schema and customers cannot begin earlier or later. As a person you will notice the distinction instantly and it is not trying good.

What I noticed is that the delay distinction could be 300ms. Principally is round 180ms+- between android (Xiaomi mi 9) vs ios (iPhone11). If we examine two ios gadgets iPhone 11 vs iPhone 13 the distinction is round 50-100ms. Is there approach how you can wipe this distinction, or no less than decrease it to, for all gadgets for instance 40-60ms ?

From BE we’re sending the server time(utc+0) when the lightshow will begin in timestamp => in FE i’m including 10 seconds to offer all gadgets time to unravel the performance, so the beginning is delayed -> “timestamp + 10 seconds”.

In FE I am utilizing library “react-native-ntp-client” to get similar time on all sort of gadgets (ios/android as a result of what i found every system has somewhat bit completely different time). Then i’m calculating the distinction between the “begin” and “ntpTime” and supply it as timeout to my setTimeout perform which can set off the beginning of the lightshow.

Down under i’m offering the instance, how i’m working with the display the place is the lightshow.

import dayjs from 'dayjs';
import ntpClient from 'react-native-ntp-client';

export const LightshowScreen: React.FC<
  LightshowScreenProps<'Lightshow'>
> = ({route}) => {
  const {knowledge, loading} = useSubscription(JOIN_LIGHTSHOW_SUBSCRIPTION, {
    variables: {lightshowId: route.params.lightshow.id},
  });

  useEffect(() => {
    const getServerTime = async (lightshowStartAt: quantity) => {
      // Delay begin 10s to offer sufficient time to complete our capabilities - 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 join', error);
          return;
        }

        console.log('NTP consumer 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 gadgets ought to begin play on the similar time
        setTimeout(() => {
          lightshowStartHandler();
        }, diff);
      });
    };

    if (knowledge && knowledge?.joinLightshow.began) {
      const lightshowData = knowledge.lightshow;
      getServerTime(lightshowData.startedAt);
    }
  }, [data]);

  useEffect(() => {
    if (knowledge && knowledge?.joinLightshow?.completed) {
      lightshowFinishHandler();
    }
  }, [data]);

  return (
    <View model={model.container}>
      ....
    </View>
  );
};

Thanks for all of your feedback and concepts 😉