In the previous part we discussed the creation of backend for messaging app. This time I would like to describe how to connect frontend with our backend. Step by step will cover every endpoint by adjusting adequate action for them and finally, present how it works.

This is the second part of Simple chat app with React Native :

• Creation of backend for messaging app
• Fullstack — connecting backend with frontend

What tools do we need?

Once more we need to answer this question. Surely, a tool for the state management is our must have. Why? Conversations and messages are changing constantly, therefore a tool which will help us control the application state is necessary. My first choice was Redux, which manages state through a single JavaScript object, known as a data store, where all of our application’s state is located. We simply have to install redux with the React bindings:

yarn add redux react-redux

Did you hear about Gifted Chat? It’s pretty cool complete chat UI for React Native, which will make displaying messages so much easier. Let’s add it to dependencies:

yarn add react-native-gifted-chat

Connecting to the Socket.IO server

Socket.IO provides bi-directional communication in realtime and works perfectly for chat based applications. What is the biggest advantage of using it? We don’t have to involve polling the server for changes, because server immediately will get a message and push it to connected client.

The Socket.IO server we created recently is listening to the ‘connection’ event, which is automatically sent by the client. Our task is to send the user id as init message, so that server can identify the user the socket is connected to.

Let’s also add a listener for the ‘message’ event on the server which receives messages from the client and creates a message object to store in the database.

Actions, reducers and store … so Redux

Firstly, we need to define createConversation action. According to official documentation actions are:

Payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().

Let’s dive into code represents creating conversation:

The action is calling for a specific endpoint, in this case, it’s /conversation . The data that is sent is friendId, so in the conversation are kept two ids: conversation and friend.

Because of redux-thunk middleware, we are able to dispatch action when we get the response. In a case when a response doesn’t include an error, createConversationSuccess() action is dispatched sequentially with navigating to conversation chat view.

Reducer’s job is to specify how the application’s state changes in response.
When conversation creation is successful, the returned value is an array of conversations, which are spread and overwritten by action payload, so action.conversation. Simultaneously currentConversationId is set on action.conversation.Id

Creating a message is much simpler. It’s typical action from action creator. What does it mean? Just that action creator is a function which returns an action.

In our example function is called sendMessage and returns action type ‘SEND_MESSAGE’. The function accepts two arguments, where the first- conversationId is needed to identify a destination for second — message.

We are following optimistic update approach likewise WhatsApp does, which means that a message is immediately appended to conversation before server responds. If it fails, we should display an error and give the user an opportunity to retry his request.

Similarly as before, state is changing in reducer and the result is message added to the exact conversation.

At this stage, we are ready to load created conversations and sent the messages. The actions for them are very similar. The differences are:

• an endpoint for which action is dispatched
• passed argument (conversationId) that is needed only in receiving messages action.

How should the state change in reducer? Obviously, it will return state with all messages for given id.

Store is a perfect place for holding the whole state tree of chat application. It’s worth to split reducing function into separate functions as well and then use combineReducers which is passed to createStore.

It would look like:

const reducers = combineReducers({
  user,
  friends,  
  conversations,
  messages,
  error,
})

const store = createStore(reducers, applyMiddleware(thunk));

Time for a little chat

Our logic is ready, so let’s create the containers for displaying conversations. Most likely we need to prepare two views:

• user account panel with friend list with whom we are messaging and option to add mate to chat,
• chat window for texting a message.

It’s time to tackle the main view called UserAccount, where have to connect states from reducers and redux action. Here’s how it will look like:

To receive user’s friends and all conversations will dispatch two actions inside lifecycle method componentDidMount(). This approach ensures us, that data won’t be loaded until after the initial render and is fetched only from the client.

componentDidMount() {
  this.props.onLoadFriends();
  this.props.onLoadConversations();
}

So what happens to the other two actions? Let me explain it, but first look at the code below:

FriendList is a styled FlatList which renders a sorted array of friends, where a single friend is an object with _id and fullName. Tapping on friend item calls the onSetCurrentConversationId() function and navigates to chat view when the conversation has been started or otherwise will create new conversation by firing onCreateConversation().

ConversationChat is a view for texting a message, so the most appropriate place to connect sending and loading messages. I think, you are already familiar with it, but just in case check the code snippet:

Once again within componentDidMount() we are dispatching action- this time onLoadMessages().

componentDidMount() {
  this.props.onLoadMessages(
    this.props.navigation.state.params.conversation.id,
  );
}

I hope that you are still following, because it’s the time for implementing onSendMessage() action! Let’s start it by creating a function wrapper inside, where we will be sending the ‘message’ event to the server. At the same time, we can update redux state. Then close the function with firing the action.

The last step is to use GiftedChat where we pass the following props:

• messages as an array of messages to display,
• onSend as a callback when user is sending a message,
• user, which is just user’s id.

How does it work?

I hope you enjoyed this article 👏🏼 and creating simple chat app is easier for you now. Everything you read today can find inside an friendChat app.

Luke.

Simple chat app with React Native — Part II was originally published in Callstack Engineers on Medium, where people are continuing the conversation by highlighting and responding to this story.

At the beginning of my journey with React Native, building a chat app was a challenge for me. I thought that application development would be complicated and time-consuming. I couldn’t be more wrong! I’ve started acquiring knowledge that I needed to make simple chat app, then created a repository and it just happened!

I want to share with you what I have learned over the course of past months in series that consists of the following topics:

• Creation of backend for messaging app
• Fullstack — connecting backend with frontend (December)

What tools do you need?

First of all, we need a server. I have decided to use Hapi.js. Now, if you haven’t heard of it before, it’s a declarative configuration-centric framework. What does it mean? Unlike Express.js, which relies heavily on the concept of middlewares, Hapi.js gives you an opportunity to pass the configuration object that describes your route hierarchy.

Here’s how a typical setup would look like:

const Hapi = require('hapi');

const server = new Hapi.Server();
server.connection({ port: 3000, host: 'localhost' });

// route configuration as an object
const routes = [
  {
    method: 'GET',
    path: '/',
    handler: function (request, reply) {
      reply('Hello, world!');
    },
  },
  {
    method: 'GET',
    path: '/{name}',
    handler: function (request, reply) {
      reply(`Hello, ${request.params.name}`);
    },
  }
];

server.route(routes);

server.start((err) => {
  if (err) {
    throw err;
  }
  console.log(`Server running at: ${server.info.uri}`);
});

What’s great about this approach is the ability to describe the endpoints your application supports and an opportunity to reuse it across your different projects.

Let’s start by adding Hapi.js to our dependencies:

yarn add hapi

NOTE: You can use npm instead.

Next, we need a database to store our users and their conversations. I chose MongoDB. Thanks to being NoSQL, it’s structure is similar to JSON objects, which makes it easy to navigate through the data. To define the schema for documents, we will use object modeling tool called Mongoose.

It’s necessary to install Mongo:

yarn add mongodb
yarn add mongoose

And finally, we will need Socket.IO, which is a library that helps you to work with WebSockets. We will use it to implement real-time communication with our server, including receiving and ending data to connected sockets.

yarn add socket.io

Setting up

Let’s create a server based on Hapi.js. It allows us to handle http protocol and Socket.IO. Next step is to listen to ‘connection’ event, which is automatically sending by the client. Then on ‘init’ assign to socket sending user’s id from sockets object. Now, we just listen to ‘message’ event that is sent from the client when the user sends a message. The message is directly transferred between two defined sockets. Simultaneously, when the app is closed, the ‘disconnect’ event is fired.

Every endpoint needs its own route with a specific handler, so we need to define it. The route could be something like:

server.route({
    method: 'POST',
    path: '/conversations',
    handler: handlers.createConversation,
    config: {
      auth: 'jwt',
      validate: {
        payload: {
          friendId: Joi.string().required(),
        },
      },
    },
  });

Conversation or message?

At this stage, we need to catch the difference between conversation and message. Conversation is a container for messages (has a reference to the message model) being sent between two users.

{
  userOneId: String,
  userTwoId: String,
  messages: [{
    type: mongoose.Schema.Types.ObjectId,
    ref: 'Message',
  }],
}

Message model object should be similar to the one below:

{
  text: String,
  createdAt: {
    type: Date,
    default: Date.now,
  },
  userId: Object,
}

Create a converations as a first handler

I’m sure you have noticed that first handler has to be responsible for creating conversation. Let’s dive into it. First, you need to make sure that there has been no conversation between the two users yet. Creating a conversation includes adding new conversation object to the database for two messaging users. It looks easy! But is it really? Take a look at more handlers.

… and more handlers

The container is ready for an initial message. To create it, we need to find a proper conversation by an id, which is sent from a client in message property. Then, we are able to create a textMessage, save it and push to the messages array as a part of a conversation model.

What should we do next? Imagine a case when your user starts a conversation, sends a new message and closes the app. Suddenly, he realizes he forgot to mention something important, so he re-opens the app… and gets confused: there is no conversation and no messages. Don’t worry, they’re not lost — they still exist in the database, waiting to be loaded. Naturally, we expect only a conversation with the chosen friend to load, so we need to distinguish two ids and reply the proper one extended with conversation id.

Closing the app’s backend, we need to implement the last handler related to loading messages for a given conversation id.

Hooray, we’re done and our backend is set! 🎉

If you’re interested in how to connect our work with frontend — make sure to follow this series, because there’s another article coming up in December. Everything you read today, you can check out in my repo. Enjoy!

May the force be with you…

Luke.

Simple chat app with React Native — part I was originally published in Callstack Engineers on Medium, where people are continuing the conversation by highlighting and responding to this story.