Building Reactive Realtime Applications with Livewire
This episode is for members only

Sign up to access "Building Reactive Realtime Applications with Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
06. Setting up a WebSocket server

Episodes

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

Transcript

00:00
So we're now going to start to make our app even more complex by adding in real-time updates, which, of course,
00:05
is the whole point of building this app out. And the first thing that we're going to do is get our WebSocket server set up. Now, we're going to use Sockety, because it's completely free.
00:13
We can install this on our local machine. And we can get this set up so we can broadcast and listen to events within Livewire and anywhere else on our app. So let's go over to the installation section of Sockety.
00:25
We can do this in several ways. I already have this installed, so go ahead and choose what method works best for you. And if we come over to our app here,
00:35
all we need to do once we have got Sockety installed is run Sockety start. That will go ahead and boot up a real-time server for us. We'll leave this open.
00:44
We'll open up a new tab so we can write any other commands. And we will look at how we get this working within Laravel now. So the first thing that we want to do
00:53
is set this up as a pusher replacement. So pusher is a third-party service for WebSockets. But Sockety uses the same API. So we can just go ahead and do a composer require on pusher
01:06
and pusher PHP server. So once we've got that installed, we can go over to our EMV file. We can go over to our broadcast driver and set that to pusher.
01:17
So that will almost look like we're pushing to the third-party service pusher, but we're actually not doing that. So make sure we change this over to pusher.
01:26
Then we're going to head over to our app configuration. And we're going to enable our broadcast service provider, because we need to be able to broadcast messages from our LiveWire components, or just our general back end,
01:39
and then have them visible on the front end. So push to the front end. OK, so now that we've done that, we want to go ahead and configure our client side.
01:48
So as well as our app.js file, we also have a bootstrap.js file, which already gives us the code to listen for WebSocket messages from pusher, in this case, which we are using a replacement for.
02:01
So let's go ahead and uncomment all of this code. And we're going to make some adjustments to this. We need to go ahead and install Laravel Echo. And this is on the client side, so we're
02:11
going to do an npm install on Laravel Echo. And we also need to install pusher.js as well, because this is a pusher replacement. So we need this functionality on the client side.
02:22
So once we've installed both of these, we can just start to configure this. So pretty much all of this stays the same. What we need to do is set force TLS to false.
02:31
We are going to go ahead and add in encrypted in here, and set this to true. We're going to disable stats, which is really important, because we don't want any stats trying to be sent over
02:45
to the actual pusher web service. And to be honest, that's pretty much all we need to do. Now, you can see that this is referencing some configuration from our EMV file.
02:56
And you'll find this just over here. So we could go ahead and fill this in with just some sort of dummy data, because we're just working locally.
03:03
So I'm going to set the app ID to just app ID, app key. The secret can just be app secret. Doesn't really matter. The host needs to be our local host, so just 127.0.0.1.
03:14
The port is different, because if we look at our Sockety server here, you can see it's running on 6.0.0.1. So we need to change this over to 6.0.0.1. And the scheme can be HTTP.
03:25
And the cluster doesn't matter, because we're just working locally. We are now going to create an event within our Laravel app, which we can then broadcast and then pick up on the client
03:35
side. So we'll do this now just to verify that we've got this working. We'll make a really simple example of this,
03:41
and then we'll get to actually applying this to our app. So if you've never worked with broadcasting real-time events in Laravel before, this should give you a good idea. OK, so let's go ahead and create out a simple event in here,
03:52
and we'll just create an example. So we're going to go ahead and make an event, and let's just call this example event. Let's just call this example.
04:02
OK, so let's open up our example event under App Events. And in here, we first of all need to go ahead and make sure we implement every time we have a real-time event, we need to make sure we implement
04:13
the should broadcast interface. So if we come down here, you'll see that we've got this broadcast on array, which gives us the ability to broadcast this
04:23
on specific channels. Now, what we're building out doesn't require any private channels, because it's a public timeline. So we're just going to switch this over to a new channel.
04:32
And then in here, we can just choose the channel name. Now, our channel name is always going to be posts. We're always going to be listening on a post channel, whether that's to create a new post
04:40
and push it to other people's timelines or delete a post. So we're just going to switch that over to posts. So now what we can do is somewhere within our Livewire components, listen for this
04:50
when we broadcast it. Now, how do we broadcast something? Well, we can do this directly from Tynker, since we don't really want to write this in our code.
04:58
So to do this, we use the broadcast helper. Then we new up the events, that's App Events and Example. And then we pass any data into this if we need to. And then we just broadcast that either to others,
05:15
which we are going to be doing, because we don't want to broadcast it to ourselves, or we can just broadcast it in general. So we can just new this up and then broadcast it.
05:22
So that has been broadcast now. Now, we don't see anything just inside of here, but we can verify that this is actually being broadcast over on our client side.
05:32
So let's just pick one of our components. It doesn't really matter. We'll just use post index. And let's just do this at the top here,
05:38
just so we can remember to delete it. So I'm going to create out a method in here just called Example Broadcast. And we want this to be called when
05:50
we get that broadcast event. So let's go ahead and in here, say on. So we use the same kind of event handlers within LiveWire that we're used to.
05:58
But this time, we specify that we want this to come from Laravel Echo, which we have now enabled in our bootstrap file. So to do this, we say echo to specify
06:06
that we want to listen to our WebSocket server. And then we give the channel name, which we've called post. And then we give the name of the event.
06:14
And our event was just called Example. So now what should happen, if we just die dump on works, what should happen is over in our app now, this component is listening on our WebSocket server.
06:26
So when we broadcast this here from the back end, we should get that die dump up here. Now, WebSockets are tricky. This might not work, so we might need to do some refactoring.
06:34
So let's broadcast this, head over to our app, and it works perfectly. So now, anywhere in our LiveWire components, we can broadcast any events that we've created,
06:44
like post created, post deleted, post edited. And then we can just listen for them in our LiveWire components and adjust our data. So our WebSocket server is set up.
06:55
We can broadcast these example events. Let's just go ahead and get rid of this from here, because we don't need that in there. We know it's working, and we can move on.

Episode summary

In this episode, we dive into setting up real-time updates in our app by adding a WebSocket server. The goal is to get live data flowing seamlessly between the backend and frontend—no page refreshes needed!

We're using Sockety for our local WebSocket server because it's free and easy to get running. The process starts by installing and launching Sockety on your machine. Then, we tweak our Laravel app to use Sockety as a drop-in replacement for Pusher (a familiar third-party service for broadcasting events). This just involves installing Pusher's PHP packages and updating your .env broadcast driver, but don't worry—we're not actually connecting to any paid service.

Once the backend is set, we move on to the frontend. We configure our JavaScript to listen for events using Laravel Echo along with the pusher-js library, making a few quick changes in the config. Then, with those basics out of the way, we create a test broadcast event in Laravel, fire it off, and listen for it on the frontend to prove everything works.

By the end of the episode, you'll see how you can easily broadcast events like "post created" or "post deleted" from your PHP code, and have them instantly received in your Livewire frontend components. With this setup, your app is now ready for all kinds of real-time features!

Episode discussion

No comments, yet. Be the first!