We are living in an age where data is considered to be more valuable than oil itself. Given that statement, any tool or mechanism that could help us mine and analyze data becomes a powerful resource to get your hands on. Data by itself has the potential to understand the universal behavior of people and assist businesses to design better use-cases. One such rich vein of data-source is and the data we can get from it concerning any particular topic is fascinating. Not to forget, one more thing which we would be exploring in this article is that we would be fetching data in real-time. Yes, you heard me right. We would be doing so in real-time. Twitter 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. If you wish to know more about it. You can learn about it . Along with it, we would be using React as our client and Node with Express for our server. here 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 Before we can start writing any actionable code, you should go ahead and sign in/sign up at the site. Once you have done so, you can create a new personal application . You will obtain your credentials from there. Copy it somewhere, maybe on a notepad, to keep it handy. Twitter Developers here 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. Note: 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 — (handles streams and connections to Twitter) and (helps create socket connection on the server). Twit Socket.io Go ahead and install them in your express application. npm install --save twit socket.io Having installed the required dependencies, it is time to call the 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. socket.io ./bin/www tweetsRoute In route, we import the Twit library and initialize it with the credentials obtained from the application we had created in the earlier step. tweets We have reached the fun part of the application. The part where we start reading from twitter and emit the tweets obtained to the client designed. The code is pretty straightforward. Using the Twit object initialized we create a 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. stream We primarily use two functions from the socket object. The 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 API for more details. on emit stream on stream.start() streaming That takes care of the server-side essential. Let’s get our client in order. Configuring the client-side Compared to the server, the client is relatively easier to get in shape. We will be using library to create a socket connection on the client-side. There are three points in the code you need to focus on. socket.io-client 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. socket.io-client 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. componentDidMount() The function triggers the emit event which basically indicates to the server to start streaming twitter data to the application. startStreaming() 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? https://github.com/tarique93102/article-snippets/tree/master/sockets-twitter-app Wrap Up 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 . 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. ‘real-time’ 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. Web Sockets If you have any queries or feedback, feel free to drop them in the comments section or you can reach out to me on . LinkedIn 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

Initialized

Super

Twitter

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

ExpressJS And Web Sockets: Streaming Tweets in Real-Time Without Any Problems

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Creating A Chatbot Using Socket.io, API.AI and Web Speech API

How to Build A Well Structured 3-tier Architecture (MERN Stack - ES6) [Step-by-Step Guide]

A Guide to Deploying Phaser 3 Webpack Games to Heroku

An overview of frontend and backend interaction

Authentication Middleware in Express Gateway using JWT

Creating A Chatbot Using Socket.io, API.AI and Web Speech API

How to Build A Well Structured 3-tier Architecture (MERN Stack - ES6) [Step-by-Step Guide]

A Guide to Deploying Phaser 3 Webpack Games to Heroku

An overview of frontend and backend interaction

Authentication Middleware in Express Gateway using JWT

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps