The first step to using Laravel Reverb to send real-time data to the browser is to create a Laravel event. We can create a new event by running phpArtisan makeEvent. And then since this is our very first event, I'm just going to name it HelloWorld. Let's open up the event file now and see what we are working with.
Here we have a new class called HelloWorld. It uses several different traits. Right now, it has an empty constructor, and we have a broadcastOn method that returns an array of channels that the event should broadcast on. Now, in order to expose data via our event, we need to add public properties to it.
So I'll create a new public property here called message. Of course, there can be as many of these public properties as we'd like, or even none at all. Events don't have to send data. Oftentimes, though, they do.
Now, the values of this data could also be dynamic, passed in via the constructor. However, for now, I'm just going to add a static value for our message, just to make things a little bit easier. By default, events aren't broadcast to the browser. In fact, events aren't a broadcasting or real-time data-specific concept.
You can trigger these Laravel events and listen for them solely on the server side if you wanted to, and there's many good use cases for that. However, if we want this particular Hello World event to be sent via WebSockets to the user's browser, then we should make it implement Should Broadcast. This has already been imported for us at the top of the file, as it's an extremely common interface to implement for your events. Down here inside of Broadcast On, let's change out New Private Channel to just be New Channel.
This means that we want to broadcast to all of our users publicly and not privately just to specific users. I'll also change the channel name to something custom here. What about Hello World? You'll get a little bit better idea about what you should name your channels in a few minutes when we start looking at a more realistic example.
With the event all set up now, all that's left to do is to trigger it. This of course needs to happen on the server side. but that is listened to on the client. That means we need to find somewhere server side in our application to trigger the event.
php. And how about we trigger the event anytime somebody visits the homepage. So here I'll say, hello world. I'll hit enter in order to automatically import this event here.
You'll notice that it was added to the top. And then what we want to do is to dispatch this event. Now that we're dispatching the event, we need to actually subscribe to our channel on the front end and then listen for that event to be emitted in that channel. js file for our project.
And then in here at the very bottom, let's use echo, which remember was registered on the window. to subscribe to that Hello World channel. Then on the Hello World channel, we'll listen for the event called Hello World. Finally, I'll provide a callback function which receives the event itself, which is the data passed down from the server.
Let's just console log that. Now we're pretty much ready to go. Let's start up all the processes that we need to start up and then go visit things in the browser. So inside of my terminal, I'm going to start up the actual Laravel development server.
We can do that with phpartisan serve. We also need to start up the real-time data server, that is the reverb server. We can do that with phpartisan reverb start. js file, we need to make sure that we're listening for changes in our JavaScript so that it gets recompiled whenever a change is made.
So I'll add yet one more terminal here and run npm run dev. Now in my browser I've got the home page opened up twice in two different windows. That way I can inspect the console of one window here. Remember we're listening for that event to be broadcast and we're console logging the data when it does.
And then over in the other tab when I refresh the page we should see the console log happen in the first tab. Let's give it a try. Oh. Okay, that's not so great.
There is no console log. Well, there is a very good reason for this, and I'm going to show you what it is in the next lesson.