As you might have noticed in the last section, I accidentally used ES6 arrow functions inside our client-side JavaScript code. As I mentioned, we want to avoid this; the project is going to work correctly in Chrome, but if you tried to load it up on your mobile phone, Internet Explorer, Safari, or some versions of Firefox, the program would crash. So, instead of using arrow functions, we'll use regular functions by removing the arrow and adding the function keyword before our arguments. I'll do this for the on('connect' listener and for the on('disconnect' listener, adding the function keyword and removing the arrow:

socket.on('connect', function () {
  console.log('Connected to server');
});

socket.on('disconnect', function () {
  console.log('Disconnected from server');
});

I'll also take our JavaScript and move it into a separate file. Instead of editing the client-side JavaScript right inside our HTML file, we'll have a separate file where that code lives. This is a better method to get things done.

In the public folder, we can make a new folder for this JavaScript file. I'll make one called js (we'll have multiple JavaScript files by the time this app is over, so it's a good idea to create a folder to house all of those). For now, though, we just need one, index.js. The index.js file will load when we load index.html, and it will contain all the JavaScript required to get this page to work, starting with the JavaScript we wrote in the last section. Cut out all of the code in the script tag and paste it into index.js:

var socket = io();

socket.on('connect', function () {
  console.log('Connected to server');
});

socket.on('disconnect', function () {
  console.log('Disconnected from server');
});

We can save the file and update our script tag. Instead of having the code in line, we'll load it in by providing the src attribute, with the path to the file as /js/index.js:

  <script src="/socket.io/socket.io.js"></script>
  <script src="/js/index.js"></script>
</body>

Now that we have this in place, we have the exact same functionality that we had before—only this time around, the JavaScript has been broken out into its own file. Start up the server using nodemon server/server.js. Once it's up, we can go ahead and load the app by going to the browser and opening up localhost:3000. I'll open up Developer tools as well, so we can make sure everything is working as expected. Inside the console, we see Connected to server is still printing:

This is code that exists in index.js, and the very fact that it's showing up here proves that the file was loaded. With this in place, we can now move on to our custom events.

Now, we have two events that we talked about for our example email application: we have newEmail, which is from the server to the client; and we have createEmail, which is an event emitted by the client and listened to by the server. We're going to get started with newEmail, and to kick things off, we're going to head into our client-side JavaScript and listen for that event.

When that event fires, we want to do something: we want to take the data and use jQuery, React, or some other frontend framework to render it to the browser so the user can see the email as soon as it comes in.