javascript - 队列管理系统（Laravel 6）的实时更新通知声音

Question

我目前正在开发一个队列管理系统，该系统为客户提供一个队列号并等待轮到他在显示监视器上查看。

当管理员端调用队列时，我会怎么做。队列号将自动显示在显示屏上，无需重新加载网页并发出通知声音（如果可能，将读取队列号的文本到语音通知）？

截至目前，系统可以调用队列。但我需要在显示器上重新加载网页才能看到更新。

请帮我。谢谢！

这是我用于调用队列的控制器：

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>

标签： javascriptphphtmllaravel