Soketi Basics
This episode is for members only

Sign up to access "Soketi Basics" right now.

Get started
Already a member? Sign in to continue
Playing
03. Soketi with Laravel Echo

Episodes

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

Transcript

00:00
Right now we have an endpoint which simulates a broadcasted event, whatever that is within your
00:05
app, and we've got technically a client that we can use to listen for these events. The first thing to do is set up Laravel Echo so we have a really nice convenient wrapper to listen to these events. Now let's head over to our bootstrap.js file under resources and js and if we come down to the bottom here you can see that all of this commented out code is our Laravel Echo instance
00:31
which is bound to the window object so we can listen and use this wherever we need. So the first thing that we're going to do is go ahead and just uncomment everything in here. We're going to need to add some configuration to this section much like we did with the broadcasting on the back end. So the two things that we need to install are Laravel Echo and pusher.js. Let's do that
00:52
first. So let's do an npm install on Laravel Echo and pusher.js. Once that's finished we can go ahead and rebuild our app bundle by running npm run dev and that should go ahead and pull that all together for us. Okay so now that's done we just need to configure a few things here because with Laravel Echo using the pusher broadcaster once again this is by default going to be listening to pusher
01:17
on its third-party servers so we don't want that. We want to be listening on the machine that we have Sockety running on. So if we head back over to our env file you'll notice a couple of things down here. These are prefixed with mix. Now these are what we use inside of here mix pusher app key and mix pusher app cluster. Now there's a couple of additional things that we want to include here.
01:42
We want to include the WebSocket host and the WebSocket port and the secure WebSocket port as well if we're running on HTTPS. So we're actually going to just duplicate these down just replicate exactly what's being done here and we're going to say mix pusher and let's change this over to just host and we're going to reference the previous host that we defined just here. This
02:05
is purely just so we can access these within javascript and not directly within php. So we've got mix pusher host, mix pusher port and to be honest I think that's pretty much all we need. So let's just switch that over to port and we should be good. Okay so now we can come over to bootstrap.js. We can leave the key in there if we want to. We can leave the cluster in there
02:28
if we want to. We don't necessarily need that. I'm actually going to get rid of that because it's a little bit confusing and we're going to go ahead and define out the WebSocket host much like we did over in the broadcasting config in the back end. This time though it's WS. WS stands for Web Sockets and host. So we're going to say process env and just replicate what's already here.
02:48
Mix pusher host. We're going to do the same for the WebSocket port. So let's switch that to WS and port and of course change that to port and then we want to go ahead and define out the WebSocket port for secure WebSocket. So that's going to be exactly the same. Now there's a couple of other things that we need to do here. Force TLS we're going to set to false. We're going to go
03:12
ahead and set encrypted to true and we're going to go ahead and set disable stats to true. That's really really important. If anything goes wrong with what we're doing here this is the point that the stats are going to be sent over to pusher. Of course we don't want to do that because we are not using pusher. Now lastly we just need to go ahead and set the enabled transports
03:36
which are exactly what we've defined here in an array. It's just WS and WSS. Okay so that's pretty much our Laravel Echo configuration setup. Remember we're broadcasting from here to our Sockety server and we're listening to our Sockety server from the client side. We're going to take a look at using window.echo in a second. So where are we going to use echo? Well that really depends like
04:02
I said at the start of the course on what javascript framework we're using whether that's Vue, React or anything else or just plain javascript. But what we're going to do for now is just write this over directly over on our dashboard page. So we're going to come all the way down to the bottom here. We're going to create our script tag and just play around with this and
04:25
then once you're done whatever you're using you can go ahead and integrate this into here. So because we're just using standard javascript the first thing that we're going to do is add an event listener in here. So let's do that and we're going to do that on the page load. So let's create a closure out in here and let's just console log in here. Load just so we know this is working and
04:48
just before we do anything we're actually going to go ahead and run np and run dev again just to pull in all them settings and once that's done we should be able to come over to here and just see load. So let's head over to the next episode and start to listen on this public channel so eventually when we go over to broadcast and refresh this we get something dumped out in the console.

Episode summary

In this episode, we're setting up Laravel Echo to work with our Soketi server for real-time event broadcasting in our Laravel app. We start off with a backend endpoint that broadcasts events and a client ready to listen—but we need a cleaner, more robust way to handle this on the frontend, and that's where Laravel Echo comes in.

We'll head over to the bootstrap.js file and uncomment the Laravel Echo setup code. Then, we'll install the necessary libraries (laravel-echo and pusher-js) with npm, rebuild our assets, and start customizing our Echo configuration. Since we want to use our own Soketi server instead of Pusher's hosted service, we tweak our .env to add config values for the WebSocket host and port, and then update Echo's settings to use those. We also clean up the config, making sure we aren’t unintentionally sending stats to Pusher, and define which transports (WebSockets) to use.

Finally, for the frontend demo, we inject the basic Echo connection right into our dashboard page with vanilla JavaScript, just to make sure everything works as expected. We set up a quick event listener to console log when the page loads—just a test before moving on to more complex event handling next episode. By the end of this video, you'll have Laravel Echo talking to Soketi and be ready to start handling public channel events on the frontend!

Episode discussion

No comments, yet. Be the first!