Building a text chat for Android and iOS with OpenTok React Native

As you may know, we recently announced an OpenTok Labs solution for adding live video and messaging to your React Native application. In this post, we’d like to take a deeper look at how to use the OpenTok Signaling API to build a text chat application with React Native.

OpenTok Signaling API

The OpenTok Signaling API allows developers to send messages from one OpenTok endpoint to another. One of the most common use cases for the Signaling API is a text chat. Below, we’ll walk through how to build a text chat for both iOS and Android applications using React Native.

OTSession Component

The OTSession React Native component allows you to connect to an OpenTok Session, set session event handlers, and send signals. You can connect to the session by using your API Key, Session ID, and Token which generated by the OpenTok Server SDK or in your TokBox account dashboard. This information will be passed to the OTSession using the following props:

• apiKey
• sessionId
• token

Props are a way to pass data into a React component so the component can utilize the data to render a customized component. Similar to the credentials, you can pass the signal information using the signal prop. The signal prop takes in an object with two keys, type and data, both of which have a string type.

Using the information above, our OTSession component will look like the following:

<OTSession 

    apiKey=”your-api-key” 

    sessionId=”you-sessionId” 

    token=”your-token” 

    signal={

        {

            type: ‘signal’,

            data: ‘some random message’,

        } 

    }

/>

Session Event Handlers

Now that you have a way of sending signals, you can pass in session event handlers to listen for any incoming signals. To do so, let’s create an object called sessionEventHandlers where we listen to the signal event. In our case, we are only listening to the signal event, but you can choose to listen to other session events as well.

sessionEventHandlers = {

    signal: (event) => {

        // We can use event.data to get the message that we recieved.

    },

};

We can now use this object and pass the event handlers into our OTSession component along with the credentials and signal information. 

<OTSession 

    apiKey=”your-api-key” 

    sessionId=”you-sessionId” 

    token=”your-token”

    eventHandlers={sessionEventHandlers}

    signal={

        {

            type: ‘signal’,

            data: ‘some random text message’,

        } 

    }

/>

Sending Additional Signals

Now that we’ve set up how to send and receive signals, we want to be able to send multiple signals. We can do this by passing the signal information to the signal prop again. Behind the scenes, the OTSession component watches for updates to the props so each time we update the signal object, a new signal will be sent. To use this effectively, we can utilize the setState method that React provides.

Lastly, we want to be able to distinguish from the signals we send from the ones we receive. To accomplish this, we can compare our connectionId to the connectionId that is associated to the signal event. The OTSession component has a method called getSessionInfo() which has important information about the session such as the session ID, conection ID, connection data, and connection creation time. Using Refs, we can expose the getSessionInfo() method like so:

<OTSession ref={(instance) => { this.session = instance; }} />

This sets session to the OTSession instance where we can call methods available in the OTSession component. Keep in mind that it’s not recommended to use this imperative style of exposing methods in React unless you can’t do it declaratively.

Keeping track of the conversation

Now that we’re able to distinguish between incoming and outgoing messages, we would like to keep track of all the messages. We can do this by initializing an empty array called messages and update it each time we send or receive a signal.

Since we have all of the information we need, we can now update our sessionEventHandlers to look like the following:

sessionEventHandlers = {

    signal: (event) => {

        const myConnectionId = this.session.getSessionInfo().connection.connectionId;

        const oldMessages = this.state.message;

        const messages = event.connectionId === myConnectionId ? [..oldMessages, { data: `Me: ${event.data}`] : [..oldMessages, { data: `Other: ${event.data}`];

        this.setState({

            messages,

       });

    },

};

We use the spread operator above to create a new array of messages so we don’t mutate the existing state.

After setting the logic, we can use the following React Native UI components to render the text chat view:

• TextInput
  • Used for an input box to show the message that you’re typing
• Button
  • Used for sending the message
• FlatList
  • Used to display the outgoing and incoming messages

To see all this in action, please check out the OpenTok React Native Signaling sample. Now you know how to build a text chat app, why not sign up for my React Native webinar on April 11th to learn more? Sign up here:

Register for Webinar

The post Building a text chat for Android and iOS with OpenTok React Native appeared first on TokBox Blog.