How To Integrate Rocket chat with the Social media website

Why Rocket Chat ?

We need to integrate rocket with the social media website we are developing as a chatting platform the website . We considered the rocket chat as a option as it a good cross -platform open source 2 solution with an awesome UI & support for multiple integrations. Due to the perfectly design UI and having a lot of cool functionalities and with highly active community rocket chat can be easily considered as the best chat platform if you are considering an open source solution. Rocket chat can be easily deployed on cloud services like AWS, Heroku and Google compute engine.

Technology Stack

Rocket.Chat is a Web Chat Server, developed in JavaScript and Coffescript, using the Meteor fullstack framework. Meteor js is a javascript framework built above the node js which use the ddp protocol for querying the databases. For front end Rocketchat uses meteor blaze which is a a Meteor’s built in reactive rendering library. javascript in rocketchat development uses the javascript es6 syntax. Rocketchat stack uses mongodb in the database end which make it easier to store and retrieve data.

Integration

We want to integrate the rocket chat with the people movers website. People Movers website build using a php framework codeigniter in the backend and angularjs in the front end. We looked to implement chating solutions like socket.io and other xmpp protocol but we prefered rocket chat over these solutions due to it simple and elegent design.

Issues Faced

What we need was to use rocket chat instead of the inbox area provided in the social media website (peoplemovers.com ) we are developing. In our case the chat interface developed in the website was not a real time chat application. The real Issue with the integration of the rocket chat with the peoplemovers.com website are the issues with usual chat applications like scalabilty and queue management. First thing we need to know was it possible for rocket to handle the high traffic in the peoplemovers website. Since node.js cannot be multi-threaded, it will not be possible to scale effectively there for what we tried to do was use to multiple instance and connect all of them under reverse proxy.

First created two services: rocketchat1 runs on port 3001 and rocketchat2 runs on port 3002.

sudo npm install -g forever

sudo npm install -g forever-service

cd ~/Rocket.Chat

sudo forever-service install -s main.js -e “ROOT_URL=https://example.com/

MONGO_URL=mongodb://localhost:27017/rocketchat

MONGO_OPLOG_URL=mongodb://localhost:27017/local PORT=3001” rocketchat1

sudo forever-service install -s main.js -e “ROOT_URL=https://example.com/

MONGO_URL=mongodb://localhost:27017/rocketchat

MONGO_OPLOG_URL=mongodb://localhost:27017/local PORT=3002” rocketchat2

Then we checked using command netstat -tnlp for the service is present at two part. Here is the result of thecommand.

Here we can see that two node process is running at the port 3001 and 3002. To confirm the process is running are rocketchat we tried service rocketchat1 status and service rocketchat2 status.

Then i edited the /etc/nginx/sites-enabled/default to configure the reverse proxy to each instance.

Full edited configuration file is like this

# HTTPS Server

server {

listen 443;

server_name your_hostname.com;

error_log /var/log/nginx/rocketchat.access.log;

ssl on;

ssl_certificate /etc/nginx/certificate.crt;

ssl_certificate_key /etc/nginx/certificate.key;

ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # don’t use SSLv3 ref: POODLe

location / {

proxy_pass http://backend;

proxy_http_version 1.1;

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection “upgrade”;

proxy_set_header Host $http_host;

proxy_set_header X-Real- IP $remote_addr;

proxy_set_header X-Forward- For $proxy_add_x_forwarded_for;

proxy_set_header X-Forward- Proto http;

proxy_set_header X-Nginx- Proxy true;

proxy_redirect off;

}

}

Then finally starting the both process rocketchat1 and rocketchat2 done the trick.

Rocketchat Iframe Integration.

The easiest way to integrate rocket chat with a php website is iframe integration what we first

want to do is to add this script inside your website.

<script>

function showchat(rocket) {

document.getElementById(rocket).style.display = ‘block’;

}

</script>

<div id=”rocket” style=”display: none;”>

<iframe src=”http://chat.mydomain.com:3000″></iframe>

</div>

<input type=”button” class=”my_big_button” onclick=”showStuff(‘rocket’);”></input>

Here is the screenshot of the integration.

Then customized the rocket chat skin with the peoplemovers color. Then what we want to do is to implement the Single Sign On to authenticate the rocketchat. For the customization of the rocket chat ui with ui we can change ui color of the rocket chat by changing the color in the admin side.

Then change the colors in admin/layout.

What remaining in the rocketchat-iframe integration?

Currently we had just framed the rocketchat UI in the website what we need to complete the authentication of the user with rocketchat with peoplemovers userid and password. For that we need to implement a sso method, or use iframe auth.