Как Разработать Фронтенд, Не Ночуя На Заводе

Datana разрабатывает цифровые решения для оптимизации производственных процессов в металлургической промышленности (подробнее в нашем блоге ).

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

Как разработать фронтенд, не ночуя на заводе

Специалист завода за работой Клиентские части наших систем разработаны как программное обеспечение для автоматизированных рабочих мест (АРМ) специалистов завода.

Рабочие станции имеют следующие особенности:

  • должен работать 24 часа, 7 дней в неделю, круглый год, без перерыва;
  • оборудование часто недостаточно мощное и имеет ограниченную производительность;
  • должны работать полностью автономно – из-за требований безопасности к ним нет доступа из сети Интернет, для устранения неполадок только физический доступ;
  • Пользовательский интерфейс должен с высокой частотой отображать данные с видеокамер и датчиков, поступающие в систему;
  • отображение данных на UI с задержкой недопустимо, поскольку это исказит картину потока процесса для пользователя;
  • пользователи не смогут самостоятельно устранить какие-либо проблемы с программным обеспечением — специалисты управляют техническими процессами в режиме реального времени и им некогда разбираться с состоянием системы, звонить в техподдержку или самостоятельно что-либо обновлять.

Мы разрабатываем клиентов с использованием веб-технологий с использованием фреймворка Angular. Веб-клиент открывается на странице в браузере и постоянно работает с выводом данных в реальном времени и без взаимодействия с пользователем.

Особенности работы наших клиентов требуют особых подходов для обеспечения их стабильности и отказоустойчивости.

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

Проблема решилась простой перезагрузкой страницы.

Только в боевых условиях, чтобы нажать F5 в браузере, сотруднику техподдержки приходилось ехать на завод, возможно, даже ночью.

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



1. Обеспечить автоматическое подключение клиента к серверу

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

Поэтому необходимо реализовать автоматическое подключение клиента к серверу независимо от причин потери соединения и без ограничения попыток повторного подключения.

Пример простой реализации — автоподключение по таймауту:

   

const connectWebsocket = endpoint => { const ws = new WebSocket(endpoint); ws.onclose = () => { console.warn(`Websocket ${currentWsId} disconnected. url: ${ws.url} .

Reconnect will be attempted in 1 second`);

Теги: #отказоустойчивость #фронтенд #веб-разработка #оптимизация клиента #angular #веб-клиент
Вместе с данным постом часто просматривают:

Автор Статьи


Зарегистрирован: 2019-12-10 15:07:06
Баллов опыта: 0
Всего постов на сайте: 0
Всего комментарий на сайте: 0
Dima Manisha

Dima Manisha

Эксперт Wmlog. Профессиональный веб-мастер, SEO-специалист, дизайнер, маркетолог и интернет-предприниматель.