Want to build an anonymous chat app in Javascript

Want to build an anonymous chat app in Javascript

You have to prepare basic Javascript knowledge to build this chat application

We're all familiar with instant messaging and using it to chat to people in realtime. Sometimes, though, we might want an app which allows us to send messages anonymously to friends, or to chat anonymously with strangers in close proximity. An example of such an app is Truth, which lets you talk with people on your contact list without disclosing your identity.

In this tutorial, I'll be showing you how to build a public anonymous chat app in JavaScript (using Node.js and Express on the server, and VanillaJS on the client) and Pusher. Pusher allows us to build scalable and reliable realtime applications, and since we need realtime delivery of chat messages, this is a key component of the chat app. The image below depicts what we will be building:

Getting Started

Let's kick off by signing up for a free Pusher account (or logging in if you already have one). Once you're logged in, create a new Pusher app from the dashboard and make a note of your App ID, Key and Secret, which are unique to an app.

To create a new Pusher app, click the Your apps side menu, then click the Create a new app button below the drawer. This brings up the setup wizard.

  1. Enter a name for the application. In this case I’ll call it “chat”.
  2. Select a cluster.
  3. Select the option “Create app for multiple environments” if you want to have different instances for development, staging and production.
  4. Select Vanilla JS as the frontend and Node.js as the backend.
  5. Complete the process by clicking Create App button to set up your app instance.

Code-up the server

We need a backend which will serve our static files and also accept messages from a client and then broadcast to other connected clients through Pusher. Our backend will be written in Node.js, so we need to set it up.

We need a package.json file, and I'll add it by running the command below. I'll use the defaults provided by hitting enter for every prompt.

$ npm init

With the package.json file added, I'll install Expressbody-parser, and Pusher npm packages. Run the following command

$ npm install --save pusher express body-parser

With these packages installed, let's add a new file called server,js with the following content

var express = require('express');
var bodyParser = require('body-parser');
var Pusher = require('pusher');

var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

var pusher = new Pusher({ appId: "APP_ID", key: "APP_KEY", secret: "APP_SECRET", cluster: "APP_CLUSTER" });

app.post('/message', function(req, res) {
var message = req.body.message;
pusher.trigger( 'public-chat', 'message-added', { message });
res.sendStatus(200);
});

app.get('/',function(req,res){
res.sendFile('/public/index.html', {root: __dirname });
});

app.use(express.static(__dirname + '/public'));

var port = process.env.PORT || 5000;
app.listen(port, function () {
console.log(app listening on port ${port}!)
});

With the code above, we have defined an end-point /message which will be used by the client to send in the message it wants to send to another client through Pusher. The other routes are used to serve the static files which we will add later.

Replace the placeholder strings App ID, Secret and Key with the values from your Pusher dashboard.

Add this statement "start": "node server.js" in the script property of our package.json file. This will allow us start the server when we run npm start

Building the frontend

Moving on to the frontend, let's add a new folder called public. This folder will contain our page and JavaScript files. Add a new file called style.css with the content below, which will hold our style definition for the page.

@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
.chat
{
list-style: none;
margin: 0;
padding: 0;
}

.chat li
{
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dotted #B3A9A9;
}

.chat li.left .chat-body
{
margin-left: 60px;
}

.chat li.right .chat-body
{
margin-right: 60px;
}

.chat li .chat-body p
{
margin: 0;
color: #777777;
}

.panel .slidedown .glyphicon, .chat .glyphicon
{
margin-right: 5px;
}

.body-panel
{
overflow-y: scroll;
height: 250px;
}

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}

::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}

Add another file called index.html with the markup below.

<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

&lt;!-- Optional theme --&gt;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

&lt;script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"&gt;&lt;/script&gt;
 &lt;!-- Latest compiled and minified JavaScript --&gt;
 &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;

 &lt;link rel="stylesheet" href="style.css"&gt;
 &lt;script src="https://js.pusher.com/4.0/pusher.min.js"&gt;&lt;/script&gt;
 &lt;script src="index.js"&gt;&lt;/script&gt;

</head>
<body>
<div class="container">
<div class="row form-group">
<div class="col-xs-12 col-md-offset-2 col-md-8 col-lg-8 col-lg-offset-2">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> Anonymous Chat
<div class="btn-group pull-right">
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<ul class="dropdown-menu slidedown">
<li><a href="https://l.morioh.com/b0a3f595aa?r=http://www.jquery2dotnet.com" rel="nofollow" target="_blank"><span class="glyphicon glyphicon-refresh">
</span>Refresh</a></li>
<li><a href="https://l.morioh.com/b0a3f595aa?r=http://www.jquery2dotnet.com" rel="nofollow" target="_blank"><span class="glyphicon glyphicon-ok-sign">
</span>Available</a></li>
<li><a href="https://l.morioh.com/b0a3f595aa?r=http://www.jquery2dotnet.com" rel="nofollow" target="_blank"><span class="glyphicon glyphicon-remove">
</span>Busy</a></li>
<li><a href="https://l.morioh.com/b0a3f595aa?r=http://www.jquery2dotnet.com" rel="nofollow" target="_blank"><span class="glyphicon glyphicon-time"></span>
Away</a></li>
<li class="divider"></li>
<li><a href="https://l.morioh.com/b0a3f595aa?r=http://www.jquery2dotnet.com" rel="nofollow" target="_blank"><span class="glyphicon glyphicon-off"></span>
Sign Out</a></li>
</ul>
</div>
</div>
<div class="panel-body body-panel">
<ul class="chat">

                &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div class="panel-footer clearfix"&gt;
                &lt;textarea id="message" class="form-control" rows="3"&gt;&lt;/textarea&gt;
                &lt;span class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-12" style="margin-top: 10px"&gt;
                    &lt;button class="btn btn-warning btn-lg btn-block" id="btn-chat"&gt;Send&lt;/button&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

</div>
<script id="new-message-other" type="text/template">
<li class="left clearfix">
<span class="chat-img pull-left">
<img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<p>
{{body}}
</p>
</div>
</li>
</script>

<script id="new-message" type="text/template">
<li id="{{id}}" class="right clearfix">
<div class="chat-body clearfix">
<p>
{{body}}
</p>
</div>
</li>
</script>

</body>
</html>

A basic understanding of JavaScript is needed to follow this tutorial.

We're all familiar with instant messaging and using it to chat to people in realtime. Sometimes, though, we might want an app which allows us to send messages anonymously to friends, or to chat anonymously with strangers in close proximity. An example of such an app is Truth, which lets you talk with people on your contact list without disclosing your identity.

In this tutorial, I'll be showing you how to build a public anonymous chat app in JavaScript (using Node.js and Express on the server, and VanillaJS on the client) and Pusher. Pusher allows us to build scalable and reliable realtime applications, and since we need realtime delivery of chat messages, this is a key component of the chat app. The image below depicts what we will be building:

Getting Started

Let's kick off by signing up for a free Pusher account (or logging in if you already have one). Once you're logged in, create a new Pusher app from the dashboard and make a note of your App ID, Key and Secret, which are unique to an app.

To create a new Pusher app, click the Your apps side menu, then click the Create a new app button below the drawer. This brings up the setup wizard.

  1. Enter a name for the application. In this case I’ll call it “chat”.
  2. Select a cluster.
  3. Select the option “Create app for multiple environments” if you want to have different instances for development, staging and production.
  4. Select Vanilla JS as the frontend and Node.js as the backend.
  5. Complete the process by clicking Create App button to set up your app instance.

Code-up the server

We need a backend which will serve our static files and also accept messages from a client and then broadcast to other connected clients through Pusher. Our backend will be written in Node.js, so we need to set it up.

We need a package.json file, and I'll add it by running the command below. I'll use the defaults provided by hitting enter for every prompt.

$ npm init

With the package.json file added, I'll install Expressbody-parser, and Pusher npm packages. Run the following command

$ npm install --save pusher express body-parser

With these packages installed, let's add a new file called server,js with the following content

var express = require('express'); var bodyParser = require('body-parser'); var Pusher = require('pusher'); var app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); var pusher = new Pusher({ appId: "APP_ID", key: "APP_KEY", secret: "APP_SECRET", cluster: "APP_CLUSTER" }); app.post('/message', function(req, res) { var message = req.body.message; pusher.trigger( 'public-chat', 'message-added', { message }); res.sendStatus(200); }); app.get('/',function(req,res){ res.sendFile('/public/index.html', {root: __dirname }); }); app.use(express.static(__dirname + '/public')); var port = process.env.PORT || 5000; app.listen(port, function () { console.log(app listening on port ${port}!) });

With the code above, we have defined an end-point /message which will be used by the client to send in the message it wants to send to another client through Pusher. The other routes are used to serve the static files which we will add later.

Replace the placeholder strings App ID, Secret and Key with the values from your Pusher dashboard.

Add this statement "start": "node server.js" in the script property of our package.json file. This will allow us start the server when we run npm start

Building the frontend

Moving on to the frontend, let's add a new folder called public. This folder will contain our page and JavaScript files. Add a new file called style.css with the content below, which will hold our style definition for the page.

@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
.chat
{
list-style: none;
margin: 0;
padding: 0;
}

.chat li
{
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dotted #B3A9A9;
}

.chat li.left .chat-body
{
margin-left: 60px;
}

.chat li.right .chat-body
{
margin-right: 60px;
}

.chat li .chat-body p
{
margin: 0;
color: #777777;
}

.panel .slidedown .glyphicon, .chat .glyphicon
{
margin-right: 5px;
}

.body-panel
{
overflow-y: scroll;
height: 250px;
}

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}

::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}

Add another file called index.html with the markup below.

<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

&lt;!-- Optional theme --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;

&lt;script
    src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"&gt;&lt;/script&gt;

&lt;!-- Latest compiled and minified JavaScript --&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;

&lt;link rel="stylesheet" href="style.css"&gt;
&lt;script src="https://js.pusher.com/4.0/pusher.min.js"&gt;&lt;/script&gt;
&lt;script src="index.js"&gt;&lt;/script&gt;

</head>
<body>
<div class="container">
<div class="row form-group">
<div class="col-xs-12 col-md-offset-2 col-md-8 col-lg-8 col-lg-offset-2">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> Anonymous Chat
<div class="btn-group pull-right">
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<ul class="dropdown-menu slidedown">
<li><a href="https://l.morioh.com/b0a3f595aa?r=http://www.jquery2dotnet.com" rel="nofollow" target="_blank"><span class="glyphicon glyphicon-refresh">
</span>Refresh</a></li>
<li><a href="https://l.morioh.com/b0a3f595aa?r=http://www.jquery2dotnet.com" rel="nofollow" target="_blank"><span class="glyphicon glyphicon-ok-sign">
</span>Available</a></li>
<li><a href="https://l.morioh.com/b0a3f595aa?r=http://www.jquery2dotnet.com" rel="nofollow" target="_blank"><span class="glyphicon glyphicon-remove">
</span>Busy</a></li>
<li><a href="https://l.morioh.com/b0a3f595aa?r=http://www.jquery2dotnet.com" rel="nofollow" target="_blank"><span class="glyphicon glyphicon-time"></span>
Away</a></li>
<li class="divider"></li>
<li><a href="https://l.morioh.com/b0a3f595aa?r=http://www.jquery2dotnet.com" rel="nofollow" target="_blank"><span class="glyphicon glyphicon-off"></span>
Sign Out</a></li>
</ul>
</div>
</div>
<div class="panel-body body-panel">
<ul class="chat">

                &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div class="panel-footer clearfix"&gt;
                &lt;textarea id="message" class="form-control" rows="3"&gt;&lt;/textarea&gt;
                &lt;span class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-xs-12" style="margin-top: 10px"&gt;
                    &lt;button class="btn btn-warning btn-lg btn-block" id="btn-chat"&gt;Send&lt;/button&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

</div>

<script id="new-message-other" type="text/template">
<li class="left clearfix">
<span class="chat-img pull-left">
<img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<p>
{{body}}
</p>
</div>
</li>
</script>

<script id="new-message" type="text/template">
<li id="{{id}}" class="right clearfix">
<div class="chat-body clearfix">
<p>
{{body}}
</p>
</div>
</li>
</script>

</body>
</html>

I'm using a template from bootsnipp which has been slightly modified to display just the name and message.

Add a new file called index.js with the content below. Remember to add the Pusher app details:

$(document).ready(function(){
var pusher = new Pusher('APP_SECRET', {
cluster: 'APP_CLUSTER',
encrypted: false
});

let channel = pusher.subscribe('public-chat');
channel.bind('message-added', onMessageAdded);

$('#btn-chat').click(function(){
    const message = $("#message").val();
    $("#message").val("");

    $(".chat").append(template);

    //send message
    $.post( "http://localhost:5000/message", { message } );
});

function onMessageAdded(data) {
    let template = $("#new-message").html();
    template = template.replace("{{body}}", data.message);

    $(".chat").append(template);
}

});

With the code in this file, we get the message to send from the page, and then call the server with the message. After that, we connect to Pusher by creating a new Pusher object with the App Secret and the Cluster that you set earlier.

We subscribe to a channel and an event named message-added. The channel is a public channel so it can be named any way you like. I've chosen to prefix mine with public- but that's just my own convention as there are no rules for a public channel. The difference between a public channel (which does not require client to be authenticated), and the other two, are that they're prefixed with private- and presence-.

We bind to the click event of the chat button on the page, then we retrieve the message from the textbox on the page, and then send it to the server with the username. With all we have setup, we can run start the app by running npm start. Here's a glimpse of how it works on my computer.

Wrap Up

This is a app to show how you can use Pusher to send messages in realtime. We built a public anonymous chat app that allows your website visitors to send anonymous messages to each other in realtime.

Thank for reading!

Originally published on https://pusher.com

Top 7 Most Popular Node.js Frameworks You Should Know

Top 7 Most Popular Node.js Frameworks You Should Know

Node.js is an open-source, cross-platform, runtime environment that allows developers to run JavaScript outside of a browser. In this post, you'll see top 7 of the most popular Node frameworks at this point in time (ranked from high to low by GitHub stars).

Node.js is an open-source, cross-platform, runtime environment that allows developers to run JavaScript outside of a browser.

One of the main advantages of Node is that it enables developers to use JavaScript on both the front-end and the back-end of an application. This not only makes the source code of any app cleaner and more consistent, but it significantly speeds up app development too, as developers only need to use one language.

Node is fast, scalable, and easy to get started with. Its default package manager is npm, which means it also sports the largest ecosystem of open-source libraries. Node is used by companies such as NASA, Uber, Netflix, and Walmart.

But Node doesn't come alone. It comes with a plethora of frameworks. A Node framework can be pictured as the external scaffolding that you can build your app in. These frameworks are built on top of Node and extend the technology's functionality, mostly by making apps easier to prototype and develop, while also making them faster and more scalable.

Below are 7of the most popular Node frameworks at this point in time (ranked from high to low by GitHub stars).

Express

With over 43,000 GitHub stars, Express is the most popular Node framework. It brands itself as a fast, unopinionated, and minimalist framework. Express acts as middleware: it helps set up and configure routes to send and receive requests between the front-end and the database of an app.

Express provides lightweight, powerful tools for HTTP servers. It's a great framework for single-page apps, websites, hybrids, or public HTTP APIs. It supports over fourteen different template engines, so developers aren't forced into any specific ORM.

Meteor

Meteor is a full-stack JavaScript platform. It allows developers to build real-time web apps, i.e. apps where code changes are pushed to all browsers and devices in real-time. Additionally, servers send data over the wire, instead of HTML. The client renders the data.

The project has over 41,000 GitHub stars and is built to power large projects. Meteor is used by companies such as Mazda, Honeywell, Qualcomm, and IKEA. It has excellent documentation and a strong community behind it.

Koa

Koa is built by the same team that built Express. It uses ES6 methods that allow developers to work without callbacks. Developers also have more control over error-handling. Koa has no middleware within its core, which means that developers have more control over configuration, but which means that traditional Node middleware (e.g. req, res, next) won't work with Koa.

Koa already has over 26,000 GitHub stars. The Express developers built Koa because they wanted a lighter framework that was more expressive and more robust than Express. You can find out more about the differences between Koa and Express here.

Sails

Sails is a real-time, MVC framework for Node that's built on Express. It supports auto-generated REST APIs and comes with an easy WebSocket integration.

The project has over 20,000 stars on GitHub and is compatible with almost all databases (MySQL, MongoDB, PostgreSQL, Redis). It's also compatible with most front-end technologies (Angular, iOS, Android, React, and even Windows Phone).

Nest

Nest has over 15,000 GitHub stars. It uses progressive JavaScript and is built with TypeScript, which means it comes with strong typing. It combines elements of object-oriented programming, functional programming, and functional reactive programming.

Nest is packaged in such a way it serves as a complete development kit for writing enterprise-level apps. The framework uses Express, but is compatible with a wide range of other libraries.

LoopBack

LoopBack is a framework that allows developers to quickly create REST APIs. It has an easy-to-use CLI wizard and allows developers to create models either on their schema or dynamically. It also has a built-in API explorer.

LoopBack has over 12,000 GitHub stars and is used by companies such as GoDaddy, Symantec, and the Bank of America. It's compatible with many REST services and a wide variety of databases (MongoDB, Oracle, MySQL, PostgreSQL).

Hapi

Similar to Express, hapi serves data by intermediating between server-side and client-side. As such, it's can serve as a substitute for Express. Hapi allows developers to focus on writing reusable app logic in a modular and prescriptive fashion.

The project has over 11,000 GitHub stars. It has built-in support for input validation, caching, authentication, and more. Hapi was originally developed to handle all of Walmart's mobile traffic during Black Friday.

Node.js Tutorial for Beginners | Node.js Crash Course | Node.js Certification Training

This courseis designed for professionals who aspire to be application developers and gain expertise in building real-time, highly-scalable applications in Node.js. The following professionals can go for this course :

Why learn Node.js?

Node.js uses JavaScript - a language known to millions of developers worldwide - thus giving it a much lower learning curve even for complete beginners. Using Node.js you can build simple Command Line programs or complex enterprise level web applications with equal ease. Node.js is an event-driven, server-side, asynchronous development platform with lightning speed execution. Node.js helps you to code the most complex functionalities in just a few lines of code...

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

The Complete Node.js Developer Course (3rd Edition)

Angular & NodeJS - The MEAN Stack Guide

NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)

Docker for Node.js Projects From a Docker Captain

Intro To MySQL With Node.js - Learn To Use MySQL with Node!

Node.js Absolute Beginners Guide - Learn Node From Scratch

React Node FullStack - Social Network from Scratch to Deploy

Selenium WebDriver - JavaScript nodeJS webdriver IO & more!

Complete Next.js with React & Node - Beautiful Portfolio App

Build a Blockchain & Cryptocurrency | Full-Stack Edition

A Beginner Guide To Node.js (Basic Introduction To Node.js)

Node.js is a very popular javascript free and open source cross-platform for server-side programming built on Google Chrome’s Javascript V8 Engine. It is used by thousands of developers around the world to develop mobile and web applications. According to StackOverflow survey, Node.js is one of most famous choice for building the web application in 2018.

Introduction

Node.js is a very popular javascript free and open source cross-platform for server-side programming built on Google Chrome’s Javascript V8 Engine. It is used by thousands of developers around the world to develop mobile and web applications. According to StackOverflow survey, Node.js is one of most famous choice for building the web application in 2018.

In this article, you will gain a deep understanding of node, learn how node.js works and why it is so popular among the developers and startups. Not In startup even big companies like eBay, Microsoft, GoDaddy, Paypal etc.

Why is Node.js so much popular

It is fast very fast

It’s a javascript runtime built on google chrome javascript v8 engine which means both node js and js executed in your browser running in the same engine that makes it very fast in comparison to any other server-side programming language.

It uses event-driven and non-blocking model

Node.js uses the event-driven, non-blocking I/O model that makes it very lightweight and efficient.
Now let’s understand the above statement in more details. Here I/O refers to Input /Output.

Event Driven Programming is a paradigm in which control flow of any program is determined by the occurrence of the events. All these events monitor by the code which is known as an event listener. If you are from javascript background then most probably you know what is event-listeners. In short, event-listener is a procedure or function that waits for an event to occurs. In javascript, onload, onclick, onblur most common event-listener.

**Blocking I/O **takes time and hence block other function. Consider the scenario where we want to fetch data from the database for two different users. Here we can not get the data of the second user until we did not complete the first user process. Since javascript is a single threaded and here we would have to start a new thread every time we want to fetch user data. So here Non-Blocking I/O parts come in.

Example of Blocking I/O operation

<span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(‘fs’);
<span class="hljs-keyword">var</span> contents = fs.readFileSync(<span class="hljs-string">'package.json'</span>).toString();
<span class="hljs-built_in">console</span>.log(contents);

In** Non-blocking I/O **operations, you can get the user2 data without waiting for the completion of the user1 request. You can initiate both requests in parallel. **Non-blocking I/O **eliminates the need for the multi-threaded, since the system can handle multiple requests at the same time. That is the main reason which makes it very fast.

Example of Non-blocking I/O operation

<span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(‘fs’);
fs.readFile(<span class="hljs-string">'package.json'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">err, buf</span>)</span>{
    <span class="hljs-built_in">console</span>.log(buf.toString());
});

Note: You can learn more about the event loop and other things by going through this link.

What is Node Package Manager ( NPM )

It is is the official package manager for the node. It bundles automatically installed when you install node in your system. It is used to install new packages and manage them in useful ways. NPM install packages in two modes local and global. In the local mode, NPM installs packages in the node_module directory of the current working directory which location is owned by current user. Global packages installed in the directory where the node is installed and the location is owned by the root user.

What is the package.json

package.json is a plain JSON text file which manages all the packaged which you installed in your node application. Every Node.js applications should have this file at the root directory to describe the application metadata. A simple package.json file looks like below

{
    <span class="hljs-string">"name"</span> : <span class="hljs-string">"codesquery"</span>,
    <span class="hljs-string">"version"</span> : <span class="hljs-string">"1.0.0"'
    "repository": {
	"type" : "git",
	"url" : "github_repository_url"
    },
    "dependencies": {
	"async": "0.8.0",
	"express": "4.2.x"
    }
}
</span>

In the above file, name and versions are mandatory for the package.json file and rest is optional.

Installing Node.js

  • In Windows, you can install the node.js by using the installer provided by the official node.js website. Follow the installer instruction and node.js will be installed in your windows system.
  • In Linux OS, you can install the node.js by adding the PPA in your system and then install node js. Run the below command the terminal to install node js
sudo apt-get install curl python-software-properties
curl -sL https:<span class="hljs-comment">//deb.nodesource.com/setup_10.x | sudo -E bash -</span>
sudo apt-get install nodejs

  • In macOS, download the macOS installer from the official node.js website. Now run the installer by accepting the license and selecting the destination.

Test Node.js Installation

You can test the node.js installation by typing below command in the terminal

node -v

If node.js was installed successfully then you will see the installed version of the node in the terminal.

Frameworks and Tools

After gaining the popularity among the developers, there are so many frameworks built for the node js for the different type of uses. Here, I will tell you some of the most famous node js frameworks in the market

  • Express.js is the most popular framework for node.js development. A lot of popular websites is powered by express.js due to its lightweight.
  • Hapi.js is a powerful and robust framework for developing the API. This framework has features like input validation, configuration based functionality, error handling, caching and logging.
  • Metor.js is one of the most used frameworks in the node js web application development. This framework is backed by a huge community of developers, tutorials and good documentation.
  • Socket.io is used to build a real-time web application like chat system and analytics. Its allow the bi-direction data flow between the web client and server.
  • Koa.js is yet another most used framework to build the web application using the node js. This framework is backed by the team behind Express.js. It allows you to ditch callbacks and increase error handling.

Conclusion

Today, Node.js shaping the future of web and application development technology. This is the just the basic of how node js works. If you want to build a scalable web application using the node js then you need to know more then this.

Till now, you have got the basic idea of node.js and now it is time to build something using the node.js. You can start with first by create a simple server using the node.js and then connect your node with MongoDB to perform the basic crud operation.