GreyHope Projects Demos Tutorials

Chat App

Back Download Next

1. Setting Up

In this tutorial, we will create a simple online chat application. The same skills can be used to create multiplayer games and dynamic websites.

Every website on the World Wide Web needs a computer to store it. The computer is called a server. For example, this website is hosted on GitHub. This means that whenever you want to visit this website, a GitHub server is providing your computer with the data for this website.

When building a static website, you upload the code to a server that only has to provide users with the website data. In this tutorial, we will build a dynamic website where we write our own code for the server. The server does a lot more work because it is constantly receiving and sending data between users.

Our application will have two main parts. One part will be for the server and the other part will be for the clients. We can write the client part in normal HTML but for the server, we need to use a new tool called Node.js.

Node.js was specifically designed for building online applications in JavaScript. It is a very useful piece of software.

To install Node.js, visit nodejs.org and download the stable version for your computer. On Windows and Mac, it comes as an installer.

To check if everything has worked, type the following into the Command Terminal of your computer and press ENTER.

If any errors appear, then you have a problem. If you need help installing Node.js, you can either find a more detailed installation guide or contact us at info@greyhope.uk.

Once you have successfully installed Node.js, make a new folder on your computer and name it chat-app. Inside the folder, add a file called server.js. Open the file and write the following code.

Now go to the Command Terminal and type cd followed by the file path of your chat_app folder. Based on where you put the folder, the file path will be different.

Now type the following into the terminal.

The terminal should then print hello.

Now we need to set up our chat-app folder. Type the following into the terminal.

It will then ask questions about your new package. You can type the following answers.

Confirm everything by pressing ENTER. It should then create a single file called package.json in your chat-app folder. This file contains all the information you just entered.

Finally, we want to include two important packages for our application. They are Socket.IO and Express, they will be explained later. Type the following into the terminal.

It should then create a file called package-lock.json and a folder called node_modules. If this works, you are ready to move on to the next page where we will start coding our program.

Back Next