From a long time, chat has always been one of the most important parts of any product. Whether consider a Personal messaging app, a customer service chat solution or a team management product like Slack
Finding a correct chat solution can be tricky as you will find a lot of tutorials for creating a chat in different technologies but they are hardly scalable.
You can go for pre-built solutions but most of them are paid or has a certain limit either in terms of scaling or flexibility.
If I have to give you a one-line introduction then Rocket Chat is an open-source alternative to Slack.
Now you can download their app on any platform and use it like Slack but the fact that its open-source gives it much more flexibility and one of them is that you can run your rocket chat server with complete admin control
The best part about it is that rocket chat provides you both the Rest and socket API for creating a robust chat app.
This means that you can use rocket chat as a chat server and build your Frontend client over it. And that is what we are going to do next.
If it’s not clear already let me again explain the general steps. We will
The First step in the process will be to install the Rocket chat server in your local machine. Below are the methods of running your rocket chat server on your local machines depending on the installed operating system
Its pretty simple to run it on Linux. Just install rocket chat using snap using the given link Rocket chat snap installation
The easiest way is to use docker-compose. Just install docker and docker-compose in your system and then follow the given steps
For windows, you also have multiple options
You can use anything in the frontend as long as you can make API calls and connect to a WebSocket server
As you can guess from the title itself, we are going to use react as the frontend client
I created a small React hook for natively connecting to a WebSocket server and named it in the most unique way possible ( useWebsocket … lol )
So without further ado, here is the complete hook
The code is pretty self-explanatory. But let me add some extra points
That’s it in the next part of this series we will understand the flow of Rocket chat and all the APIs required for connecting to the server.
Till then, Happy coding 😃