Web Sockets: Stream Tweets in Real-Time With No Fuss

Build your own real-time Twitter client

Tarique Ejaz
Jan 27 · 6 min read
Photo by Pietro Jeng on Unsplash

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

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

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

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

Install them in your express application:

npm install --save twit socket.io

Having 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.

Server: Call socket.io and pass it to the tweetsRoute

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

Server: Create a Twit instance with the obtained credentials

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.

Server: Set up socket and stream to start listening and responding to events

That takes care of the server-side essentials. Let’s get our client in order.

Configuring the client-side

  • We use socket.io-client 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 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 the emit event 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

And IT’S alive!

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

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!.

Better Programming

Advice for programmers.

Tarique Ejaz

Written by

I code, read, write and simply aspire to be a better individual than the one I am today.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade