reactjs - få den levende besøksmåleren til å endre seg uten oppfrisking

Min klient ønsker å lage en total besøks-teller.

Er det mulig å få totalbesøksteller til å øke selv når brukeren ikke oppdaterer siden? Slik at brukerne kan se totalbesøk telle øke uten å oppdatere siden. Hva bør jeg legge til for å få det til? Vennligst forklar i detalj fordi jeg er ny på TypeScript.

her er koden min

type visitortype={
  count: number;
}


const Footer = () => {
  const [visitor, setvisitor] = useState<visitortype>();

  useEffect(() => {
    fetch('https://count.cab/hit/ghG6Oirn0b')
    .then(response => response.json())
    .then(allvisitor=>  setvisitor(allvisitor))
    .catch(error => console.log(error));
  }, []);

 return (
    <GridItem
      w="100%"
      h={{ base: "80px", lg: "300px" }}
      colSpan={{ base: 8, lg: 4 }}
    >
      <VStack
        align={{ base: "center", lg: "stretch" }}
        marginTop={{ base: "0", lg: "60px" }}
        marginLeft={{ base: "0", lg: "50px" }}
      >
        <Box w={{ base: "100px", lg: "220px" }} paddingBottom={"10px"}>
          <Image src={imgLogoMd} alt="Logo" w="100%" />
          <HStack>
            <Text fontSize={{ base: "xs", lg: "md" }} textAlign={"justify"}>
              {visitor?.count} Visitor
            </Text>
          </HStack>
        </Box>
      </VStack>
    </GridItem>
  );

};

Svar #1

Det finnes flere strategier for hvordan du kan få en live- eller nærlive-teller:

  • Bare hent data fra API-en din med det intervallet du ønsker for å få ferske statistikker. Veldig enkelt å implementere.
  • Lang polling, sannsynligvis nest enklest å implementere, men krever endringer på backend
  • Bruk server-side hendelser
  • Bruk websockets via bibliotek, for eksempel socket.io eller sockjs

Bare den første metoden krever ingen endringer på backend, og vil mest sannsynlig være tilstrekkelig i ditt tilfelle. Du trenger bare å legge til en hook som lar deg gjentatte ganger hente data fra et API: useInterval

Slik kan det se ut

import {useEffect, useRef, useState} from 'react';

type CallbackType = (...args: any[]) => any;

// first you will need useInterval hook, you can implement it yourself or grab it from the lib. 
export function useInterval(callback: CallbackType, delay: number) { 
  const savedCallback = useRef<CallbackType | undefined>(); 
  useEffect(() => { 
    savedCallback.current = callback; 
  }, [callback]); 
  
  useEffect(() => { 
    function func() { 
      savedCallback.current?.(); 
    } 
    if (delay !== null) { 
      let id = setInterval(func, delay); 
      return () => clearInterval(id); 
    } 
  }, [delay]); 
}

// let's say we would like to get fresh stats every minute
const REFRESH_INTERVAL = 60 * 1000

const Footer = () => {
  const [visitor, setVisitor] = useState<visitortype>();

  useInterval(async () => {
    try {
      const response = await fetch('https://count.cab/hit/ghG6Oirn0b')
      const data = await response.json()
      setVisitor(data);
    } catch(error) {
      console.log(error);
    }
  }, REFRESH_INTERVAL);

 return (
    <GridItem
      w="100%"
      h={{ base: "80px", lg: "300px" }}
      colSpan={{ base: 8, lg: 4 }}
    >
      <VStack
        align={{ base: "center", lg: "stretch" }}
        marginTop={{ base: "0", lg: "60px" }}
        marginLeft={{ base: "0", lg: "50px" }}
      >
        <Box w={{ base: "100px", lg: "220px" }} paddingBottom={"10px"}>
          <Image src={imgLogoMd} alt="Logo" w="100%" />
          <HStack>
            <Text fontSize={{ base: "xs", lg: "md" }} textAlign={"justify"}>
              {visitor?.count} Visitor
            </Text>
          </HStack>
        </Box>
      </VStack>
    </GridItem>
  );

};

Svar #2

Webklient-server-arkitekturen er i hovedsak basert på prinsippet om at det kun er klienter som initierer forespørsler.

Derfor er hovedløsningen for å ha en jevn oppdatering uten at besøkende må handle manuelt hver gang, å programmere lansering av nye forespørsler med et forhåndsbestemt intervall.

Her i React kan du for eksempel bruke useInterval-hooken fra react-use:

import { useInterval } from 'react-use';

useInterval(
  () => {
    fetch('https://count.cab/hit/ghG6Oirn0b')
    .then(response => response.json())
    .then(allvisitor=>  setvisitor(allvisitor))
    .catch(error => console.log(error));
  },
  10_000 // Delay in milliseconds, e.g. here every 10 seconds
);

Det finnes nå mer avanserte måter å ha en "live" forbindelse mellom klient og server som gjør det mulig å komme seg ut av det opprinnelige klientinitierte forespørsel-som-eneste-skjemaet, som WebSockets (som nevnt i Davids svar) og Server Events, men det vil kreve at serveren konfigureres deretter.

Relaterte artikler