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
11. Whispering... just works
Episodes
01. Introduction
02. Realtime Basics with Nuxt and Laravel
03. Private channels
04. Broadcasting to others
Transcript
00:00
Let's demonstrate whispering, which is client to client connection only without touching our Laravel Reverb server.
00:07
Now, this requires that we're connected to a private channel, but now we have this working. Let's go ahead and create a really basic example to see how this looks. OK, so inside the components directory, I'm going to create our separate component for this just to keep it completely separate. Let's create our a whisper component inside of here and we'll go ahead and create our button to go ahead and whisper between clients.
00:29
And when we go and click on this, let's just invoke a whisper function. And we'll define this out here. So let's call this whisper. And for now, we will just do nothing or just console log something out here. Let's just say whisper. OK, so we'll head over to app dot view.
00:46
And let's go ahead and just change this over in our template. So let's just add in a whisper component to that. And we should now be able to click on that and just get a console log. OK, so the way that whispering works, we just open this up is we connect up to a private channel so we can even connect to the same channel that we have currently been working with.
01:08
So let's go ahead and pull in unmounted and we can get rid of that from there. And let's go and create our channel here. So what we need to do when we whisper is create a channel variable, connect to it. And this is going to be a pusher private channel instance.
01:24
So let's pull this in from our echo. And then now that we've defined that, what we can do is connect up when we've mounted. And then down here somewhere, like in our whisper method, we can go ahead and access that channel. The reason this needs to happen is because we need to connect when we mount, but we can't whisper on something that hasn't been set outside of our home now.
01:47
OK, so let's go ahead and say window echo. And let's connect up to that private channel that we created earlier, which, remember, will automatically authorize us or authenticate us via the thing that we added to the Laravel echo set up. And now what we can do is just whisper on this. So now that we've got this channel created, when we whisper, we can say channel whisper and we can just choose any event.
02:12
Let's just call this event whisper. And in here we can provide some data. So let's just fake this out. OK, so now what will happen is anyone that's currently on this page can listen for this whisper, which will only be sent across clients and not through Laravel Reverb.
02:29
This is perfect for really high amounts of data that you need to send through real time. So here, once we have gone ahead and mounted, we can listen for this particular whisper, which we've called whisper. And then once again, we get a callback like with any other method in here with the event, which we'll just type to any. So now in here, let's go ahead and just console log out E and it should now work.
02:53
So we don't get whispers sent to ourselves. So when I click whisper, this just isn't going to work. But we can easily go ahead and open up a new incognito window here and go ahead and have a look at what happens. So let's head over to the console here.
03:06
Let's pull this across and let's hit whisper. And there we go, you can see that that data is now being sent through to all connected clients. So because we set up Laravel Echo to automatically go through to our API to authenticate us under that broadcasting auth, we can now also whisper without the need to do anything else.
12 episodes•1 hr 2 mins•9 months ago
Overview
Using Reverb and Laravel Echo, let’s add real-time broadcasting to a Nuxt SPA, driven by Laravel.
We’ll start with the basics of public channels without authorization. Once we’re set up and able to broadcast to all clients perfectly, we’ll dive into authentication and authorizing private channels by modifying how Laravel Echo authorizes with our API.
By the end of the course, you’ll have everything you need to start adding real-time broadcasting to your Nuxt/Laravel applications.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!