Because we're using Laravel Websockets as a Pusher replacement, we'll also need to pull in the Pusher PHP SDK.
Head over to .env and switch the BROADCAST_DRIVER to pusher.
While we're in .env, we'll set an app ID, key and secret for Pusher. These are what we'd normally use to connect to Pusher, but since we're replacing Pusher with the Laravel Websockets package, any values will work here for local development.
Tip: Instead of registering a route, you can also just run the broadcast code in php artisan tinker, or Tinkerwell if you have it.
Ok, let's test that our event is being broadcast!
Make sure you have the websocket dashboard open from earlier, and hit http://localhost:8000/broadcast in another tab. You should see an api-message roll in on the websocket dashboard.
If that's working, you're ready to get a fresh Nuxt project set up to listen for events.
Fresh Nuxt app
Again, if you already have a Nuxt app ready to go, I'd recommend creating a fresh one just to test this stuff out.
Run through the installation steps as you need. There's nothing specific you'll need to choose here for the purpose of getting websockets connected.
Once Nuxt has been installed, serve it.
Open it up in your browser, making sure you use the localhost domain so it matches the API.
Creating a Nuxt plugin for Laravel Echo
If you've worked with broadcasting in a Laravel app before, you've likely used Laravel Echo.
If you haven't, this package handles the connection to a websocket server, with the ability to listen on a channel, for events. In our case, we're going to listen to our API's websocket server on the posts channel, for the PostCreated event.
Normally we'd attach this to the browser window object, but we'll create a Nuxt plugin so we can use this easily in our Nuxt pages/components/store.
Now create an echo.js file under the plugins directory in Nuxt and add the following.
We're doing a few things here, so let's break it down.
Creating a new Laravel Echo instance with configuration for our API. wsHost will resolve to localhost. disableStats is used so we don't send statistic information to Pusher's servers. The key is set as local, which you'll have added earlier to your .env file in Laravel. I'd recommend you set this inside environment variables in Nuxt at some stage.
We inject the Echo instance. This makes it available to all pages, components, store actions and other plugins in Nuxt.
Now we've created the plugin, we'll register it in nuxt.config.js
You should see the details for the event logged out to the console.
At the moment we don't have any data attached to this event, so it's just an empty array. Once you start adding public properties to the PostCreated event, they'll appear in this payload.
You're now successfully listening to broadcasted events. There's a slight issue we'll need to resolve, though.
Preventing duplicate channel connections
It's likely you'll allow your users to navigate to different pages in your Nuxt app. As users navigate back and forth between pages that are listening on a websocket channel, we'll actually connect more than once.
If you'd like to test this, create another page in your Nuxt app with some simple navigation at the top of the page and navigate back to the index.vue page a few times. Fire the PostCreated event from the API again and you'll see the empty array from the PostCreated event logged out more than once.
To solve this, we'll *leave *the posts channel whenever we navigate away from the index.vue page. If you're listening to events from components in your Nuxt app, the same solution applies.