This post isn’t heavy on React, so the core concepts should translate easily to other view frameworks like Vue and Angular. That said, for the rest of the post, I’ll assume you are using React or React-Native.
So you need to make your app respond to events from the server. Usually this is referred to as real-time, meaning you aren’t going to rely purely on the client to decide when to get data from the server, instead the server will stream data down to the client as it becomes available. Data gets pushed to the client from the server, instead of being pulled from the client.
This sort of model is perfectly suited for a variety of applications, for example chat, games, trading, etc. That said, more and more teams are adopting it for use cases where it’s not required for the product to work, but rather to make the product feel more responsive.
Regardless of what your reasons are, I think it’s safe to assume that you are reading this post because you are interested in seeing how to combine sockets and React to make your app more real-time.
This post will use a super simple example, where we publish the current time from the server socket, subscribe to it on the client and render the value as it gets updated.
Setting up the basics
To get started, I’m going to assume that you already have the basics installed like node and npm.
If you don’t have it already, you’ll have to install create-react-app to get started. This is easily done by running the following command to install it