My first real-time chat application
Tags: pusher, react, node, aws
Published: 2019-10-14 19:30:04

A few days ago, I started to think about the real-time application. In our company, we started to use [Pusher](https://pusher.com/) 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](https://pusher.com/) for the server-side part. [Pusher](https://pusher.com/) also offers few products for developing back-end, like a [ChatKIT](https://pusher.com/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](https://pusher.com/tutorials/customer-service-chat-react) by [Pusher](https://pusher.com/) 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](https://pusher.com/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:**
```react
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](https://reactjs.org/docs/context.html) to have my own state management.

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

*store.js:*
```react
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:*
```react
const Application = () => (
  <AppProvider>
    <App />
  </AppProvider>
);
```

# Deploying
Also, for the first time, I tried to use [GitHub pages](https://github.com/tschaub/gh-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](https://www.heroku.com/) as an available tool to testing your solutions for free.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/p5stboiub9egeibn8vnr.png)


# 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/](https://massoprod.github.io/mini-chat-app/)
**CODE:** [github.com/massoprod/mini-chat-app](https://github.com/massoprod/mini-chat-app)