Блог

Я создаю приложение react, которое содержит множество компонентов, имитирующих реальные элементы управления, такие как переключатели, регуляторы температуры, датчики, pir и т.д., И Сильно зависит от состояния

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

После загрузки выполняется вызов для загрузки начальных состояний ВСЕХ элементов управления, получение, построение и визуализация которых может занять несколько секунд. Впоследствии, но в рамках той же команды, принимаются и обрабатываются только измененные состояния

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

Я попытался изучить использование логики, чтобы проверить, открыт ли сокет перед отправкой начальной команды, но из того, что я понимаю о том, как работает веб-сокет, это не сработает,

Есть ли какой-либо способ сохранить идентификатор websocket в виде файла cookie (о котором я ничего не знаю) или в локальном хранилище, чтобы повторно подключить то же соединение с сокетом после перезагрузки, что позволяет получать только новые изменения состояния.

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

Как вы знаете, браузеры отключают соединения websocket при выгрузке страницы. И после перезагрузки любое состояние, сохраненное в DOM, исчезает.

Когда браузер захлопывает websocket, сервер уведомляется, что он закрыт. Следовательно, ваше соединение с websocket пропало после перезагрузки. Вам нужно настроить новый. Вы не сможете найти старый.

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

Вы можете попробовать прослушать 'unload' событие в document.defaultView окне вашего приложения и заставить ваш обработчик событий сохранить ваш статус в локальном хранилище или хранилище сеанса до загрузки страницы.

Очевидно, что при этом вы кэшируете состояние своего приложения в своем браузере. Таким образом, вы берете на себя проблемы согласованности кэша, срока службы, устаревших данных и всего такого.

У ‘toobz есть множество примеров использования React / Redux с локальным / сессионным хранилищем.