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
09. Private channels and broadcasting authentication

Episodes

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

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.

Episode summary

In this episode, we dive into broadcasting events on private channels. We'll start by creating a new event that specifically targets a private channel instead of a public one. You'll see how to define the private channel on the server, set up a basic authorization rule (for now, we're just allowing any authenticated user), and then hook it up to the client side for listening.

Once that's in place, we swap out our API to broadcast using this new private event. On the front-end, we switch from listening for public events to private ones by using the respective Echo method.

However, things don't work just yet! We'll walk through what goes wrong and why it's happening. Specifically, you'll notice an auth request is sent out to try and authorize the user's connection to the private channel. The key issue: it's hitting the wrong domain, so even though we get a 200 OK response, we aren't actually authenticated and don't receive any events.

By the end of this video, you'll have a solid understanding of the authentication flow for private channels, what goes on behind the scenes, and why we need to tweak our setup to properly handle the authentication requests, which is exactly what we'll tackle in the next episode.

Episode discussion

No comments, yet. Be the first!