Real Time with React.js and Socket.io

Update: Found these great articles on React.js. Wish I read them before I started my project! It would have made me feel a lot less depressed that I was taking such a long time to pick up the concepts of React!

ReactJS for Stupid People
Flux for Stupid People

As I briefly mentioned in my previous post, I was slightly too gung ho in choosing my second project: Twitterment. The idea behind Twitterment is that it’s an app that allows brands to view the Twitter sentiment around their brand keyword on a dashboard.

Problem 1: I was really attracted to the concept of having a real-time updating app, so that drew my attention to Twitter’s streaming API. I found out quite painfully though, that real-time I/O is not so simple to work with (at least, we didn’t learn about how to deal with real-time). Problems started to arise when I tried to make server-side AJAX requests to Twitter’s stream. I soon found out that once I send a server response from my Node server back to the client, I can’t keep pushing new Twitter stream data to the client.

Problem 2: I also tried to gather Twitter stream data into an array and send chunks to the client, but then I came across another performance issue where I was constantly repainting the DOM when I wanted to update the refreshed list of Twitter data. Yup, trouble.

So with a bit more research I realized that a possible solution to work with real-time stream data was to use Socket.io, and React.js could help solve some performance issues with frequent DOM updates.

It took me a painful 2 weeks to learn the basics of React.js and Socket.io, and refactor my app to implement both of these technologies. I say painful because I felt like I was making no ground for two weeks, while my classmates were hacking away – I had a couple of moments where I wanted to just trash the whole project and do something more straightforward!

Anyways. Drama aside – React.js and Socket.io is actually really interesting to work with, now that I’ve gotten a better idea of how these technologies work.

Socket.io essentially works by adding event listeners to an instance of my Express (Node) server, and adding a global socket variable that acts as an EventEmitter-like object on the client. So what I can do is attach a listener to trigger when certain events are emitted from my server (aka. run a function to update my list of Tweets on the client when the server receives new data from the Twitter stream!)

Even more cool is that both the server and client’s Socket object act as EventEmitters, so I can emit and listen for events in a bi-directionally (aka. If I can send a search keyword to the server, to track on Twitter’s stream). Beautiful! That takes care of sending and real-time data between my server and the client. Problem 1 solved. whew! =)

React.js is another library that provides a way to create interactive, stateful & reusable UI components. React uses a “Virtual DOM” that selectively renders nodes based upon state changes, while doing the minimal amount of DOM manipulation to keep my components up to date. Essentially, React uses a “diffing” algorithm to identify what has changed, and then goes through a process of “reconciliation” to update the actual DOM with the results of diff (aka. When I have new Tweet added to my array of Tweets, only the new Tweet will be rendered onto the DOM, instead of the whole list! Sounds exactly like what I need to solve Problem 2!).

Well, that’s the story so far. As you can see in the screenshot below, I’m still in the process of coding out this app, but the Twitter Stream is real-time and fully functional using React.js and Socket.io! Stay tuned or follow along on my GitHub repo: https://github.com/duncanleung/twitter-sentiment

twitterment-stream

Duncan Leung

Front End Developer at iHerb.com

Irvine, CA

Subscribe to Duncan Leung: Javascript and Front End Development

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!