Get realtime notification from contact us form to admin panel – Node JS

by Posted on

You can receive realtime notification on your admin panel for your website’s contact us form using simple Node JS script. You can download Node JS from here and install it in your system.

Above screenshot is the demo of what we are going to create. On left we have contact us page from where users can send a message to admin. And on right we have admin panel where admin will be able to view messages without refreshing the page.

Sending message from contact us form

Your typical contact us form might have the following fields:

<form action="#">
	<input type="text" id="name">
	<input type="text" id="email">
	<input type="text" id="subject">
	<textarea id="message"></textarea>

	<input type="button" onclick="sendMessage()" value="Send Message">
</form>

<script>
	function sendMessage() {
		//
	}
</script>

You might also have different fields too but it does not matter. The most important thing is, your form should:

  1. Have ID attribute to all fields.
  2. For submit button, input type must be “button”, not “submit”.
  3. The button needs to have an “onclick” listener.
  4. A function with same name must be created inside script tag.

Now we will be sending an event from socket. You can all an AJAX function too if you want to perform other actions too. First you need to include socket-io.js in your project, you can use the below CDN link to do that. Paste the following code anywhere in your contact us page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>

Then you have to create an instance for IO object and in sendMessage() function, you have to emit an event using this IO object. Sending an event is commonly refer to as “Emitting an event”.

var socket = io("http://192.168.43.64:3000");

function sendMessage() {
	socket.emit("messageSent", {
		"name": document.getElementById("name").value,
		"email": document.getElementById("email").value,
		"subject": document.getElementById("subject").value,
		"message": document.getElementById("message").value
	});

	// Call an AJAX for further actions you want to perform (like saving in database etc.)
}

io constructor will receive an IP address and port number where Node JS server will be running. You can get your local IP address from terminal by running the command: ifconfig and search for line having “ipv4”, your local IP address will be right next to “ipv4”. You can run your Node JS project on any port number other than 8080 (default for apache) and 3306 (default for MySQL). It will return a socket object which can be used to send an receive events from server. To send an event, we will calling a function named emit(eventName, data), it has 2 argument:

  1. First argument is the name of event that needs to be send.
  2. Second will be the data that needs to be send with this event. Here you can place all your contact us fields using their IDs.

Node JS server

Now we need a medium which will listen to this event and respond accordingly. So we assume that you have installed Node JS in your computer.

  1. Create a folder named “nodejs-server” anywhere in your system. I am creating it at desktop.
  2. Open terminal in that folder (shift + right click) and run the following command one at a time:
npm init

This will initialize the folder as Node JS project.

npm install express

This will install the express module used to create a server.

npm install http

This module will be used to start the server at specific port (3000 in our case).

npm install socket.io

This module will be used to listen events from client, and emit events to clients.

server.js

Create a file named “server.js” in newly created folder (“nodejs-server” in our case) and paste the following code in it:

var express = require("express");
var app = express();

var http = require("http").createServer(app);
var io = require("socket.io")(http);

http.listen(3000, function () {
    console.log("Server connected");

    io.on("connection", function (socket) {
        console.log("User " + socket.id);

        socket.on("messageSent", function (message) {
            socket.broadcast.emit("messageSent", message);
        });
    });
});

Remeber this file is a Javascript file so it does not need a <script> tag in it. We will explain each later in a moment. To start the server, run the following command in terminal or command prompt in that folder:

node server.js
  • First we created an instance of express and initialize it, saved it in a variable named “app”.
  • Similarly, we created “http” and “socket.io” instances. Http is created from express module. And socket.io is created from Http.
  • Then we start the server using listen function. First parameter will be port number and second will be a call back function that will be called when the server started running.
io.on("connection", function (socket) {
  • This function will be called when a new client connected with Node JS server. Client is connected by calling io() function from web page.
  • Then we are listening to “messageSent” event from client. That function will be called when client emits that event (in our case, from contact us form).
  • Then we are sending this event to all other connected clients. Broadcast will send the event to all connected clients other than the one who sends it.

Receive realtime notification on admin panel

So we are emitting event from contact us form and broadcasting it to all other connected clients from Node JS app. But who are the “other clients” ?
The one who will be listening to that event. So we are going to make admins to listen to that event. Paste the following code in all files on admin panel where you want to receive realtime notifications. Or you can paste them in admin template’s header or footer file as that will be included in each file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.js"></script>

<script>
	var socket = io("http://192.168.43.64:3000");

	socket.on("messageSent", function (message) {
		$.notify("New Message\n" + message.message + "\n\nFrom: " + message.name, {
			autoHide: false,
			className: "success"
		});
	});
</script>

First we added socket IO and created an instance like we did for contact us page. We are using https://notifyjs.jpillora.com/ library to display a simple alert realtime notification but once you have attach an event listener, you can display the realtime notification as per you need. jQuery is also added for notify.js, otherwise you do not need jQuery for socket IO.

That’s how you can receive realtime notification from your contact us form in your admin panel. Learn how to create a realtime customer support chat widget from here.

Post Views: 108

Published by adnanafzal565