Оперативное обновление со звуком уведомлений для системы управления очередью (Laravel 6)

Question

В настоящее время я работаю над системой управления очередью, которая дает клиенту номер очереди и ждет его очереди, которую можно просмотреть на мониторе .

Что я буду делать, чтобы когда администратор вызывает очередь. Номер очереди будет автоматически отображаться на мониторе дисплея без перезагрузки веб-страницы и создания звука уведомления (если возможно текстовое речевое уведомление, которое будет читать номер очереди)?

На данный момент система может вызывать queue.but мне нужно перезагрузить веб-страницу на мониторе, чтобы увидеть обновления.

Пожалуйста, помогите мне. Спасибо!

Вот мой контроллер для вызова очереди:

public function callqueue(Request $request)
{
    $request->validate([
        'called'=>['max:255'],
        'counter'=>['max:255']
    ]);

    $dept=Auth::user()->department;
    Queue::where([
        ['department',$dept],
        ['called', 'no']
        ])
        ->whereDate('created_at', Carbon::today())
        ->orderBy('id', 'asc')
        ->first()
        ->update(['called'=>$request->called,'counter'=>$request->counter]);

    return redirect('admin')->withStatus(__('Queue has been called.'));

}

Вот часть, где будет отображаться очередь (в display.blade. php):

<div class="card shadow bg-gradient-red shadow">
    <h1 class="display 1 font-weight-bold text-white"><strong>NOW SERVING</strong></h1>
    </div>
  <div class="row">

      <div class="col-sm-6">
        <div class="card bg-gradient-lighter mt-3 shadow">
            <div class="card-header-lg">
            <h3 class="text-default text-uppercase">{{$cashier1->department ?? 'cashier'}}</h3>
            </div>
            <div class="card-body-sm">
                <h1 class="display-1 font-weight-bold"><strong>{{$cashier1->letter ?? ''}}-{{$cashier1->number ?? ''}}</strong></h1>
            </div>
            <div class="card-footer-sm">
              <p class="text-warning font-weight-bold">COUNTER 1</p>
            </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="card bg-gradient-lighter shadow mt-3">
            <div class="card-header-lg">
                <h3 class="text-default text-uppercase">{{$cashier2->department ?? 'cashier'}}</h3>
            </div>
            <div class="card-body-sm">
                <h1 class="display-1 font-weight-bold"><strong>{{$cashier2->letter ?? ''}}-{{$cashier2->number ?? ''}}</strong></h1>
            </div>
            <div class="card-footer-sm">
                <p class="text-warning font-weight-bold">COUNTER 2</p>
            </div>
        </div>
      </div>
  </div>



    <div class="row">
        <div class="col-sm-6">
            <div class="card bg-gradient-lighter shadow mt-3">
                <div class="card-header-lg">
                    <h3 class="text-default text-uppercase">{{$accounting1->department ?? 'accounting'}}</h3>
                </div>
                <div class="card-body-sm">
                    <h1 class="display-1 font-weight-bold"><strong>{{$accounting1->letter ?? ''}}-{{$accounting1->number ?? ''}}</strong></h1>
                </div>
                <div class="card-footer-sm">
                    <p class="text-warning font-weight-bold">COUNTER 1</p>
                </div>
            </div>
        </div>


      <div class="col-sm-6">
        <div class="card bg-gradient-lighter mt-3 shadow">
            <div class="card-header-lg">
            <h3 class="text-default text-uppercase">{{$accounting2->department ?? 'accounting'}}</h3>
            </div>
            <div class="card-body-sm">
                <h1 class="display-1 font-weight-bold"><strong>{{$accounting2->letter ?? ''}}-{{$accounting2->number ?? ''}}</strong></h1>
            </div>
                <div class="card-footer-sm">
                  <p class="text-warning font-weight-bold">COUNTER 2</p>
                </div>
            </div>
          </div>
    </div>

      <div class="row">
        <div class="col-sm-6">
            <div class="card bg-gradient-lighter shadow mt-3">
                <div class="card-header-lg">
                    <h3 class="text-default text-uppercase">{{$registrar1->department ?? 'registrar'}}</h3>
                </div>
                <div class="card-body-sm">
                    <h1 class="display-1 font-weight-bold"><strong>{{$registrar1->letter ?? ''}}-{{$registrar1->number ?? ''}}</strong></h1>
                </div>
                <div class="card-footer-sm">
                    <p class="text-warning font-weight-bold">COUNTER 1</p>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="card bg-gradient-lighter mt-3">
                <div class="card-header-lg">
                    <h3 class="text-default text-uppercase">{{$registrar2->department ?? 'registrar'}}</h3>
                </div>
                <div class="card-body-sm">
                    <h1 class="display-1 font-weight-bold"><strong>{{$registrar2->letter ?? ''}}-{{$registrar2->number ?? ''}}</strong></h1>
                </div>
                <div class="card-footer-sm">
                    <p class="text-warning font-weight-bold">COUNTER 2</p>
                </div>
            </div>
        </div>

      </div>

  </div>