Multiple Drag And Drop File Uploading and Processing with Inertia
This episode is for members only

Sign up to access "Multiple Drag And Drop File Uploading and Processing with Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
13. Setting up WebSockets

Episodes

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

Transcript

00:00
Okay, so in this section of the course, we're going to talk about how we can do stuff in the backend.
00:04
In our example, we're going to look at encoding a video, but this could be absolutely anything. And more importantly, showing this progress on the client. Now to do this, there's a couple of ways that we can achieve this. The first way would be to pull the backend, so constantly make requests to backend
00:21
to find this information out about the status of a job like processing a video. But that's not very efficient. What we want to do is push a job into the queue, but then broadcast this to the client using a WebSocket server.
00:34
So in this episode, we're going to set up a WebSocket server, make sure that we're receiving things on the front end, and then we'll implement the ability to encode videos in the backend and relay the progress to the client.
00:45
So for the WebSocket server, we're going to use Sockety. You can use absolutely anything, regardless of how you set this up, it's going to work with anything that Laravel supports. And for this, we're going to use the pusher implementation,
00:57
which is a third party service, but we're going to use Sockety locally, which is free to use. So if you don't have Sockety installed, you're going to want to make sure you go ahead and install that, check the documentation out,
01:09
and there will be instructions for your operating system. And we're going to go ahead and run Sockety start. As long as you can do that, and you've got your WebSocket server up and running, you're good to follow the rest of the steps here.
01:20
So I'm going to go ahead and just move these over. So we've got a little bit more room to do stuff over here. And that is our WebSocket server up and running. OK, so the next thing that we need to do is use the pusher channel within Sockety.
01:32
So this will work like pusher, but Sockety will pick these events up as normal. So the first thing that we need to do is install the pusher PHP server. Now, while that's installing, before I forget, we're going to come over to config and app,
01:45
and we're going to head down to the broadcasting service provider under our application service providers, which by default is commented out. And we need that, so we're going to go ahead and uncomment it. OK, so now that we've done that, we need to configure Sockety
02:00
so that when we broadcast something, an event on the back end, it actually gets sent through properly to our Sockety server. So if we just take a look at our EMV file here, you can see that just down the bottom, we've got all this pusher stuff in here.
02:15
Now, like I said, Sockety is going to use pusher, and it works with the same API. So we're just going to fill this stuff in to work with Sockety. Now, the pusher app ID doesn't matter as much, so I'm going to go ahead and add in app ID.
02:28
The key doesn't matter much because we're working locally, and nor does the secret. So we're going to add in each of these things as just random values. Now, the host is local. We're not going to any third-party service on another server.
02:41
We're just doing this locally. And the port is also changed to 6001 as well. And we're working locally. We're going to change the scheme to HTTP.
02:51
And we can kind of ignore the cluster here as well. So that is basically Sockety configured on the back end. There's always issues when we implement real time, because there are a few things that we need to kind of match up.
03:02
But we'll fix that up at the end if we have any issues. OK, so next is the client-side stuff. So now when we create an event within Laravel and we broadcast this, it should be sent through to our Sockety server.
03:15
But we need a way to pick these up on the client side. Now, to do that, we use Laravel echo, which will allow us to pick up these real-time events within JavaScript and do something with the data.
03:25
So we're going to head over to our app.js file. And if we look in here, we've got this bootstrap file, which is pulled in. If we come down here, we've got this echo section, which is already included for you.
03:36
You just need to install the dependencies and uncomment all of this stuff. So I'm going to go ahead and uncomment everything in here. Looks a lot, but we'll go through this line by line. And we're going to install the Laravel echo package and the pusher.js package.
03:50
Remember, because we're using pusher's API, but not their service, this is going to work like normal. So we're going to do an npm install on Laravel echo and also pusher.js as well. So while they're installing, let's look at configuring this on our client side,
04:06
because remember, this is going to very slightly change. So the app key, the cluster, and the host all come from our env files, which are passed through to our front end, which is gray. The port is also passed through to our front end as well.
04:21
And so is the scheme. But we need a couple of changes in here. The first thing that we need to do is set force TLS to false. And we need to disable stats as well.
04:31
So disable stats. And we're going to set that to true. Now, the reason that we disable stats is because if any of the logging stuff gets sent over to pusher's servers, that doesn't really matter.
04:43
There's no point in pushing that over. So we're going to disable the stats. In here, nothing gets sent to the pusher third-party service. OK, so I'm going to leave it at that.
04:52
We're going to try and broadcast an event and see how this goes. Often, there's something that's misconfigured, and it doesn't quite work. But we'll work through it together. OK, so to broadcast an event within Laravel, we go ahead and make out an event.
05:05
So I'm just going to call this test event or test. Let's just call that test. OK, so we're going to go ahead and open up that test event. And the first thing that we want to do inside of here is make
05:16
sure we implement should broadcast. So we're going to go ahead and say implement should broadcast. Now, what we're also going to do later on is look at pushing things to our queue. So one of the things that we are going to be using is should broadcast now,
05:30
because we don't want to push an event being broadcast to our client side to our queue. We want this to be done immediately. So just let's implement that now. So we know that that's there, and we can reference it later.
05:42
OK, so let's just take a look inside of here. We've got broadcast on. Let's just broadcast to a public channel for now. And the channel is what we listen on.
05:51
So for example, if you were building a chat service, you would have a chat channel. For us, I'm just going to create out a videos channel. But really crucially, later on, we're going to have this broadcast privately, because the events that we're passing down need to be private for that particular user
06:07
in case each of the videos contains any sensitive information. So we'll get to that later. But for now, we'll just create out a private channel called videos. OK, so for now, I think that's it.
06:17
We don't need to include any data in this broadcast. We just want to make sure that we can pick it up on the client side. So how do we do that? Well, let's go back over to our Bootstrap.js file.
06:26
And you can see that when we import Echo, we actually set this on the window object just here. So window.echo. That means that we can just access that directly over in our dashboard. We could technically do this anywhere.
06:38
So for example, if you had some sort of state management here for our upload, which we don't really need at the moment, you could do this in a separate file and then adjust your state accordingly. So let's do this just right at the top here.
06:52
So to do this, we're going to say Echo and then channel. And then we're going to choose the channel. So in this case, what do we call that? Let's just have a look, videos.
07:01
And we are going to chain onto this listening for a particular event. Now, the event we're listening to we've just created is test. And then once that event comes through from Sockety from our back end and then is pushed to the WebSocket on the client,
07:16
we should just be able to console log the event out. Now, we don't have any data in there, but hopefully this works. Now, one thing that we do want to make sure we do is only set all this stuff up when this is mounted.
07:27
So we're going to go ahead and wrap this in the mounted lifecycle hook within view. So I'm going to grab this and just pop that in there. And that's pretty much all we need to do. OK, so the first key to making sure that this works is heading over to our network tab.
07:42
I'm actually going to pull this down now. And I'm going to get rid of our throttling. The first thing we need to work out is whether this is actually connecting up properly. So let's go over to our page, give this a refresh.
07:55
I'm going to get rid of the console here. And why don't we go and filter this by WebSocket. So that looks like it's connecting. We've got a status of 101 switching protocols,
08:06
which means we are successfully connected to our WebSocket server. Now, we just want to fire that event and see if it's picked up on the client side. OK, so to test this, let's go ahead and run phparts and tinker. We're going to use the event helper.
08:20
And then we're just going to pass the path to that event and new it up. So let's new up an app, event, and test. And let's run this and see what happens. OK, so events and OK.
08:34
So because we're connected successfully, we should see that console logged out now. And we don't. I have a feeling that what we forgot to do was change over the broadcast driver inside of EMV. So there's always something.
08:46
Let's change that to pusher. Because remember, we're using pusher, but using Soxy to pick up on these events. OK, let's try that one more time. So I'm just going to go ahead and exit out of here.
08:55
Come back into tinker and let's rerun that. Let's come over. And there we go. That is our event.
09:01
There's no data in there. But we now have broadcasting with sockety set up within Laravel, which is great. So now that we've got this set up, we can look at doing some cool stuff like encoding the videos once they've been uploaded and then pushing this progress to the client side.

Episode summary

In this episode, we're diving into real-time communication using WebSockets with Laravel. The idea is to show progress from backend jobs (like video encoding) directly to the client as it's happening, without making the user keep refreshing or polling for updates.

First, we talk about the classic polling approach (where you keep asking the backend for updates), why it's not efficient, and instead, how real-time broadcasting using WebSockets is so much better for these cases.

To get this up and running locally, we use Socket.io (specifically the local service called Sockety) and configure Laravel to broadcast events using the Pusher protocol, which Sockety understands. Even though Pusher is a third-party service, using its API locally with Sockety is completely free and works exactly the same way.

We walk through installing and running Sockety, installing the necessary Laravel broadcasting packages, and configuring both the backend (via .env and config files) and the frontend JavaScript so they both know how to connect to the Sockety server. On the frontend, we set up Laravel Echo and pusher.js so we can catch broadcasted events and act on them in real time – for example, by updating progress on a video upload.

Finally, we create a test event in Laravel, broadcast it, and confirm in the browser console that everything's wired up. We go through some common snags (like missing the correct BROADCAST_DRIVER) and show how to fix them on the fly. With all this in place, we're ready to do some cool real-time stuff, like pushing live job progress updates to users – no manual refresh required!

Episode discussion

No comments, yet. Be the first!