Автообновление страницы в React.js
Мне нужно постоянно обновлять / обновлять мою страницу, чтобы обеспечить ее синхронизацию с моим сервером. В настоящее время я использую setInterval, но я прочитал, что serviceWorkers может решить мою проблему лучше. Рекомендуется ли использовать serviceWorkers? ( синхронизация фона кажется хорошей отправной точкой.)
Или есть другие альтернативы?
4 ответа
После некоторых исследований WebSockets, похоже, является лучшим выбором для обновления веб-сайта в режиме реального времени. Websockets помогает поддерживать открытое двустороннее соединение между веб-сайтом и сервером, чтобы при наличии обновления на сервере сервер мог отправлять изменения на веб-сайт.
Предполагается, что придется изменить много логики в вашем SPA и API, но вы можете использовать протокол WebSocket вместо HTTP/HTTPS.
Просто отправьте уведомление в приложение React с помощью wss, чтобы получить данные классическим способом в асинхронном http / https, вы можете сохранить данные в Redux/Flux, и он автоматически обновит компоненты.
Нет. SetInterval - это путь.
ServiceWorker используется для кэширования содержимого вашего приложения для автономного использования (браузер загрузит сайт в том виде, как он определен в работе с серверами, и вы можете использовать некоторые функции в автономном режиме). Однако вы не можете связаться с вашим сервером, так как для этого нужен доступ в Интернет.
Здесь идет фоновая синхронизация в игре. Давайте представим, что у вас есть что-то вроде чата (веб-приложение). Вы просматриваете приложение в первый раз, и в фоновом режиме все файлы загружаются. После этого вы можете просматривать страницу в автономном режиме и читать сообщения, которые вы уже получили. Во-первых, вы не можете отправлять сообщения, потому что для этого потребуется связаться с сервером. Но с помощью фоновой синхронизации вы можете запланировать отправку, когда пользователь в следующий раз будет в сети - так что пишите только свое сообщение и нажимайте "Отправить", оно будет сохранено и будет отправлено на сервер при следующем подключении к Интернету.
Я думаю, что вы получаете доступ к данным вашего сервера через API, и, следовательно, ни серверная работа, ни фоновая синхронизация не используются для этих задач.
Просто отправьте на сервер запрос и обновите данные в приложении реагирования, как вы делаете это прямо сейчас с помощью setInterval.
У меня похожая проблема, и я планирую попробовать https://www.npmjs.com/package/react-refetch. Мое приложение не достаточно сложное, чтобы нуждаться в избыточности, поэтому я бы предпочел этого избежать.