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
09. Private channels and broadcasting authentication
Episodes
01. Introduction
02. Realtime Basics with Nuxt and Laravel
03. Private channels
04. Broadcasting to others
Transcript
00:00
Back over to our API, let's go and create out an event that broadcasts to a private channel, we'll define the private channel, and then we'll take a look at what happens when we try to listen to this on the client. I'll talk to you about what's actually happening behind the scenes, and then we'll go ahead and fix this up in the next episode and walk through that step by step.
00:20
Okay, let's go ahead and create out a new event, we'll call this example event private. And again, we'll open this up and just configure it with some really basic data. So let's go ahead and implement should broadcast now so that immediately gets broadcast. And in the constructor, let's go ahead and do exactly the same thing and accept a string
00:38
inside of here. Now the only difference is that we're going to now broadcast on a private channel. Let's just give this the name private, although you could call that absolutely anything. And then now that we've got this event, let's swap this over. So let's go over to our API. And under the real time here, let's go ahead and swap this over for that private event.
00:56
Okay, so now we're going to go over to the root channels file. And we're going to define out a new channel in here, a private channel for public channels, we didn't need to do anything here, because there was no need to authorize this. But now what we need to do is define that channel out. So let's define this private channel out, that's the name of the channel. And then in here,
01:16
we just want to give the condition that the user can actually access this channel. Now, what I'm going to do is just return true here by default. And we'll also get the user information in here, you can see that there's already an example channel up here for you. Everything about channels is covered in the reverb course we have here. So go ahead and check that out if
01:34
you need any pointers. But for now, we need to be authenticated to access this channel. And this will always allow us as an authenticated user to join this private channel. Okay, so we've got our private channel, we've got our event, which broadcasts to this private channel. Now we're going to go ahead and start to listen. So back over to our client,
01:55
let's go over to our app here. And let's swap this out. So we're sending exactly the same request down. But we just want to change up how we're connecting. So I'm just going to go ahead and take this and paste it down here. And let's go ahead and just comment this out. So we have it as a reference. Let's now go ahead and use the private method on echo to connect to that channel
02:14
called private. And we're listening for the example event private, we'll keep the interface here the same for the example events, it pretty much does exactly the same thing. But of course, you could change that if you wanted to. Okay, so this isn't going to work at the moment. But in this episode, we're going to talk about why this is going to work. So let's go over to the
02:34
network tab, like we did before. And we'll filter under the WebSocket section. This is still connected. So this is nothing to do with reverb itself, we can still connect to reverb, that's absolutely fine. We're just not authenticated. So if we go over to fetch XHR, you'll notice this auth request has been sent down to authenticate us on that particular channel. Now, let's just
02:56
take a look at clicking send request, you can see that it does send the request down successfully, but nothing happens. So we are trying to connect this private channel, but we're not receiving an event because we're not authenticated just yet. So if we look at this auth endpoint that we're hitting, notice that it's actually sending a request to our client instead. So this by default,
03:20
when we use echo with a private channel, it will attempt to send a request to the current domain under broadcasting and auth. Now this endpoint in your Laravel application will take two things, it will pass down the socket ID that you are currently connected as, and it will also pass down the channel name. Now with that information and the currently authenticated user, it will work
03:43
out whether or not you can connect to this channel. Now we're getting a 200 OK at the moment because this isn't actually sending a request down to our API. If we just take a look at the payload here, you can see we've got that socket ID, which is the connection that we're working on, and the channel name. So we're trying to connect to this. Now what's actually happened here is this is attempting
04:02
to authenticate on the completely wrong domain. So that's a problem to start with, and it's giving us back a 200 OK. So it's kind of looking like we are authenticated to this channel, but we're not receiving an event because we're not actually authenticated. So our job is now to switch over how Laravel Echo connects to our back end. We want to connect to realtime-nux-laravel.test
04:28
broadcasting-auth, not port 3000. But we've got a little bit of work to do behind the scenes to actually get this to work properly. So now that we understand how authenticating is happening, and the endpoint that it's sending down to to actually try and authenticate us on the channel that we're requesting, let's go over and actually make this work in the next episode.
12 episodes•1 hr 2 mins•8 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!