Bulding RTC app with React.js and Tokbox - part 1

UPDATE: This tutorial is no longer up to date (I haven’t looked into React for a while) - it’s just for reference.

Welcome to the first part of React.js tutorial where we will build application that allows user to communicate in real-time. In this episode we build our first component - text-chat.

Prequsition

In this tutorial I will use bower to install all dependencies, browserify for managing JavaScript modules, Bootstrap for basic styling and python’s SimpleHTTPServer module (python -m SimpleHTTPServer) to serve the app locally. I also have added path to local npm packages to my search path: export PATH="./node_modules/.bin:$PATH" and I also have .bowerrc file to download all libraries to ‘vendor’ folder (instead of ‘componens’):

Here is our .bowerrc file:

{"directory":"vendor"}

Motivation

Recently I’ve popped into React.js tutorial on Arkency blog. The library seemed powerful and simple at the same time so I decided to give it a shot.

The last application I build for my client is using OpenTok to support video and text-text communication. Initial version of the app was build using plain jQuery. I wanted to check if re-writing front-end part to use React.js can improve the code.

What does React.js do?

Before we move into the code, let’s look at the short description of React.js:

React - a JavaScript library for building user interfaces.

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it’s easy to try it out on a small feature in an existing project.

React uses a virtual DOM diff implementation for ultra-high performance. It can also render on the server using Node.js — no heavy browser DOM required.

React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.

React.js is just a library for building view layer it can be used with other JavaScript framework (like Backbone) easly. Because it’s using VirtualDOM it’s blazingly fast.

Setting up the app

Ok, so let’s start this tutorial off by defining our package.json file:

Now we should be able to preview our app in the browser with ability to create new messages.

Connect with OpenTok

To start using OpenTok we need to register a new account on TokBox website and create project for our app. After that we should receive our api key.

For purpose of this tutorial we will generate session id and token via TokBox admin panel. Credentials will be shared between all participants. Basically it means that all users will have the same access rights in our session.

On the real production app we should generate separate token for each user depending on their role in the system. If we want some kind of “room” system where users can create their own chats, we should also generate separate session ids.

Whenever session successfuly connect to OpenTok it will emit ‘connected’ event. Also when OpenTok session receive signal with ‘message’ type, our session object will emit ‘message’ event. We will subscribe to this event in the Chat component. Here is our updated version of Chat component:

When the component is rendered on the page for the first time we subscribe to the ‘message’ event (via componentWillMount callback) and we unsubscribe (via componentWillUnmount callback) from that event whenever the component is going to be destroyed.

The end

This finishes our first part of the tutorial. In the next part we will add video-chat.