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
Top comments (1)
Nice article Patrik. Pusher seems to be a good choice in terms of developing app with real-time data sync. :)