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 for the code. Github Repo First I’ve made a JSON file and installed the required dependencies i.e, Express and Socket.io. npm init npm install -s express npm install -s socket.io //this will generate the JSON file 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. express = ( ); socket = ( ); app = express(); server = app.listen( , { .log( ); }); app.use(express.static( )); var require 'express' var require 'socket.io' // App setup var var 4000 ( ) function console 'listening for requests on port 4000,' // Main files '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. socket = io.connect( ); message = .getElementById( ), handle = .getElementById( ), btn = .getElementById( ), output = .getElementById( ), feedback = .getElementById( ); // Make connection var 'http://localhost:4000' // DOM var document 'message' document 'handle' document 'send' document 'output' document '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. btn.addEventListener( , { socket.emit( , { : message.value, : handle.value }); message.value = ; }); message.addEventListener( , { socket.emit( , handle.value); }) // Emit events 'click' ( ) function 'chat' message handle "" 'keypress' ( ) function 'typing' 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. io = socket(server); io.on( , (socket) => { .log( , socket.id); socket.on( , { io.sockets.emit( , data);}); socket.on( , { socket.broadcast.emit( , data); }); }); // Socket setup var 'connection' console 'made socket connection' 'chat' ( ) function data // Handling the chat data sent by frontend 'chat' 'typing' ( ) function data // Handling the typing data sent by frontend 'typing' 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. socket.on( , { feedback.innerHTML = ; output.innerHTML += + data.handle + + data.message + ; }); socket.on( , { feedback.innerHTML = + data + ; }); // Display Events 'chat' ( ) function data '' '<p><strong>' ': </strong>' '</p>' 'typing' ( ) function data '<p><em>' ' 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.
