Join Alex Banks for an in-depth discussion in this video Incorporating Socket IO, part of Building a Polling App with Socket IO and React.js.
- It is now time to incorporate socket.io. socket.io is going to be the tool that we use to send data back and forth between the client and the server. socket.io uses web sockets, which allow for a true two-way connection between a client and a server. The first thing that we need to do is install socket.io, and we need the socket.io library that will run on the server as well as the socket.io library that will run on the client. So we're going to install two modules at the same time with npm install. We'll send the --save flag so both of them get saved to the package JSON.
The first module is socket.io. This is the socket.io that we will use on the server with express. The socket.io-client we will use inside of our APP component on the client. So we will let both of those install. And once socket.io is installed we can begin using it. Let's go over to Sublime. And we're going to start by incorporating socket.io on the server so I'm going to open up the app-server.js file. In the app-server.js file on line eight we tell our express app to listen on port 3000.
What we need to do is on line eight we need to add a variable for server. And we will set the server to the HTTP server that gets returned from the app.listen call. Now that we have a server variable we can incorporate socket.io with the server that's running on port 3000. I am going to go ahead and create a variable for io, and I will require our socket.io. And once we require the socket.io I'm going to go ahead and chain a listen function on here, and we will inject the server into the listen function.
Now we've created a socket server that is also listening on localhost port 3000. The next thing that we need to add is an event handler for when a socket connects. I will hit enter a couple of times, and here on line 11 I'm going to add io.sockets.on, and we will add an event listener for a connection. A connection event occurs when a socket gets connected. And it will be handled with this callback function here. This callback function that gets invoked when there is a new socket connection gets that socket injected as an argument.
So what we want to do is when a new socket connection happens we want to log the id of the connected socket. So I will console.log, connected, %s. And we will go ahead and add the socket.id to this console.log. Now when new sockets are connected we're going to go ahead and log their id on the console. Let's go ahead and also incorporate socket.io on the client.
Let's open up the components. Let's select the APP.js component. The APP component is our main component and when the browser starts, this component gets mounted. When our APP component is mounted is when we want to add the socket.io client. The first thing we need to do is include the socket.io client. Here on line two I'm going to create a variable for io, and I'm going to require our socket.io-client framework. And the next thing that I need to do is when this component mounts we want to setup a socket.
I'm going to drop my cursor here at the end of line four and hit enter a couple of times, and on line six I'm going to add the componentWillMount lifecycle function. Now when the component mounts I'm going to add a socket to this component. this refers to the instance of our APP component. And I'm going to go ahead and add a socket to this using the socket.io client. So our io is a function, and it wants to take in the socket server that we should connect to. That's http://localhost, port 3000.
The next thing that we want to do is we are going to add a listener to this socket for the connect event. So this.socket.on will wire up an event handler for our connect event. So the event handler is going to be the second argument and we will code a function in the app component called connect. When we connect to the socket we are going to handle it with the connect function found in this APP component. I'm going to come down here to line nine, hit enter a couple of times and code our connect function.
Now when we connect to this socket what I'm going to do is alert to the user that they are connected. I will go ahead and send an alert. Connected. And we can go ahead and show this.socket.id. Now we've also included the socket.io client. Let's go out to the terminal so I can start our app with npm start. That will use webpack to package our components and it will start our server listening on port 3000.
Now when I go ahead and open up the Chrome browser window I can navigate to localhost:3000. And when I hit localhost:3000 we see connected and the socket id. Also notice in the terminal we have the same socket id connected. I can do this in several browser windows. If I open up another browser tab and then paste in localhost:3000 we connect our second socket, and the id of this socket is also being displayed here in the console.
Now we've included socket.io on both the server and the client, which means that we're ready to send data back and forth between the client and the server in our application.
- Setting up the environment
- Connecting sockets
- Handling disconnects
- Setting up the React.js router
- Passing state to child components as properties
- Joining the presentation
- Starting and running the presentation
- Asking and answering questions
- Graphing results
- Upgrading to ES6