Here at Laracast, we've already learned about a tool called Pusher, which facilitates the process of sending messages from your server to your client and vice versa. However, if we wanted to, we could also whip this up on our own using something like Socket.io. And that's what we're going to figure out in this series. We'll figure out what it is, how we can use it, how we can hook it up with Laravel, and then how we can use Laravel's broadcasting features to fire an event and automatically have it responded to on our clients. So throughout this series, we will leverage Laravel, Redis, and Socket.io. Let's get started. Now, before we touch Laravel, I think it's important that we figure out the basics of Socket.io.

Let's get started. Now, before we touch Laravel, I think it's important that we figure out the basics of Socket.io. So what we're going to do in this video, you know what, they had this chat application that they show you how to build, and I think that's about a perfect example for how to use this tool. So we're going to work through this together in this video. And then once you feel comfortable, we'll switch over to the Laravel and Redis side of things. All right, so I will switch over to Sublime. I have a brand new project here. And this will assume that you have Node installed.

I have a brand new project here. And this will assume that you have Node installed. I won't cover that process in this video, but it's very easy. You can go to the nodejs.org website, hit download, and you're good to go. Anyways, I have my package.json file here. And why don't we go ahead and pull in a few things. For example, we're not using PHP or Laravel in this video. So why don't we just pull in the Express framework, which is very popular in the Node community. So let's do that. npm install. And I will save this to my dependencies list, and it's called Express.

So let's do that. npm install. And I will save this to my dependencies list, and it's called Express. Great, we have that. So now we could whip up an index.js file, our entry point, and we will create app and require Express, which we just pulled in, and trigger it. Next, of course, we need our server. So we can pull in HTTP, pull in that module, and then pass in our Express application there. And now let's just listen on a port. For example, server.listen on port 3000, and set up a route. app, when we make a GET request to the home page, all we're going to do here is send a new response.

But this is fine. So let's open up Chrome. And if I visit localhost:3000, sure enough, we see hello world. Now, let's come back and tweak this and send an HTML file instead. This time, we will send a file as a response. And I'm just going to reference the current directory and look at index.html. Okay, so let's set that up. And now within an H1, we'll say hello world. So let's reboot this. And if I come back to Chrome, there you go.

So let's reboot this. And if I come back to Chrome, there you go. We're now referencing a full HTML file. So if we switch back and go to our main entry point, let's next pull in socket.io. And of course, we have to pull that in through NPM. Now, to integrate this, we'll need two different components. We need the actual server that's running socket.io. And then we also need the client-side library. Now, for the client-side, let's just look for socket.io. And there we go.

Now, for the client-side, let's just look for socket.io. And there we go. Let's grab that. And I'm just going to paste it right down here at the bottom of the page. Next, let's pull in the server aspect. So npm install socket.io. Great, so we have both components. Now, if we come back, let's pull that in. So var io, and we will require socket.io. And pull that in and pass our server to it.

we need to make an announcement of sorts. So let's do this. We'll set up a form here. And then we'll have a simple input with an ID of chat. And then finally, a button called send. Now, what we want to do here is say, when the user types something in here and clicks the send button, then we want to emit an event. Now, we could do this with vanilla JavaScript. We could pull in jQuery.

Now, we could do this with vanilla JavaScript. We could pull in jQuery. Or because we cover Vue.js here a lot, why don't we pull that one in? But don't worry if you're not familiar with it. You really don't need to know anything about it. So back to CDN.js. Let's look for Vue and copy that. And once again, come back to Sublime and paste it in here. Okay, so now, check it out. I can set up a new Vue instance, and we will bind it to,

Okay, so now, check it out. I can set up a new Vue instance, and we will bind it to, let's just use the body, and we'll call that chat. And remove this. And we'll say the element to bind to is called chat. And now I can say up here, when the user submits this form, I want to trigger a send method. So we have that. And send, that will accept the event, which we will prevent. And then finally, well, let's just alert and

And send, that will accept the event, which we will prevent. And then finally, well, let's just alert and say send to make sure everything is working. So does this make sense? We aren't using socket.io just yet beyond creating the connection. But then we pulled in the excellent Vue library just for some structure. And we created a new instance and bound it to basically the entire body. And then we said, when the user submits this form, I want to trigger a method called send. And within here, we just send an alert and prevent the default action.

I want to trigger a method called send. And within here, we just send an alert and prevent the default action. So if I come back to Chrome and we fill this out, send, sure enough, we get an alert. So now, we just need to emit an event. And the way this will work is, we will emit an event to the server. And then the server will broadcast that message to everyone who is currently connected. So check it out. We have our socket variable.

So check it out. We have our socket variable. We can just say socket.emit. Think of that as fire. Just fire this event called chat or message or chat.message, whatever convention you want. And we will send through whatever they typed in. So why don't we bind this value to message? And then we'll set up our data here and initialize that to an empty string. Okay, so now, if I wanna grab the value of that input,

And then we'll set up our data here and initialize that to an empty string. Okay, so now, if I wanna grab the value of that input, I just have to reference our message variable here. Because real quick, there's two-way binding with Vue. So whatever you type here is bound in our data object and vice versa. All right, so we fill something in, we hit that button, and we emit this key, chat.message, to our server. But now, we're not yet listening for that. We're listening for a new connection, but that's it. Let's revise this and listen for that identifier.

We're listening for a new connection, but that's it. Let's revise this and listen for that identifier. Socket.on chat.message. This will accept the message. And now, for the time being, all we will do is log a new message to the console. Like so. So let's give this a try. We boot up our server. We visit Chrome. We type in a message here.

And it just didn't require that much work at all. So now, let's take it a step further. Rather than logging this to the console, we will accept this message from a random user using our chat app. And we will emit it to everyone currently chatting. So now, if we listen to that on the client, for example, within the ready method, think of this as jquery.ready. Well, we could say, I want to listen for when we have a new chat message that will accept the message that we sent from the server. And all I want to do is basically update a ul that contains our chat.

that will accept the message that we sent from the server. And all I want to do is basically update a ul that contains our chat. So let's do that. And all I want to do is basically update a ul that contains our chat. For example, right up here, maybe we will have an unordered list called messages. And then within a list item, we'll say, using vue, I want to repeat through all of my messages and refer to each one as message, and then just echo out that message. All right, so let's come down, initialize this to an empty array. And now, when we have a new message, we will just push to the array.

All right, so let's come down, initialize this to an empty array. And now, when we have a new message, we will just push to the array. This.messages.push our message. So check this out. Let's restart. Go back to Chrome, type in a message, and notice we instantly see it. How are you? Now, a quick side note, when we type something in, we should probably empty out the text box. That's pretty easy, especially if we're using Vue.

we should probably empty out the text box. That's pretty easy, especially if we're using view. When we hit the send method, let's finally say this message equals an empty string. Okay, so now, a new message, and we clear it out. But now, take note of how really cool this is. If I open up a new tab, and I put these side by side, and let's restart here. Notice, as I type, it instantly updates in both areas. Pretty awesome, right? Very cool stuff. And really, if you think about it, it just didn't require that many lines of code at all.

Very cool stuff. And really, if you think about it, it just didn't require that many lines of code at all. So let's do a quick review of what happened here. We have our index.js page, where we set up a new server and listen on port 3000. We also pulled in socket.io. Okay, next, we set up a route for the homepage, where we just load this index.html file. However, we also set up our io instance here, and we listened for when we had a new connection. Remember, when this connection event is fired, that means there has been a hook or a connection between the server version of socket.io

Now, back in our HTML file, all of our listeners have this event binding set up. So they're listening for that, and when they receive a new chat.message event, they update this message's array, and because we have two-way binding with Vue.js, well, this will instantly repopulate. So your key things to pay attention to here is socket.on to listen for an event being fired from your server, and notice how that is the same right here. We can use the same API in both locations, because on both sides, you're listening. On the server, you want to listen for something,

Pretty cool stuff. And you could even do cool stuff where you listen for when a User basically closes out the application, and you can update folks. So for example, you could say, so listen for when we disconnect, and in that case, we will send everyone a message here. For example, let's emit a new chat message where we say, User has disconnected. Okay, let's reboot and see if that works. Refresh, refresh. Hi. Spelled incorrectly.