Skip to content
Luca Ubiali Web Developer

Real Time Games With Laravel - Joining a Game

August 27th, 2024
Continuous Learning

Episode - https://laracasts.com/series/real-time-games-with-laravel/episodes/2

Event Broadcasting is set up in this episode. This feels like a kata again and personally is one where I usually trip up on one of the steps then spend way too much time figuring out what I forgot. So this is a nice refresher.

  1. php artisan install:broadcasting

  2. php artisan make:event

  3. on the backend

    1. edit the event to broadcast on the desired channel

    2. fire the event from somewhere in the code

  4. on the frontend

    1. check that echo.js is set up correctly and referenced in bootstrap.js

    2. listen for the event through Echo

  5. Define the channel in routes/channels.php

  6. php artisan reverb:start

  7. php artisan queue:listen

    1. I only recently moved to Reverb. Before I was using Pusher which didn’t need this step. Right now I constantly forget about this one

    2. didn’t know about the listen parameter that will reload the queue when the code changes. Nice!

And to round off the lesson some Vue.js refresh:

 1<script>
 2const props = defineProps(['games']);
 3 
 4const games = ref(props.games.data);
 5 
 6Echo.private('lobby')
 7    .listen('GameJoined', (event) => {
 8        games.value = games.value.filter((game) => game.id !== event.game.id);
 9 
10        if(games.length < 5) {
11            router.reload({
12              only: ['games'],
13              onSuccess: () => games.value = props.games.data
14            });
15        }
16    });
17</script>

When using a ref in the script tag, remember to use .value.

When using Inertia reload method it’s possible to request just a list of props to reload, instead of all of them.

When reload finishes successfully, the internal state of refs is not updated automatically, so will have to be done explicitly.