I’ve seen many tutorials on Node and never really understood how it all works… like how frontend interacts with the backend. So, I’ve decided that tutorials aren't gonna make me understand much and the only way to understand is by implementing what I’ve learned. So, I’ve made a small chat client to understand the frontend and backend relationship. This app runs on the local system, and is built using Node.js, Express, and socket.io. Check my&nbsp;<a href="https://github.com/itsknk/PrivateChat" rel="noopener noreferrer" target="_blank" style="color: rgb(34, 34, 34);">Github Repo</a>&nbsp;for the code.First I’ve made a JSON file and installed the required dependencies i.e, Express and Socket.io.npm init //this will generate the JSON filenpm install -s expressnpm install -s socket.ioWHAT!!! trust me that was my reaction when I first found that. Yes, Node is single-threaded, or no or yes… well, it basically handles the user code in single-thread(where the event loop magic happens). Obviously, Node has to be single-threaded coz Js is single-threaded but some parts are natively handled by libuv and OS which are multi-threaded. Confusing? we'll just break it down in a more simple way and we will come back to this.After installing those dependencies, I’ve created an index.js file that acts as my server and used these modules in it. After this, I’ve created a web app using Express that runs and listens to the port number 4000 on localhost. <pre class="ql-syntax" spellcheck="false">var express = require('express');
var socket = require('socket.io');
// App setup
var app = express();
var server = app.listen(4000, 
function(){ 
 console.log('listening for requests on port 4000,');});
// Main files
app.use(express.static('public'));
</pre> Now I’ve made the HTML and CSS files for the frontend. Here, in the HTML file, you need to link the Socket.io CDN to use it. The basic front end involved making 2 input boxes for holding name and message. A simple box for sending the message written. Now the main part begins. I’ve made another js file for the frontend that interacts with the HTML elements and sends the data to the backed index.js file. In this chat.js file, I’ve made the connection to the localhost:4000 which is hosted by the backend index.js file. Now, using DOM I’ve interacted with the HTML input boxes and send button. <pre class="ql-syntax" spellcheck="false">// Make connection
var socket = io.connect('http://localhost:4000');
// DOM
var message = document.getElementById('message'), handle = document.getElementById('handle'), 
btn = document.getElementById('send'), 
output = document.getElementById('output'), 
feedback = document.getElementById('feedback');
</pre> Now by using EventListener I’ve emitted the message and handle value from the front end (chat.js) and handled them in the backend(index.js) by using socket.on method. <pre class="ql-syntax" spellcheck="false">// Emit events
	btn.addEventListener('click', function(){
	 socket.emit('chat', {
	 message: message.value,
	 handle: handle.value
	 });
	 message.value = "";
	});
	message.addEventListener('keypress', function(){
	 socket.emit('typing', handle.value);
})
</pre> Here keypress event is for displaying to the other user when you’re typing a message. As the name suggests this event gets triggered whenever you start typing. <pre class="ql-syntax" spellcheck="false">// Socket setup
	var io = socket(server);
	io.on('connection', (socket) =&gt; {
	console.log('made socket connection', socket.id);
	socket.on('chat', function(data){ 
// Handling the chat data sent by frontend
	io.sockets.emit('chat', data);});
	socket.on('typing', function(data){ 
// Handling the typing data sent by frontend
	socket.broadcast.emit('typing', data);
	});
});
</pre> Here I’ve made the socket connection which is being received by the frontend and I’m printing the socket.id which prints the id of the user that interacts or sends any message. Here, the socket.on method handles the data i.e, name and message of the user which is sent by the frontend js file and emits it back to the frontend file for it to display.Hence again the frontend file should receive the data emitted by the backend file and has to display it. <pre class="ql-syntax" spellcheck="false">// Display Events
	socket.on('chat', function(data){
	 feedback.innerHTML = '';
	 output.innerHTML += '&lt;p&gt;&lt;strong&gt;' + data.handle + ': &lt;/strong&gt;' + data.message + '&lt;/p&gt;';
	});
	

	socket.on('typing', function(data){
	 feedback.innerHTML = '&lt;p&gt;&lt;em&gt;' + data + ' is typing a message...&lt;/em&gt;&lt;/p&gt;';
});
</pre> And that sums it up. Finally, I’ve made a small chat client that the users can interact in localhost. By making this I’ve clearly understood how frontend interacts with backend and vice-versa. First, a backend file should be created that holds a server that runs on the pc or services like Heroku, then we need another js file that runs on the browser and interacts with backend i.e, by sending the data or requests to it. After this, the backend receives the data and sends it back to the frontend to display.

An overview of Frontend and Backend interaction

Related blogs

About us: