DEV Community

How to make realtime APIs with NodeJS and ReactJS using Socket.io

Omar Elwakeel on August 25, 2021

We all love design patterns, and we all wonder when it's best to use them, I'm going to use one of them to apply one business case that you might...
Collapse
 
ravavyr profile image
Ravavyr

It's a good breakdown, but I find some issues with it.

It has some bells and whistles, eg. you didn't really need to add the database though it's a nice touch, but it is missing the important bells and whistles, like HTTPS instead of HTTP [setting up an ssl with LetsEncrypt is pretty easy these days], also validating the data sent to your server, and logs for catching bots/anyone trying to abuse it, and also how do you validate communications are not being intercepted.

All in all you did a pretty good explanation and showed how server and client side are connected. This part always confuses newbies.

Granted some of these items require longer discussions and your tutorial is already quite long, they at least deserve to be mentioned, AT THE LEAST, HTTPS since SSL/TLS is a requirement not a luxury nowadays.

Collapse
 
omardiaa48 profile image
Omar Elwakeel

Thanks for notifying me, I will look further in these topics and might post another one focusing on those items

Collapse
 
alexlowe profile image
Alex Lowe

I would argue that SSL/TLS is not required for the scope of this tutorial. There are plenty other ones that show you how to add it to your nodejs application or using a proxy to do so.

Collapse
 
ravavyr profile image
Ravavyr

Newbies don't know this. It should at least mention it and use an SSL secured url by the end. HTTPS is vital [mainly because you don't get that fancy lock icon and clients go apeshit if you don't have that lol], but in all seriousness it's not something that should be overlooked. At least link to another tutorial that shows how to do it for this specific stack since that can vary too.

Collapse
 
jnicnvr profile image
John Nico Novero

thanks man it helps a lot

Collapse
 
arsprogramma profile image
ArsProgramma

A really nice straighton example without bells and whistles.
Just the way i like it. Great work!

Collapse
 
omardiaa48 profile image
Omar Elwakeel

Thanks, It really means alot

Collapse
 
dhirajpatra profile image
Dhiraj Patra

Beautiful. I have created whole end to end application for truuth.id for their Liveness product.
I have used socket.io in both front end JS and back end with Python Flask. AWS Lambda, ECS, Farget, ALB and some more tools.
Perfectly working. Only glitches is AWS Socket API gateway does not support socket.io yet. As socket.io use both socket and http connection to make full duplex channel for stream and messages.
Any way will try your nodejs based this tutorial as well.
Wish you all the best. Thanks

Collapse
 
vishwakarma09 profile image
Sandeep Kumar

clear and easy

Collapse
 
omardiaa48 profile image
Omar Elwakeel

Thanks for saying that :)

Collapse
 
rancy98 profile image
rancy98 • Edited

a good idea, but if my backend use another lanuage, how to do

Collapse
 
omardiaa48 profile image
Omar Elwakeel

it depends, some other frameworks like .NET uses SignalR, but I prefer Socket.io, any ways how to set it up will be very similar, just syntax differences but not concepts

Collapse
 
abhijeetshikha1 profile image
Abhijeet Shikhar

Please share GitHub link

Collapse
 
omardiaa48 profile image
Omar Elwakeel
Collapse
 
saroj8455 profile image
Saroj Padhan

Great

Collapse
 
omardiaa48 profile image
Omar Elwakeel

Thanks

Collapse
 
stakutis profile image
stakutis

I think it is great. Simple. For people that are relatively senior (like me) that know node and express and react well and simply want to know/see socket-io in the mix. Great.

Collapse
 
batuhanbilginn profile image
batuhanbilginn

Thanks for the article 👌

Collapse
 
karan171996 profile image
Karan

I thought in new version of socket.io we do not need to define the transport layer to be polling I guess, please correct me If I m wrong, because I saw the query params have the transport polling by default.

Collapse
 
omardiaa48 profile image
Omar Elwakeel

you can set it from the client to match the server, or change what the server is waiting for which is the default, I need to investigate the major differences between them, but I couldn't find much difference.

Collapse
 
sikandarmaalik profile image
sikandarmaalik

Hi, I need help for the last section of using postman to make a post to the server on port 5000 to add an order. What is the HTTP link I need to use in postman and how is the JSON object structured to POST?

Collapse
 
bkoiki950 profile image
Babatunde Koiki

Nice! Thanks for putting this out. You can also set the language for the code for better markdown code formatting

Collapse
 
omardiaa48 profile image
Omar Elwakeel

Sure, thanks for telling me

Collapse
 
cb86at profile image
Christian

Awesome, thanks for sharing!

Collapse
 
omardiaa48 profile image
Omar Elwakeel

Thanks!!

Collapse
 
__aravind___ profile image
Aravind

Where can we use this api?

Collapse
 
bkoiki950 profile image
Babatunde Koiki

If you clone the 2 repos, you can run both apps and you should be able to use it, you can set what client can be connected to the server in the origin field when declaring the io object.