Индикатор скорости соединения как сделать

Может быть, он существует, и я не мог его найти, но я просто хотел добавить простой индикатор в стиле полосок уровня сигнала на мобильном телефоне в свое веб-приложение.

Мои требования были просты. Он должен работать в angular, он должен использовать значки Font Awesome (используя поддержку Angular), он должен отображаться в автономном режиме/онлайн. Мне пришлось покопаться, чтобы узнать, как это сделать, поэтому я хотел скомпилировать решение здесь, чтобы его могли увидеть все (а также для меня в следующий раз, когда я захочу это сделать..)

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

Итак, моим первым исследованием было выяснить, есть ли у Font Awesome для этого какая-то иконка, которая позволяла бы отображать нужное количество полос. Это не так, насколько я знаю. Прочитал ветку об этом, и сетую, что они что-то не создали.

Но было решение, как это сделать, поэтому я так и сделал. Метод использовал слои шрифтов, классные иконки и CSS. Накладывая и смещая значок поверх значка сигнала с настройкой непрозрачности, мы можем затемнить нужные нам полосы. Однако он не использовал Angular Font Awesome, поэтому мне пришлось изменить его соответствующим образом:

    <!-- icon with no bars -->
    <fa-icon *ngIf="connSpeed == 'offline'" [icon]="faSignal" style="opacity: .5"></fa-icon>
    <!-- icon with 1 bar -->
    <fa-layers *ngIf="connSpeed == 'slow-2g'" [fixedWidth]="true">
        <fa-icon [icon]="faSquare" transform="right-2" [mask]="faSignal"></fa-icon>
        <fa-icon [icon]="faSquare" style="opacity: .5" transform="left-14" [mask]="faSignal"></fa-icon>
    </fa-layers>
    <!-- icon with 2 bar -->
    <fa-layers *ngIf="connSpeed == '2g'" [fixedWidth]="true">
        <fa-icon [icon]="faSquare" transform="right-6" [mask]="faSignal"></fa-icon>
        <fa-icon [icon]="faSquare" style="opacity: .5" transform="left-10" [mask]="faSignal"></fa-icon>
    </fa-layers>
    <!-- icon with 3 bar -->
    <fa-layers *ngIf="connSpeed == '3g'" [fixedWidth]="true">
        <fa-icon [icon]="faSquare" transform="right-10" [mask]="faSignal"></fa-icon>
        <fa-icon [icon]="faSquare" style="opacity: .5" transform="left-6" [mask]="faSignal"></fa-icon>
    </fa-layers>
<!-- icon with 4 bar -->
    <!--fa-layers *ngIf="connSpeed == '4g'" [fixedWidth]="true">
        <fa-icon [icon]="faSquare" transform="right-14" [mask]="faSignal"></fa-icon>
        <fa-icon [icon]="faSquare" style="opacity: .5" transform="left-2" [mask]="faSignal"></fa-icon>
    </fa-layers -->    
    <!-- icon with 5 bar -->
    <fa-icon *ngIf="connSpeed == '4g'" [icon]="faSignal"></fa-icon>

И на стороне машинописного текста:

import { faSignal, faSquareFull } from '@fortawesome/free-solid-svg-icons';
...
export class MyComponent {
    faSignal = faSignal;
    faSquare = faSquareFull;
    public connSpeed = "";

Значок имеет 6 полос, но, как вы увидите, определение скорости дает только 4 скорости, поэтому я просто закомментировал одну из полос.

Теперь об обнаружении онлайн- и офлайн-статуса и скорости. Здесь используются две разные вещи. Для онлайн/оффлайн вы просто добавляете декоратор в Angular, чтобы получить событие под названием:

@HostListener('window:offline')
    setNetworkOffline(): void {
    this.connSpeed = 'offline';
}
@HostListener('window:online')
    setNetworkOnline(): void {
    this.connSpeed = navigator.connection.effectiveType;
}

Вы заметите, что для онлайн-события мы установили скорость на значение в navigator.connection, которое является одним из четырех значений: slow-2g, 2g, 3g или 4g.

Чтобы получать обновления скорости, пока мы в сети, мы можем создать наблюдаемый объект следующим образом (благодаря Netanel Basal за этот фрагмент кода):

type Connection = {
    effectiveType: string;
}
declare global {
    interface Navigator {
        connection: {
            effectiveType: string;
            addEventListener: Function;
            removeEventListener: Function;
        }
    }
}
...
    ngOnInit() {
//** create an observable that triggers on connection speed changes */
        const connection$ = new Observable((observer) => {
            const { effectiveType } = navigator.connection;
            observer.next(effectiveType);
const onConnectionChange = () => {
                const { effectiveType } = navigator.connection;
                observer.next(effectiveType);
            };
navigator.connection.addEventListener("change", onConnectionChange);
return () => {
                navigator.connection.removeEventListener(
                    "change",
                    onConnectionChange
                );
                observer.complete();
            };
        });
//** and then subscribe to it
connection$.subscribe((effectiveType: string) => {
            this.connSpeed = effectiveType;
        });
    }

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

Индикатор скорости соединения как сделать

Вопросы по теме