Collaborating remotely has become an essential capability that every business must have.
Streaming video services like Zoom make conversations easy to record but hard to review or search later. That makes real-time chat a vital tool for staying connected and providing a searchable audit trail for later reference.
Deciding Which Chat App
There are many open source chat solutions available in the market to get you started quickly and without expense. However, many are hosted by third parties and you don’t know if your chat communications are being monitored and/or stored for data mining.
Investing in a paid, off-the-shelf solution can come with an on-going licensing expense and exposure to future changes to terms of service that may be unfavourable.
The final choice is for a self-hosted chat App where you control every aspect of security, availability, data exchange and storage and cost management.
In this post, we’ll discuss how to host and build your own chat application with Rocket Chat in a PWA environment, hosted on your own server.
Rocket Chat PWA Hosted on Your Servers
You can think of Rocket Chat as a free Slack clone
Rocket Chat is a group chat open-source licensed project. It was developed to create a free, open-source version of, the widely popular, Slack by the developer community.
Rocket Chat is a powerful tool for creating your own chat server – offering highly configurable options (available after logging into the chat as an administrator). Configuration changes can also be made via the API methods available for the solution.
Rocket Chat allows you to create private and public chat rooms as well as supporting 1-on-1 conversations between users. It also supports in chat transfer of many different file types for easier sharing of files and documents.
Getting started with Rocket Chat
Rocket Chat has its own Docker image which gives you an easy way to download it and get started right away. After a quick install you should be able to view the administration dashboard and any data stores.
Rocket Chat User Account Authorisation
Rocket Chat provides a number of different authentication options including OAuth with WordPress for easy User Account management.
Using Rocket Chats built in Rest API for authentication, we can use a simple HTTP post for the login and have a X-Auth-Token returned once successfully logged in. (Note, that this token should be stored, as it may be needed for future Rest API calls).
The great thing about Rocket Chat is that it comes with various Rest API and Real Time API so you can utilize a built in websocket to allow messages to be sent in real time.
How to Implement a Send and Receive Chat Message Feature
npm install --save rocket.chat.realtime.api.rxjs
// IMPORT THE SERVICE TO YOUR PAGE AND START USING IT
import { RealTimeAPI } from "rocket.chat.realtime.api.rxjs";
const realTimeAPI = new RealTimeAPI("wss://demo.rocket.chat/websocket");
// PROVIDE THE URL TO THE ROCKET.CHAT REALTIME API
realTimeAPI.keepAlive().subscribe();
// RESPONDS "PONG" TO THE "PING" MESSAGE SENT BY THE REALTIME API. TO KEEP THE CONNECTION ALIVE
const auth = realTimeApi.login(USERNAME, PASSWORD);
// CREATES AN OBSERVABLE
// NOW SUBSCRIBE TO THE OBSERVABLE
auth.subscribe(
(data) => console.log(data),
(err) => console.log(err),
() => console.log('completed'));
//USE ANY OF THE METHODS IMPLEMENTED IN THE PACKAGE
this.realtimeAPI.onMessage((msg)=>{})
this.realtimeAPI.sendMessage(msg)
// NOTE THAT MOST ROCKET.CHAT API CALLS NEED TO BE AUTHENTICATED USING A TOKEN (X-Auth-Token)
Making a Rest API call is even simpler. All you have to do is to make a HTTP request with required parameters and payloads.
Note that some API requests require you to pass in the token and user ID in the headers for preflight authentication.
This example below shows how to get all messages and display them.
Const header = {
X-Auth-Token : <ENTER YOUR TOKEN FROM LOGIN SESSION>
X-User-Id : <ENTER YOUR USER ID>
}
this.httpService.get(<YOUR ROCKET CHAT SERVER> + /api/v1/im.messages?roomId=<roomId>&count=<TOTAL message>&offset=<SET YOUR offset>,{headers:headers})
Beginners Areas of Greatest Challenge
Being unfamiliar with chat Apps in general, there were 3 main areas of challenge we encountered.
- Coordinating between synchronous and asynchronous calls (login needs to happen before everything else)
- Each type of media needs to be treated differently. For example, images are treated differently from video and different to documents
- When requesting media from the Rocket.chat server, we don’t get the full URL. So, the App needs the smarts to add the domain.
There’s even more you can do with Rocket Chat. Check out the Rocket Chat documentation and website to explore how it can be integrated into your Apps.
