Simple Chat App using NodeJS and MongoDB Atlas Part 4

Introduction

This lesson is Part 4 of the multiple-series tutorial, “Simple Chat App using NodeJS and MongoDB Atlas.” In Part 3, you learned how to code the server.js for the backend. Today’s lesson focuses on coding the index.html for the frontend. Let’s continue to use Node and MongoDB Atlas, the fully managed cloud database, to build a simple, yet robust Chat application.

If you’re familiar with how to do this and want to skip the detailed steps, go to Just the Code.

Prerequisites

Complete Part 1 through Part 3 of the multiple-series tutorial prior to proceeding with this one. Here are the links to the earlier lessons:

Simple Chat App using NodeJS and MongoDB Atlas Part 1

Simple Chat App using NodeJS and MongoDB Atlas Part 2

Simple Chat App using NodeJS and MongoDB Atlas Part 3

Coding The Index.HTML

The code for your index.html file is shown below. Throughout this lesson, code will be given, and explanations for the main parts of it will follow for further clarification.

HTML Structure

  • Input the code for the structure of the file index.html.
<!DOCTYPE html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
        <script src="/socket.io/socket.io.js"></script>
    </head>
    <body>
        <div class="chatbox">
            <div class="chatlogs" >
                <div class="chat" id="messages"></div>
            </div>
            <div class="chat-form">
                <input id="name" class="form-control" placeholder="name">
                <br>
                <textarea id="message" class="form-control" placeholder="message"></textarea>
                <br>
                <button id="send" >Send</button>
            </div>
            <script>
                // javascript code goes here
            </script>

        </div>
    </body>
</html>

Coding the Script

The scripts for the backend of your Chat App using NodeJS enable it to connect to the server. You set up the backend in the previous lesson. Now, we want to finish up by adding code for the connection process.

<script>
    var socket = io()
<script>
  • The script shown above serves two important functions: 1) performs a socket.io initialization, and 2) makes an attempt to connect to the server using the current page’s hosting URL.
<script>
  $(() => {
    $("#send").click(() => {
      var message = { name: $("#name").val(), message: $("#message").val() };
      postMessage(message);
    });
    getMessage();
  });
</script>
  • The function document ready event is created in a condensed way.

  • Next, a function callback along with a function arrow is passed.

  • After that, the document is loaded completely.

  • Now the function document ready event is called.

  • The Send button is given that ID so that when clicked, it sends data. The variable message is where you’re saving it to.

  • The values are set for properties, and they correspond with the form’s IDs for name and message.

  • Lastly, you called the function postMessage(message) and made a message object parameter pass.

<script>
  function addMessage(message) {
    $("#messages").append(
      `<p class="user-name"> ${message.name} </p> <p class="chat-message"> ${message.message} </p>`
    );
  }
</script>
  • This code used the addMessage function to append the HTML element “messages” ID.
<script>
  function gettMessage(message) {
    $.get("http://localhost:2500/messages", data => {
      data.forEach(addMessage);
    });
  }
</script>
  • The code shown above used the function getMessage and passed it to the 'http://localhost:2500/messages' local server URL.

  • You’ll want to get and see the data results, so to get data, you set a callback. Use the construct forEach for iteration. Next, put in the addMessage formatted message function.

<script>
  function postMessage(message) {
    $.post("http://localhost:2500/messages", message);
  }
</script>
  • The code shown above does post-data sending with the postMessage function. It makes a node endpoint. In addition, for the post call, it’s the parameter located after the local host message parameter in the function’s message object.

Testing The Chat Application

Time to try out your newly created Chat App using NodeJS and MongoDB Atlas.

  • Use this command to run your nodemon server.js server.

  • In your browser, input ‘localhost:2500’ URL to load the interface and start your application.

image shows the chat application interface via browser

  • As shown below, open up the Chat App using NodeJS and MongoDB Atlas again so that you have two windows running at the same time. Drag them to half their original size and place them next to one another. Make the username for the left side, “left the window.” Give the username on the right, “right window.”

image shows that the application is running simultaneously

It works! As shown below, the message appears on each window simultaneously.

b1108e8921a632b7d33ee09e54e009a2.gif

  • View the collections in MongoDB database Atlas to confirm that it contains the messages.

3a432c287013201a79b4e0a52af05c82.png

Conclusion

This tutorial explained how to create a simple chat application using Chat App using NodeJS and MongoDB Atlas. Today, in Part 4 you learned how to code the frontend of your chat application to complete its communication functionality. Application with chat features enables customers to talk to representatives and resolve their issues quickly by getting fast answers to their questions. Be sure to utilize the steps in this multiple-series tutorial any time you want to create Chat apps that are simple, yet effective.

The Code

Here is the complete code for the sample used in this tutorial for creating a Chat App using NodeJS and MongoDB Atlas.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
  <!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
    <link
     rel="stylesheet"
     href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
     integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
     crossorigin="anonymous"
   />
    <script
     src="https://code.jquery.com/jquery-3.3.1.min.js"
     crossorigin="anonymous"
   ></script>
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <div class="chatbox">
      <div class="chatlogs">
        <div class="chat" id="messages"></div>
      </div>
      <div class="chat-form">
        <input id="name" class="form-control" placeholder="name" />
        <br />
        <textarea
         id="message"
         class="form-control"
         placeholder="message"
       ></textarea>
        <br />
        <button id="send">Send</button>
      </div>
    </div>

    <script>
      var socket = io();

      // ========= Start of document ready function =======
      $(() => {
        $("#send").click(() => {
          var message = {
            name: $("#name").val(),
            message: $("#message").val()
          };
          postMessage(message);
        });
        getMessage();
      });
      // ========= End of document ready function =========
      socket.on("message", addMessage);

      function addMessage(message) {
        $("#messages").append(
          `<p class="user-name"> ${message.name} </p> <p class="chat-message"> ${message.message} </p>`
        );
      }

      function getMessage() {
        $.get("http://localhost:2500/messages", data => {
          data.forEach(addMessage);
        });
      }

      function postMessage(message) {
        $.post("http://localhost:2500/messages", message);
      }
    </script>
  </body>
</html>

Pilot the ObjectRocket Platform Free!

Try Fully-Managed CockroachDB, Elasticsearch, MongoDB, PostgreSQL (Beta) or Redis.

Get Started

Keep in the know!

Subscribe to our emails and we’ll let you know what’s going on at ObjectRocket. We hate spam and make it easy to unsubscribe.