Real Time Twitter Stream Component Using Node, Express, Socket.IO, and React on the client.

Friday, August 21, 2015

Introduction

So where I work, we have a large legacy app that we would like to modernize without have to rewrite the entire application from scratch. We have been looking at the React framework because as there site states, "you can try it out on a small feature" and it won't impact the rest of your application. It also helps that it was developed and supported by the team at Facebook.

If you are not familiar with React, it is another client side framework, developed by Facebook, but unlike Angular, Ember, etc, React only focuses on the "View" portion of your MVC application.

What's a Virtual DOM

React uses what they call a "virtual DOM" to interact with DOM elements, so when you as developer are working with React, you actually never get a direct reference to a DOM element, but instead you write JSX code which is very similar to HTML and then React manages the interactions with the DOM for you.

This is where React really shines, because they optimized the interaction to be really fast. So whatever changes you want to make to the DOM, you make the changes in the JSX code, and then React figures the fastest possible way to make the changes to the DOM behind the scenes.

The Stream with Node, Twitter, and Socket.IO

I have discussed building a realttime stream before using Node, so I won't  go into too much details there, but here I will say that this time I am using Socket.IO and since Twitter has real time streaming APIs, I decided to use that for streaming purposes.

 

The above code is pretty straight forward. I am using Express to handle starting up the Node application, and then I have brought in two node packages (Socket.IO and Twitter). So once the application starts, I then kick off Socket.IO to start publishing on a socket and then I kickoff Twitter to start listening for tweets that have the word "JavaScript' in it.

Note: for obvious reasons I did not check in the twitter.js file in the secret folder but basically it is the following. You just need to supply your own Twitter credentials. You can set that up on their application site.

The Client Side

On the client side I am then listening for the stream of tweets via Socket.IO and when a tweet comes in I am firing off a callback function that will update the list of tweets.

The React Code

I have broken my React code into three different files for demo

Twitter-Feed Component

The fist file is parent file and it contains the starting point where React is going to take over the DOM and inject my code.

Since in React, you are building components, the basic way do that is to call the React.createClass function. Inside that function you can set several properties as well as add your own properties to create the component.

Ultimately, once a component is built, I then call the React.render function which takes two parameters (the parent component, and in this case, the DOM element I am attaching the component to.

The properties in my TwitterFeed class are as follows:

  • getInitialState: this property takes a function that allows you set the initial state of properties I am going to use. In my case I have a tweets array. It is recommended that this property only be called in your parent component.
  • addTweet: this is a function I created to add a tweet to the tweet list and then setting the state. The state is what React uses to pass data from one component to the other. It is recommended that only the parent component can change the state. All child conponents are immutable and only listen for changes made by the parent.
  • componentWillMount: this is a React event that fired right before the component is rendered. There are various event similar to this one like componentDidMount which fire immediately after the component is rendered.
  • render: this is the function the renders the final HTML to the DOM. Inside this render function I am calling the child component TwitterList and passing that component the tweets array from the state. The second parameter is where in the DOM you want the component to be attached to.

Twitter-List Component

This component takes the tweets from the parent Twitter-Feed component and create the DOM container which is a DIV and then makes a call to its child to create a single tweet component.

This components gets the tweets from the parent via the "props" object.

Also note that am calling a propTypes property. This is useful as it sets the expectation of what type of data it expects. When this is set and you don't pass in the correct data to the component, React will send a nice error explaining what went wrong in the console.

Tweet Component

The final child component builds the single tweet row. It is passed the tweet from the parent Twitter-List component

The Final Result

Obviously I need to work on the presentation a little bit but when the tweet list is automatically being updating realtime as the tweets are being made.

Live Twitter Stream

I have uploaded the code to GitHub, so take a look and let me know what you think. 

comments powered by Disqus