Real-Time Chat Application

Introduction

In this article, I will be guiding you to make a real-time chat application, with the help of Socket.IO and Node.js.

TalkVi is a real-time chat Application with Socket.IO. This is a node.js chat application, utilizing Express framework and Socket.IO.

Prerequisites

Node.js should be installed on your local machine.
Knowledge of - HTML,CSS,JavaScript and Node.js.

So, now we are ready to initiate our project.

Initially, we will open the terminal and create a directory which will be dedicated for our application. Now, we will navigate into that directory and run npm init. Then, we need to enter details about our application, which will be stored in 'Package.json' file. After this, we need to run below command,

npm install --save express nodemon socket.io

This command will install express,nodemon and socket.io modules which are the dependencies of our application.

Our terminal should look like the following,

npm install --save-dev babel-cli babel-preset-env babel-preset-stage-0

Above command will be installing babel-cli,babel-preset-env and babel-preset-stage-0 modules which are the dependencies of our project.

Then, we will open the Package.json file in the text editor and add the following value corresponding to the key 'script'

"start": "nodemon ./app.js --exec babel-node -e js",

So, the beginning of our Package.json file should look like the following,

{
"name": "chat",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon ./app.js --exec babel-node -e js",
"test": "echo \"Error: no test specified\" && exit 1"
},

Then, we will be navigating to our project directory and we'll be creating a file named as .babelrc which will be opened in a text editor and the following text will be entered,

{
"presets": [
"env",
"stage-0"
]
}

So, in this step, we have created the environment of our application.

Now, we will be creating a directory named public in our project directory. Inside this directory, there will be two files, namely 'index.html' and 'style.css'.

Our 'index.html' file will contain the following code,

<!DOCTYPE html>
<html lang="en">
<head>
<title>ChatRoom</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script>
var name = prompt("Please enter your name");
</script>
</head>
<body>
<div id="intro">
<h1>ChatRoom</h1>
</div>
<ul id="messages"></ul>
<form action="">
<input id="m" placeholder="Enter your message..." autocomplete="off" required /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
var socket = io();
socket.emit('joining msg', name);
$('form').submit(function (e) {
e.preventDefault(); // will prevent page reloading
socket.emit('chat message', (name + ': ' + $('#m').val()));
$('#messages').append($('<li id="list">').text('You: ' + $('#m').val()));
$('#m').val('');
return false;
});
socket.on('chat message', function (msg) {
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>

In the above code,

<meta name="viewport" content="width=device-width, initial scale =1">

This gives the browser instructions on how to control the page's dimensions and scaling of the project.

var name = prompt("Please enter your name");

The above code will prompt the user to enter their name which will be stored in name variable.

var socket = io();

The above line in the code will try to connect to the host that serves the stage. Each socket also fires a special disconnect event when the user closes the page or refreshes it.This event will also be listened by the server.

When the user is connected to the server, socket.emit('joining msg',name); will be emitting a joining msg event along with the name of the user, which will be handled by the server.

<form action=””>
<input id=”m” placeholder=”Enter your message…” autocomplete=”off” required /><button>Send</button>
</form>

Above code will be creating a form for the user to enter messages. When this form is submitted, the following code will emit chat message event along with the name of the sender and the message to the server. The same message will also be displayed on the sender's browser. Then, the message input field will be emptied.

Our project directory should look like the above.

$('form').submit(function(e) {
e.preventDefault(); // will prevent page reloading
socket.emit('chat message', (name + ': ' + $('#m').val()));
$('#messages').append($('<li id="list">').text('You:'+ $('#m').val()));
$('#m').val('');
return false;
});

The emitted chat message event when received by the server will be broadcast to all the other users as another emit event named chat message. This will be received and displayed by the browser with the help of the following code:

socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});

Now that we have understood the function of out html file, we will be writing the CSS file so that our webpage looks good. Below is the code for Style.css,

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#intro{
background-color: #008000;
color: #FFFFFF;
height: 5%;
}
body {
font: 20px;
}
form {
background: #000000;
padding: 3px;
position: fixed;
bottom: 5px;
width: 100%;
}
form input {
background-color: #e6ffe6;
border: 0;
padding: 10px;
width: 90%;
margin-right: 0.5%;
}
form button {
width: 9%;
background: #00e600;
border: none;
padding: 5px;
font-size: 20px;
}
#messages {
margin: 0;
padding: 0;
}
#messages li {
padding: 5px 10px;
}
#messages li:nth-child(odd) {
background: #b3ffb3;
}
#list{
text-align: right;
}

In the previous steps, we have completed writing codes for our front end. Now,we'll write codes for our backend in app.js file.

var express = require('express');
var http = require('http');
var app = express();
var server = http.createServer(app);
var io = require('socket.io')(server);
var path = require('path');
app.use(express.static(path.join(__dirname,'./public')));
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});
var name;
io.on('connection', (socket) => {
console.log('new user connected');
socket.on('joining msg', (username) => {
name = username;
io.emit('chat message', `---${name} joined the chat---`);
});
socket.on('disconnect', () => {
console.log('user disconnected');
io.emit('chat message', `---${name} left the chat---`);
});
socket.on('chat message', (msg) => {
socket.broadcast.emit('chat message', msg); //sending message to all except the sender
});
});
server.listen(3000, () => {
console.log('Server listening on :3000');
});

Our server application will send index.html file to the client. It will receive all the events emitted by the client and will properly handle them. It will also emit events which will be received by the client for proper functioning of our web application.

Our coding is done, now we can start our server in the terminal using the command npm run start. The following message will be displayed.

Server listening on :3000

Now, we will open the browser and enter http://localhost:3000 in the address bar. The webpage will prompt us for our name. We can open this page in as many windows as we want. If we send a message from one window, it will be displayed in every window. So it is just like a real-time web-page opened in mutiple clients' browsers which are connected to a common server; i.e, localhost. Below is our webpage running over the browser,

Conclusion

In the above article, we explored about Socket.io, node.js and how the real-time communication takes place.We explored about the development mode setup and the environment setup for our project .