Web Sockets: Stream Tweets in Real-Time With No Fuss
Build your own real-time Twitter client

We’re living in an age when data is considered more valuable than oil.
Given that statement, any tool or mechanism that can help us mine and analyze data becomes a powerful resource. Data can help us understand the universal behavior of people and assist businesses to design better use-cases.
One rich vein of data is Twitter. The data we can get from there, on any topic, is fascinating.
One more thing: We will be fetching data in real-time.
Web Sockets — Real-Time Goodness at Your Fingertips
We have all used chat applications. The magic of sending real-time messages is achieved through something called web sockets. This is the magic sauce we’ll be using in our use-case. If I had to describe what web sockets are in simple layman terms, I’d say 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, you can send and receive messages/information without constantly having to hit the API.
If you want to know more you can learn about them here. Along with web sockets, we’ll be using React as our client and Node with Express for our server.
Enough talk — 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:
1. Procuring Twitter developer application credentials
2. Setting up the server
3. Configuring the client-side
4. Witnessing the application come to life
Procuring Twitter developer application credentials
Before we can start writing any actionable code, you should sign in or sign up at the Twitter Developers site. Once you’ve done that, you can create a new personal application here. Obtain your credentials from there and copy them somewhere to keep them safe.

Note: Twitter employs a review process when signing up for a developer’s account. There might be a series of emails you need to exchange with the review team before you’re set up.
You have your credentials — it’s time to spin up the server.
Setting up the server
In order to stream the twitter data on the server-side, we require two libraries: Twit (handles streams and connections to Twitter) and Socket.io (helps create the socket connection on the server).
Install them in your express application:
npm install --save twit socket.ioHaving installed the required dependencies, it’s time to call the socket.io module and wrap our created server with it in the ./bin/www file. We call tweetsRoute and send in the socket module as an argument to be utilized.

In tweets route, we import the Twit library and initialize it with the credentials obtained from the application we created earlier.

We’ve reached the fun part of the application, where we start reading from twitter and emitting the tweets obtained to the designated client.
The code is pretty straightforward. Using the Twit object initialized, we create a stream 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.
We primarily use two functions from the socket object. The on function to listen to any event from the client-side and the emit function to transmit any message/information back to the client. The stream object itself uses its on function to listen for any incoming tweet and stream.start() 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 essentials. Let’s get our client in order.
Configuring the client-side
Compared to the server, the client is relatively easy to get in shape. We will be using thesocket.io-client library to create a socket connection on the client-side. There are three points in the code you need to focus on:
- We use
socket.io-clientto 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 the
componentDidMount()lifecycle function, since it’s triggered immediately after the DOM is mounted and is the ideal place to declare any generic listeners. It’s there because we want the client to listen for incoming tweets at all times. - The
startStreaming()function triggers theemitevent which basically indicates that the server should 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’s not relevant to the topic in question. But you can check out the code — I’ve kept it super minimal.
After all that work, it’s 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 ready? It’s time to run the application and see the results!

We have a Twitter streaming application!
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.
Here’s the source code!:
Wrap Up
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.
This was part of 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 words “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 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 will focus on creating identifiers for each connection and tailoring events according to the needs of each individual user.
If you have any queries or feedback, feel free to drop them in the comments section.
Remember to use your code for good. Until next time — peace!.

