How to build a real time chat application in Node.js using Express, Mongoose and Socket.io

How to build a real time chat application in Node.js using Express, Mongoose and Socket.io

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.

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Node.js Express MongoDB Tutorial

Node.js Express MongoDB Tutorial is CRUD example, I have created to showcase Express web framework, MongoDB NoSQL database, and Node.js server platform.

How to Use Express.js, Node.js and MongoDB.js

In this post, I will show you how to use Express.js, Node.js and MongoDB.js. We will be creating a very simple Node application, that will allow users to input data that they want to store in a MongoDB database. It will also show all items that have been entered into the database.

Ecommerce MERN(MongoDB Express.js React.js Node.js) Redux Tailwind

Ecommerce MERN(MongoDB Express.js React.js Node.js) Redux Tailwind

Build a REST API using Node.js, Express.js, Mongoose.js and MongoDB

Node.js, Express.js, Mongoose.js, and MongoDB is a great combination for building easy and fast REST API. You will see how fast that combination than other existing frameworks because of Node.js is a packaged compilation of Google’s V8 JavaScript engine and it works on non-blocking and event-driven I/O. Express.js is a Javascript web server that has a complete function of web development including REST API.

Fullstack Vue App with MongoDB, Express.js and Node.js

In this article, you'll learn building a fullstack Vue note-taking application and showing you how to perform the aforementioned processes, using Node.js running the Express.js framework for the back end, and MongoDB to store our data.