Как и почему я построил проверку подключения к Интернету в веб-приложении с «угловым»

Обо мне

UI инженер (угловой)

Проблема, которую я хотел решить

Я построил несколько приборных панелей (создание предложений, платежей, продукты питания и многое другое). В ходе экземпляров отключения в Интернете были сделаны запрос «HTTP», пользователи столкнулись с проблемами в получении желаемых результатов. Следовательно, возникла необходимость уведомить им об этом с эффективным решением уведомлений.

Я копаю, как перехватить «HTTP HTTP» запросов и проверьте, является ли приложение онлайн/оффлайн USINF “RXJS”. Таким образом, чтобы предоставить пользователю уведомления о состоянии в интерфейсе.

Что такое проверка подключения к Интернету в веб-приложении (угловой)?

«HTTP» перехват – это концепция в «угловом углу», которая перехватывает каждый запрос и может проверить промежуточное программное обеспечение и манипулировать логикой в соответствии с нашими потребностями. В моем случае я хотел определить интернет-статус, будь то онлайн/автоном в зависимости от состояния и уведомления пользователям.

Tech Stack

Я построил панели мониторинга с угловым угловым углом, и имеет концепцию под названием «HTTP-интерфейс» с «наблюдателями RXJS». Проблема была решена с этими понятиями. Ниже приведены фрагменты кода.

1. Услуги HTTP-интерфейса:

export class Intercept implements HttpInterceptor {
    constructor() {}

    intercept(req: HttpRequest, next: HttpHandler): Observable> {
      if (!window.navigator.onLine) {
        // if there is no internet, throw a HttpErrorResponse error
        // since an error is thrown, the function will terminate here
        const error = {
          status: 0,
          error: {
            description: 'Check Connectivity!'
          },
          statusText: 'Check Connectivity!'
        };
        return throwError(new HttpErrorResponse(error));
      } else {
        // else return the normal request
        return next.handle(req);
      }
   }
  }

2. Проверьте онлайн/оффлайн в компонентах:

// Observables & Subscriptions to check online/offline connectivity status
  onlineEvent: Observable;
  offlineEvent: Observable;
  subscriptions: Subscription[] = [];
  
//Get the online/offline connectivity status from browser window
checkOnlineStatus = () => {
    this.onlineEvent = fromEvent(window, 'online');
    this.offlineEvent = fromEvent(window, 'offline');

    this.subscriptions.push(this.onlineEvent.subscribe(() =>     this.toastr.success('Connected!')));
    this.subscriptions.push(this.offlineEvent.subscribe(() => this.toastr.error('Check Connectivity!')));
  }

Процесс проверки проекта подключения к Интернету в веб-приложении (угловой)

Я построил компоненты, услуги, где бы нам не нужно было перехватить «HTTP» с наблюдаемыми «RXJS». Основной модуль приложения вызывает уведомление и обменивается всем подписанным компонентам, когда Интернет включен/выключен.

Проблемы я столкнулся

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

Назначение ключей

Узнайте о «HTTP-перехватчике» в угловых, «RXJS» наблюдается, и их потенциал решения проблем эффективным способом.

Советы и советы

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

Окончательные мысли и следующие шаги

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