Chat App

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 recieving 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.

node -v
npm -v

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.

cd [file path] chat_app

Now type the following into the terminal.

node server.js

The terminal should then print hello.

Now we need to set up our chat_app folder. Type the following into the terminal.

npm init

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

package name: chat-app
version: 1.0.0
description: A basic online chat application
entry point: server.js
test command:
git repository:
keywords: chatting online fun
author: Your Name
license: ISC

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.

npm install --save express socket.io

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.