Level 33
I recently wrote an article on WebSockets and took some stuff from my blog and adjusted it to your use case:
In your routes/channels.php:
Broadcast::channel('Booking.{userId}', function ($user, $userId) {
return $user->id === $id; // or any other validation rule you want
});
Pass the Booking with user to the view from the controller.
In your view:
<html>
<head>
<title>Booking's page</title>
<!-- always include your CSRF token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div id="app">
<!-- our Vue component -->
<booking :booking="{{ $booking }}" />
</div>
<!-- include our compiled javascript -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
In your Vue component:
<template>
<div>
Your booking with ID {{ booking.id }} is currently:
<span v-if="processing">
Available
</span>
<span v-else>
Booked!
</span>
</div>
</template>
<script>
export default {
props: ['booking'],
data() {
return {
processing: true,
}
},
created() {
window.Echo.private(`Booking.${this.booking.user.id}`)
.listen("ConfirmBookingEvent", (e) => {
this.processing = false;
});
},
}
</script>
1 like