Real-time with Nuxt and Laravel
This episode is for members only

Sign up to access "Real-time with Nuxt and Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
05. Listening for events

Episodes

0%
Your progress
  • Total: 1h 2m
  • Played: 0m
  • Remaining: 1h 2m
Join or sign in to track your progress

Transcript

00:00
We've got a lot to cover here, and here's what we're going to do. We're going to create a button out in our client, which will send a request through to our API.
00:08
In that API route, that's going to go ahead and broadcast out an event to our reverb server. And on the client side, we want to pick up that event and then do something with it. So pretty much like any other app would work. You send a request through to your API.
00:24
That goes ahead and notifies all connected clients that some event has happened. And that is the basics of real time. Okay, let's get started then. So we are going to first of all hop over to our Laravel app, and we're going to get API functionality installed.
00:40
To do this, we can go ahead and install API functionality with the install API command. That will go ahead and pull in Laravel Sanctum for us. It will create our API routes file, and optionally, we can publish some of the database migrations. Okay, so now that that's done, let's go over to our API routes.
00:59
Let's go ahead and create our route in here, which will go and broadcast some event. So we're just going to call this real time. We'll just keep things really simple. And in here, that is where we're going to broadcast.
01:11
Let's make sure that we can actually send a request through from NUX to this endpoint first of all. So let's hop over and create our button in here to go ahead and trigger a real time action. So let's just call this send request. It doesn't really matter.
01:24
And let's go ahead and add in a click event on here to send a request. We'll just keep this really simple for now. Okay, so in here, this send request method is going to go ahead and make an API request. Now with NUX, we can use fetch to do this.
01:42
We don't have a base URL set, so let's just hard code it in for now. So we're going to go into real time, nuxt, laravel.test, forward slash API, and then that real time route that we've just registered. With this, we're going to send a method of post, and let's just make sure that we hook that up properly here.
02:02
We didn't, so let's make sure that is a post request. And if we've done everything correctly, this should work. So if we go ahead and open up our network tab here, filter by fetch XHR, and we'll hit send request. That should send a request through to our API.
02:15
We can see that's been successful. Okay, so let's go ahead and create the event out now that we want to broadcast. And again, we'll just keep this really simple. Let's go ahead and create out an example event here, and we'll set this up.
02:28
Okay, so this example event, the first thing that we're going to do is make sure we implement the should broadcast now interface. You can use should broadcast, but that's going to queue your broadcasting. You'll probably want to switch that over later, but we just want instant gratification here and see this come through without any additional configuration. Okay, so let's say that into the constructor here, we just pass in a string, and let's go ahead and choose where we want to broadcast this.
02:59
So at the moment, we're just focusing on public channels. So let's switch this over to new channel, and let's just call this public. We'll just keep it, again, really, really simple. Okay, so now that we've done this, we can come over to our API route here, and we can go ahead and broadcast this new event.
03:16
So we call that example event. Let's pass in a string here. Let's just do string random 10, and that is it. So that should now broadcast that event over to our reverb server on the back end, and then we can look at picking this up in the client.
03:31
Okay, so now that we've done this, let's just make sure that request actually works. So let's hit send request. Again, that was successful. That would have been sent over to our reverb server, but of course, at the moment, we're just not picking this up on the client.
03:43
Now, we already have our plugin installed over in the client, so we can just start to use this now. So somewhere at the top here, let's go ahead and bring in the unmounted hook from view. We don't really need to import that with Nuxt, and let's go and start to listen for this event. So we're going to use window echo or just echo, and we're going to connect up to a channel, the channel we called public,
04:06
and then we want to listen for a specific event. Let's just pull that down as well. So we're listening for that example event, and then in the callback here, what we're going to do is get back the event data, which we'll just type into any at the moment.
04:19
Okay, so we're going to go ahead and console log out the event that we get through, and let's just switch the lang over here to TypeScript. Okay, let's make sure that this works, and then we're going to go ahead and just add in a type for our window object so we don't get this echo error that you can see just here.
04:36
Okay, let's go over and try this out. So we're going to open up our console. Remember now what's happening is that event is going to be sent over to reverb, and then hopefully using echo that we have as that plug-in, this is going to pick this event up, and there we go.
04:50
Perfect. So we've now successfully created a real-time connection between our API and our client, and this payload is going to be broadcast to all connected clients that are currently on this page. Okay, let's make this a little bit more interesting just so we can visually see what's happening here.
05:05
So I'm going to go ahead and create out a strings ref in here, and let's go ahead and just push this string to the strings ref, and then we'll just dump them out on the page. So we'll say strings value push, and we'll push the string that we get through from the event, and then down here in our template, let's go ahead and output these.
05:23
So just down here, let's create out a V4 on here, and we'll say for string in strings. We'll key this by the index, so let's go ahead and put in the index in here as well, and we'll just dump out the string value in here like so. Okay, let's go over and hit send request, and yeah, I just need to swap these over,
05:49
and we should just get a bunch of strings now that are being sent in real time. So if you had multiple browser windows open accessing this URL, this is now going to be delivered to all connected clients. To finish up, let's just go ahead and sort out the types that we're working with here. So we have an example event type, which we can type with TypeScript, and we have our window object as well.
06:13
So just to keep things really simple, let's go ahead and create out a directory with types in here, and we'll create a TypeScript file just called index. This will go ahead and just define these types globally for us. So let's go ahead and declare these as global, and the first one we'll work on is the window interface.
06:33
So we know that we attach pusher to this, and we'll just set any because it doesn't have a specified type, and we'll set echo as well for any. Next up, we'll do the same thing for the example event. So we can create an interface out for that event that we are pushing in real time so we know what data it contains.
06:51
So we know that this just has a string in the payload, which, of course, is a string. So the window, now that we've declared that, should be fixing the issue with the type here on the window object, and that's fine. But now what we can do is over here, we can define the event as that example event. So if we just pull that in, finally, what we could do is go ahead and type what we were expecting to be within this strings.
07:20
So we can go ahead and say that we have a array of strings in here, and that should fix all of our type errors up. Great. So we now have real time functionality working between Laravel and Nuxt. Let's just go over to the next episode and talk about config so we can keep this nice and tidy. The moment we're hard coding lots of values in, nice and great.

Episode summary

In this episode, we're building a simple real-time feature between Laravel and a Nuxt client. First, we set up a button in the Nuxt app that will send a request to a new API route in Laravel. That route, when hit, will broadcast an event using Laravel's broadcasting system (here, Reverb is assumed, but the setup is similar for others).

We start by installing the required API functionality in our Laravel app, which involves Sanctum and some migrations. Then, we set up an endpoint called /api/real-time that will broadcast a new ExampleEvent to the public channel every time it is hit. On the Nuxt side, we hardcode the URL for now and make a POST request when our button is clicked.

Next, we set up Laravel Echo (already installed as a plugin) in our Nuxt client to listen on the same public channel for the ExampleEvent. Initially, we just log incoming events, but soon after, we enhance the UX: we push event strings into a reactive array and list them live on the page, so whenever the button is clicked, every connected client instantly sees the new string.

Finally, we clean up some TypeScript errors by properly typing the window object and the event payload. The end result is a real-time flow: click a button in one browser, and everyone with the app open sees the update immediately!

Next up, we'll tidy up our config values so that things are less hardcoded and the app is more robust.

Episode discussion

No comments, yet. Be the first!