How to create a realtime app using Socket.io, React, Node & MongoDB
Ever wondered how real time apps are built? Ever noticed the importance and use cases of real time applications?
If you are curious about the above questions and need an answer, then this blog post is for you.
First, let’s identify a few use cases needing real time applications:
- Getting location updates for your cab on a map of a cab booking application.
- Getting new messages instantly on your favourite chatting application.
- Food order info update to the kitchen of your favourite restaurant.
These all are the common scenarios of our day to day lives where we can’t tolerate a delay in the updating of information and hence need real time communication.
Technologies which can be used for realtime communication are:
- Short Polling: AJAX, creates heavy traffic.
- Long Polling: Like AJAX, but the server holds on the response until it has an update. After receiving it, the client sends another request, and needs additional header to be traversed back and forth causing additional overhead.
- Web Sockets: make it possible to open interactive communication between the client and server. One can send a request to the server and receive event driven responses without Polling the server for a reply, making web sockets a best choice for our use case.
More in-depth info about the above three technologies can be read here.
We will be learning to create a real time application by covering the following scenario.
Imagine you are sitting at your favourite restaurant and have a digital menu. You place the order and the kitchen gets updated regarding your order in real time. When the kitchen is done with the order, they update it in real time too.
Features in detail:
- Place Order: Interface to select the quantity and place the order for a selected food item to the kitchen.
- Kitchen: Interface which can be opened across multiple kitchens and updates in real time the chefs and cooks regarding the total orders created and predicted quantity of food items, giving them the flexibility to update it. Also has a functionality to download the report in the form of an excel sheet.
- Change Predicted: Interface to update the predicted quantity of food items.
