My first real-time chat application

#pusher #react #node #aws

A few days ago, I started to think about the real-time application. In our company, we started to use Pusher for real-time notifications receiving and I thought, that I should try it to have a piece of knowledge about how it works.

I was thinking about the application subject, and I came to the conclusion, that the best real-time application example will be the application, where two separated users will see interactions of each other.

Choosing a technology

For my app, I chose NodeJS together with Pusher for the server-side part. Pusher also offers few products for developing back-end, like a ChatKIT, which is the platform to build in-app chat with nice and user-friendly interface.
For the client-side part, I chose to React, which is the Javascript framework.

Part 1. - server

For the server, I created a separated folder, with the necessary packages installed.

My server folder contains only three files: .env, package.json and server.js.

Writing a code

I used to help myself with tutorial by Pusher with very few changes. I put some code in there, which served on the GET request to pull all rooms from the database based on a specific user ID.

The reason was, that I needed to load all chatrooms in one request. In ChatKIT console, I had to create one user included in all chatrooms. His ID was used in a request to get a list of all created rooms at a client-side.

Added part of code in server.js:

app.get('/posts', (req, res) => {
    const { userId } = req.body;

    chatkit.getUserRooms({
        userId: userId,
    })
    .then(() => {
        res.sendStatus(201);
    })
    .catch((err) => {
        console.log(err);
    });
});

Part 2. - client

I do not need to explain how to do a ReactJs application. All the time, I was focused on the proper division of components.

This is not a large application. I decided to create one folder called components, where I have all UI controllers and elements. The second one is a folder named store. This folder is more important. I saved in there data at the highest level of application. I used React context API to have my own state management.

With this global state, I can manipulate application data from any part of the code.

store.js:

import React, { createContext, Component } from 'react';

const AppContext = createContext({
  user: null,
  room: null,
  setUser: () => {},
  setRoom: () => {},
});

export class AppProvider extends Component {
  setUser = user => {
    this.setState({ user });
  };

  setRoom = room => {
    this.setState({ room })
  };

  state = {
    user: null,
    room: null,
    setUser: this.setUser,
    setRoom: this.setRoom,
  };

  render() {
    return (
      <AppContext.Provider value={this.state}>
        {this.props.children}
      </AppContext.Provider>
    );
  }
}

export const AppConsumer = AppContext.Consumer;

Then I wrapped the main application component to created a store, or state, provider.

index.js:

const Application = () => (
  <AppProvider>
    <App />
  </AppProvider>
);

Deploying

Also, for the first time, I tried to use GitHub pages to publish my application in a few minutes. I was surprised at how fast and easy you are able to release application or web.

For the node server deploying, I can recommend Heroku as an available tool to testing your solutions for free.

Conclusion

That right - my application has not the most beautiful code syntax, refactored code or partitioning folders. But I wanted to know, that making of real-time application is not so difficult process as it seems to be like.

I was able to create a working real-time application within the possibilities with the minimum of used thirty part libraries and without unnecessary code.

DEMO: massoprod.github.io/mini-chat-app/
CODE: github.com/massoprod/mini-chat-app