An overview of frontend and backend interaction

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.

See my Github Repo 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 file
npm install -s express
npm install -s socket.io

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.

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'));

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.

// 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');

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.

// 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);
})

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.

// Socket setup
var io = socket(server);
io.on('connection', (socket) => {
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);
});
});

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.

// Display Events
socket.on('chat', function(data){
    feedback.innerHTML = '';
    output.innerHTML += '<p><strong>' + data.handle + ': </strong>' + data.message + '</p>';
});

socket.on('typing', function(data){
    feedback.innerHTML = '<p><em>' + data + ' is typing a message...</em></p>';
});

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. I know it’s not this simple every time but I guess this gave me a basic idea on how this shit works.

Let me know your thoughts in the comments section.

Later.