broadcast it to all of the clients. So use Socket.io to emit to all clients. Okay, let's get started. Now in the next video, in fact, I'm going to show you a very elegant system for using Laravel's events to automatically broadcast using Redis. But until then, let's just do it directly with Redis. So I can say Redis, and I want to publish an event on a given channel. We'll call this TestChannel, and then we only need to encode the data that should be passed along with the event. So in this case, for example, we could say data equals, and the event type will be, how

along with the event. So in this case, for example, we could say $data equals, and the event type will be, how about UserSignedUp, and then the $data itself would just be an array of anything relevant. So in this case, for example, I'll just say $username is John Doe. In real life, that could be a User object or whatever. All right, so we are going to publish a new message to our TestChannel, and the $data will consist of this. We have an event name. This corresponds to the thing that took place, and then the $data, or the payload, or however you want to refer to it, will represent all of the necessary data for that event.

This corresponds to the thing that took place, and then the data, or the payload, or however you want to refer to it, will represent all of the necessary data for that event. All right, so we've taken care of step one. Step two is Node.js plus a Node Redis client subscribes to this event. All right, so in my project root, I will create Socket.js, and we already reviewed a lot of this in the first video. Let's set up our server, and I can say require the HTTP module and get our server. Next, we need Socket.io, which we will need to install with NPM. Next, we know we want a Redis client, and there's actually a lot of Redis clients for Node.js.

Next, we know we want a Redis client, and there's actually a lot of Redis clients for Node.js. We will use one called Ioredis, which is very fast. Next, well this will return the equivalent of a class, so we will create another Redis and instantiate that into an object. Okay, so now if I switch back, we published a message to the TestChannel channel. So now let's subscribe to that channel, and I always think of it as an old-fashioned TV where you turn the channel, and you just want to subscribe to anything that comes through on that station. So I can say Redis.subscribe to our TestChannel channel.

on that station. So I can say Redis.subscribe to our TestChannel channel. Next, I want to say whenever a message comes through this channel, so Redis, when you get any kind of message, well, that will accept the channel as well as the message itself. So let's do this. console.log and say message received, and then we will do one more and spit out the message itself so that you can review it. Finally, we just need to boot up our server. So listen on port 3000. Okay, so I hope this makes sense.

So now let's pull in our dependencies and run this server. We are pulling in socket.io as well as the IORedis client. npm install socket.io and IORedis. And now also don't forget, in the last episode, if you didn't watch it, we also pulled in that predis composer package, which gave us our php specific client. Anyways, if we switch back, that's done. So let me go into my VM and browse to our code, Redis lesson, and boot up our server. node socket.js. And also don't forget, there is a Redis server, and that's just running in the background as a daemon.

And also don't forget, there is a Redis server, and that's just running in the background as a daemon. So we don't have to explicitly boot up that. But now in this case, we're getting some kind of error, and that's probably because port 3000 is already taken. Maybe we're running this somewhere else. Let's debug this. Let's check out our process status. Really you don't need to worry about this too much. I'm just checking to see if anything's running, and I'm searching for node.

and we're saying when anything comes through, I just want to log something to the console. So let's try this out. Give it a refresh. And if I come back, sure enough, we got a message received. So notice, with Laravel, we published an event using Redis, and then with node, we listened for that event and received the data. So this means if we just want to grab the parsed data itself, then you could always do something like this. You could say message equals JSON.parse, because remember, when it comes through, it's encoded. So now I could say console.log message.data.username.

You could say message equals JSON.parse, because remember, when it comes through, it's encoded. So now I could say console.log message.data.username. And if we boot this up one more time, we should see John Doe when I hit this. Come back, and there we go. We've passed the data. So let's see, what is our next step? We've taken care of step one, publish an event with Redis using php and Laravel. Step two was to set up a Redis client with Node.js and subscribe to that channel. Done. And step three is to then use socket.io to emit to all clients.

Done. And step three is to then use socket.io to emit to all clients. Okay, so a message has come in. I'm now going to say io.emit a new event. Now the convention we will use here, remember channel in our case, if we switch back, is test channel. So we will fire an event called test channel:, and then the name of the event. Now in our case, we called it user signed up. So we're going to fire something like that. Let's set that up.

So we're going to fire something like that. Let's set that up. channel plus a colon plus message.event. And again, message.event is this, and then this. All right, finally, we want to pass through some data as part of that, of course. So I will pass through the data for that message. So that should take care of this side. Now we need the client version of the socket.io library. And we, again, reviewed that a couple of videos ago. So I'm going to return that default welcome page.

And we, again, reviewed that a couple of videos ago. So I'm going to return that default welcome page. That's fine. We'll make that work. And if we visit it, I can get rid of all of the default styling here and the same here. Now once again, if I switch to Chrome, let's pull in Vue.js since it's so good. Script source and paste that in. And then also let's grab socket.io from a CDN as well. All right, one more. So finally here, let's create a new Vue instance.

All right, one more. So finally here, let's create a new Vue instance. Vue will bind it, so new Vue. And I'm just going to bind it directly to the body. But in real life, you'd have some kind of dedicated section. And let's see. What are we going to do here? We don't really have anything to demonstrate. So we're just going to spit out new users who have signed up. Very, very simple.

So we're just going to spit out new User who have signed up. Very, very simple. So let's say new users. And then I'll say ul, and we'll say v-for. Actually in Vue.js 1.0, you would end up using Vue 4. But I'm not to that point just yet. So we will sift through all of our users and spit out the user. I'm using this @ symbol here because without it, well, remember, this is a Blade file. So Laravel will try to parse that. If we add the @ symbol before it, it's a way to tell Laravel, leave this alone.

So Laravel will try to parse that. If we add the at symbol before it, it's a way to tell Laravel, leave this alone. I know what I'm doing. So let's set this up. Users will default to an array. And then we'll say when we're all set to go, our document.readyOfSorts, let's start listening on the socket. So we'll say var socket, set this up. And then we can say socket.on. And now we have to remember the convention that we used here.

And then we can say socket.on. And now we have to remember the convention that we used here. So don't forget, we're going to listen for the channel name, testChannel, colon, and the event we want to listen for, userSignedUp. That's what we want here. All right, so let's paste this in. And when we pick up on something, we'll accept the user data. And we'll just say this.users.push data.username. And I am going to make sure that I bind this anonymous function here to the current object. If we didn't have this, don't forget with JavaScript, this would no longer refer to

And I am going to make sure that I bind this anonymous function here to the current object. If we didn't have this, don't forget with JavaScript, this would no longer refer to our VM. Anyways, let's bring that back. And yeah, I think we're about all set to go. So we'll try this one more time. Back to Chrome. Let's visit our redis.lesson page. However, check this out. If we view the console, we'll notice, again, if I do a 404, it's trying to connect.

However, check this out. If we view the console, we'll notice, again, if I do a 404, it's trying to connect. So it's trying to create that socket, but it's getting a 404. So what's happening here? Well, we need to make sure if I switch back to Sublime that we reference the proper address. So don't forget, in our case, because we're using Laravel Homestead, that would be by default 192.168.10.10. It'll always be that. And specifically, our Node server is running on port 3000. Don't forget, we set that right here.

I know it's very primitive, but we are successfully firing or publishing to a channel from our Laravel end, and then from a Node.js server, we are listening for that, and then we are then using socket.io to fire it off to all clients. So we will dig in further, but to finish up this video, at least, let's do one final run through of exactly what took place, just to drill this in. In our routes/web.php file, we set up a data array where we just store what the event was as well as a payload, and then we publish that using Redis. Yeah, don't forget, in the next video, I'm going to show you a slightly more elegant and Laravel-specific way to broadcast our events. In this case, we're just representing the event as a string and doing it manually, and

and Laravel-specific way to broadcast our events. In this case, we're just representing the event as a string and doing it manually, and that's fine for now. Next, we have a Node.js server running, and don't forget, we fire that up using node socket.js. Now here, we pull in socket.io, and we also pull in a Redis-specific client for Node.js, and then we say, I want to listen on this specific channel. So turn to that channel, and then when any message comes through that channel, I'm going to fetch the message, decode it, and then use socket.io to emit that to all clients and pass through the data. Finally, if we go to our client and into our view, we have this view instance that loads,

and pass through the data. Finally, if we go to our client and into our view, we have this view instance that loads, and instantly, when that page loads, we start listening for an event to come through. Whenever a user-signed-up event comes through on this specific channel, I'm going to update this users array, and because we're using Vue.js and we have two-way binding, this will instantly repopulate. Okay, so I know there's a lot of moving parts here, especially if you're not overly comfortable with Node.js and socket.io and Redis and all of this hipster stuff. So play around with this, and when you feel pretty comfortable with it, in the next video, we'll switch over to Laravel's event broadcasting.