Laravel (+Vue.js) Broadcast - How to set up a countdown that send a broadcast message when it's over?

Hello,

I want to create a multiplayer quiz with the broadcast system of Laravel (I use Vuejs so that the pages doesn't need refreshing). For that, I need to set up a system to stop a question (the server will send a broadcast message to the players) when the countdown is over. However I don't know how to do it correctly and with the best performances. I thought to use queued jobs: when a question is started, a job is created and queued with a delay of 20 seconds. When the job is executed (after the 20 seconds), a broadcast message is sent to players indicating the question expired.

Is it the best way to do it or is there another way that is better?

Thanks in advance for your answers

devingray_

5 years ago

Level 8

Probably better to use broadcast events instead of queues.

php artisan make:event QuestionStarted

Then make the event broadcast to a public or private channel and use Laravel Echo to listen to the event when a person is present in that channel.

The below example assumes you are publishing events to a private lobby with the ID of 1

<?php

namespace App\Events;

use App\Models\Question;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Queue\SerializesModels;

class QuestionStarted implements ShouldBroadcast
{
    use SerializesModels;

   
    public $question;

   
    public function __construct(Question $question)
    {
        $this->question = $question;
    }

    
    public function broadcastOn()
    {
        return new PrivateChannel('lobby_' . 1);
    }
}

Then listen for the event

Echo.channel(`lobby_1`)
    .listen('QuestionStarted', (e) => {
        console.log(e.question);
    });

From here you can use set timeout or set interval in Vue.js to make axios requests to controllers or routes that fire these events as you wish

Please or to participate in this conversation.