Setting up Socket.io with Express JS and React to get real time data

So you’re building something that requires real-time data — Socket.io to the rescue. We’ll get over some of the setup hurdles so you can continue building your master-piece… in peace.

Photo by Stephen Phillips — Hostreviews.co.uk on Unsplash

I’ll keep this short and simple.

Let’s take this scenario for example. You’re building a React app that tracks Earthquakes in real-time. The app is to have a map section and a table-feed section which couple together to show updated earthquakes every hour around the globe.

So you decide to use React for the UI, Express for the server and you need some tool to help you get the earthquake data from your fetch call inside your server.js file to your front-end, so you can display them inside your map and table-feed.

You COULD do a post / get from your server to the client/front-end, but that would get messy with time and is totally unscalable, specially if you want some sort of bi-directional, real-time data flow. So you decide to go with Socket.io because it allows exactly that.

Now let’s get to the actual setup:

Cut away all the fluff in our React setup and we see that we have only 2 files that we are working with to get this up and running: server.js and feed.js