Web Sockets — Real-Time Goodness at Your Fingertips
We have all used chat applications at one time or the other. The magic of sending real-time messages is achieved through something called web sockets, especially on the web (as the name suggests). This is the magic sauce we will be using in our use-case. If I have to describe what web sockets is in simple layman terms, it would go something like this.
Web sockets is a network technology that enables two-way communication between a user’s browser and a server in real-time. Which is to say that you can send and receive messages/information without constantly having to hit the concerned API.
Enough talk already. Let’s dive in.
Less Talk, More Code
There are four sections to be addressed for the code part before we can see the application in-action. These are:
- Procuring Twitter Developer Application Credentials
- Setting up the server
- Configuring the client-side
- Witnessing the application come to life
Procuring Twitter Developer Application Credentials
Note: Twitter employs a review process when signing up for a developer’s account. There might be a series of emails you will need to exchange with the review team before you are set up.
You have your credentials. Time to spin up the server.
Setting up the server
In order to stream the twitter data on the server-side, we would require two libraries in particular — Twit (handles streams and connections to Twitter) and Socket.io (helps create socket connection on the server).
Go ahead and install them in your express application.
npm install --save twit socket.io
module and wrap our created server with it in
file. We call
and send in the socket module in it as an argument to be utilized.
route, we import the Twit library and initialize it with the credentials obtained from the application we had created in the earlier step.
for connecting to Twitter APIs. We start listening for a connection from the client and as soon as we get one, we create a consequent socket object.
function to listen to any event from the client-side and the
function to transmit any message/information back to the client. The
object itself uses its
function to listen for any incoming tweet and
basically helps start a stream in case it has been stopped during a session. You can dig deeper into Twit’s streaming API for more details.
That takes care of the server-side essential. Let’s get our client in order.
Configuring the client-side
library to create a socket connection on the client-side. There are three points in the code you need to focus on.
- We use
to connect to the server-side socket. The client will keep attempting to form a connection if it fails to connect at any point in time.
- The listen event is declared within
lifecycle function since it is triggered immediately after the DOM is mounted and is the ideal place to declare any generic listeners. It is done since we want the client to listen for any incoming tweet at all times.
function triggers the emit event which basically indicates to the server to start streaming twitter data to the application.
With that, you have your client set up for receiving the streaming data. I have avoided drilling into the styling manner and the components to display the incoming data. It is not relevant to the topic in question. But you can check out the code. I have kept it super minimal.
After all that work, it is time to see the magic.
Witnessing the application come to life
Server-side in place? Check. React all configured to spin up the sockets? Check. Popcorn in the oven? Um. It is time to run the application and see the result.
We have a twitter streaming application to the ready. Go ahead and play around with it. There are a lot of opportunities in which this feature can be leveraged, both from a business as well as a personal perspective.
Pssst. I am disclosing the source code here. Okay?
I came across this particular usage in my quest to create a data-analysis application that could track any tweet pertaining to certain social, environmental and political situations around the world in real-time. Emphasis on the word ‘real-time’. You can, of course, go ahead and incorporate this solution for any use-case you deem fit. There are still so many things we can do to massively improve the current implementation.
Web Sockets is a powerful tool and if you know how to use it properly you should actually end up enjoying yourself. Next up, I would be focusing on creating identifiers for each connection and tailor the events according to the need of every individual user.
Remember to use your code for good. Till next time. Peace.
Previously published at https://medium.com/@tarique_ejaz/web-sockets-streaming-tweets-in-real-time-with-no-fuss-fcb4749c2078