Introduction

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.

Introducing Rocket Chat

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.

Overview

If it’s not clear already let me again explain the general steps. We will

1. Run our Rocket chat server on localhost
2. Connect and interact with that server using React

Running a Rocket Chat Server

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

Linux

Its pretty simple to run it on Linux. Just install rocket chat using snap using the given link Rocket chat snap installation

Mac OS

The easiest way is to use docker-compose. Just install docker and docker-compose in your system and then follow the given steps

1. Just create a file named docker-compose.yml and copy the content of this link Rocket chat docker-compose file into the newly created file
2. run the command docker-compose up -d from the same directory where you created the file
3. It will automatically fetch the latest docker image for rocket chat and then run it
4. You can view the docker container running in the docker dashboard

Windows

For windows, you also have multiple options

1. You can run docker just like mac os if you have windows professional install
2. You can also run Ubuntu using VMware and then install rocket chat using the steps given above

Creating a custom hook

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

1. We created a state variable connected to represent the state of the connection with the rocket chat server
2. We are using ref instead of state for storing the WebSocket object because ref does nor trigger a re-render on change like the state does
3. Some tasks are needed to be performed in the onopen handler that’s why we left that space

Important Points

1. The above piece of code can be used for connecting to any WebSocket server after some customization
2. If you encounter any trouble while running the rocket chat server you can either ask in the comments or check other ways of running the server on your machine from their documentation Rocket chat installation guides

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 😃