In this tutorial, we will use the Node.js platform to build a real time chat application that sends and shows messages to a recipient instantly without any page refresh. We will use the JavaScript framework Express.js and the libraries Mongoose and Socket.io to achieve this.
Before we start, lets have a quick look at the basics of Node.js
Node.js
Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside the browser. The most important advantage of using Node is that we can use JavaScript as both a front-end and back-end language.
As we know, JavaScript was used primarily for client-side scripting, in which scripts were embedded in a webpage’s HTML and run client-side by a JavaScript engine in the user’s web browser.
Node.js lets developers use JavaScript to write Command Line tools and for server-side scripting — running scripts server-side to produce dynamic web page content before the page is sent to the user’s web browser.
To install node:
https://nodejs.org/en/download/
Even though the node is single threaded it’s still faster to use asynchronous functions. For example, Node can process other things while a file is being read off disk, or while waiting for an HTTP request to complete. The asynchronous behaviour can be implemented using callbacks. Also the JavaScript works well with JSON and No-SQL databases.
NPM** Modules**
Nodejs allows the modules of libraries to be included in the application. These modules can be user-defined or third party modules.
The third party modules can be installed using the following command:
npm install module_name
and the installed modules can be used using the require() function:
var module = require(‘module_name’)
In Node apps we will be using a package.json file to maintain the module versions. This file can be created by this command:
npm init
and the packages must be installed as follows:
npm install -s module_name
There are many frameworks that can be added as modules to our Node application. These will be explained further on as needed.
Simple Chat Application
The app must allow multiple users to chat together. The messages must be updated without refreshing the page. For simplicity we will be avoiding the authentication part.
We can start by creating a new project directory and moving into it. Then we can initiate our project by the following command:
npm init
This will prompt us to enter details about our project.
After this a package.json file will be created:
{
“name”: “test”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1"
},
“author”: “”,
“license”: “ISC”
}
Our app directory is now set.
The first thing we need to create is a server. In order to create that, we will be making use of a framework named Express.
Express.js
Express.js, or simply Express, is a web application framework for Node.js. Express provides a robust set of features for web and mobile applications. Express provides a thin layer of fundamental web application features, without obscuring Node.js features.
We will install Express.js using the following command:
npm install -s express
Inside the package.json file a new line will be added:
dependencies”: {
“express”: “⁴.16.3”
}
Next we will create a server.js file.
In this file we need to require Express and create a reference to a variable from an instance of Express. Static contents like HTML, CSS or JavaScript can be served using express.js:
var express = require(‘express’);
var app = express();
and we can start listening to a port using the code:
var server = app.listen(3000, () => {
console.log(‘server is running on port’, server.address().port);
});
Now we need to create an HTML file index.html that displays our UI. I have added bootstrap and JQuery cdn.
//index.html
<!DOCTYPE html>
<html>
<head>
<! — include bootstap and jquery cdn →
</head>
<body>
<div class=”container”>
<br>
<div class=”jumbotron”>
<h1 class=”display-4">Send Message</h1>
<br>
<input id = “name” class=”form-control” placeholder=”Name”>
<br>
<textarea id = “message” class=”form-control” placeholder=”Your Message Here”>
</textarea>
<br>
<button id=”send” class=”btn btn-success”>Send</button>
</div>
<div id=”messages”>
</div>
</div>
<script>
</script>
</body>
</html>
Please note that the empty
#node-js #express #mongodb
