Как я могу получить данные JSON в реальном времени более эффективным и менее ошибочным способом? - PullRequest
Новая
       27

Как я могу получить данные JSON в реальном времени более эффективным и менее ошибочным способом?

0 голосов
/ 20 июня 2019

Я пытаюсь получить данные JSON в реальном времени с сервера в моем приложении реакции. Код, который я пишу, работает редко, постоянно не может получить и также создает слишком много запросов к серверу, что делает браузер очень медленным. Как я могу получить данные в реальном времени более эффективным и менее ошибочным способом? Заранее спасибо.

Я использовал Fetch API и setInterval для запроса данных на сервер и использовал реакционные хуки для обновления данных. Но он делает слишком много запросов, чем я думал, и также возникает проблема со скоростью. 

const [state, setState] = React.useState(0)

const devicePos = function () {
  fetch('http://192.168.10.233:34599/')
  .then(response => response.json())
    .then(response => {
      setState(response[0].x)
      console.log(response[0].x)
    })
  .catch(error => {
    console.log(error);
  });
}

setInterval(function(){
  devicePos()
}, 500);

Я надеюсь, что данные в реальном времени обновляются быстрее.

Ответы [ 3 ]

1 голос
/ 20 июня 2019

Я не думаю, что setInterval - это хороший способ опроса данных. Некоторые ответы могут быть медленнее, чем 500 мс, и вы можете получить более старые результаты позже.

При каждом опросе следует дождаться предыдущего ответа. 

const [state, setState] = React.useState(0)
const [timer, setTimer] = React.useState(null)
const [isMounted, setIsMounted] = React.useState(false)

async function updateDevicePosition () {
  try {
    const result = await fetch('http://192.168.10.233:34599/')
    const data = await result.json()
    setState(data.x)
  } catch (e) {
    console.error(e)
  }
  clearTimeout(timer)
  setTimer(setTimeout(updateDevicePosition, 200))
}

useEffect(() => {
  if (!isMounted) {
     updateDevicePosition()
     setIsMounted(true)
  }
})

При этом очень много запросов на такую ​​работу. Предпочтительным способом должно быть использование сокета, где сервер ведет данные, и отправка сообщений вашему клиенту только при изменении положения устройства. В зависимости от того, когда вы будете использовать эту информацию о позиции, ваше приложение будет использовать много ресурсов

1 голос
/ 20 июня 2019

вместо помещения его в setInterval, асинхронный код должен идти в хуке useEffect.В ответ вы должны выполнять асинхронные вызовы в методах жизненного цикла, поскольку они имеют побочные эффекты, как вы, вероятно, уже испытывали.Хук useEffect аналогичен компоненту componentDidMount в классах.Разница в том, что в коробке он содержит больше, то есть обрабатывает все три метода жизненного цикла: componentDidMount, componentDidUpdate, componentWillUnmount 

useEffect(() => {
  devicePos();
}, []);

Вот документы о том, как это работает

0 голосов
/ 20 июня 2019

Вы можете сделать это только для повторной отправки извлечения, когда ответ возвращается (плюс некоторая задержка). 

const devicePos = () => {
   fetch()
      .then( res => res.json() )
      .then( res => {
         updateData();
      } )
      .catch( err => {
         showError(err);
      })
      .finally( () => {
         setTimeout( devicePos, 500 );
      })
}

В противном случае, вы можете закончить работу слишком медленным сервером.

finally гарантирует, что независимо от ответа API (или тайм-аута), запрос будет отправлен снова.

...