Chat SDK Web
Chat SDK is a web version of the Chat SDK messenger written using AngularJS and powered by Firebase.
A few years ago I was approaced by James Tamplin, co-founder of Firebase, to build a web messenger. The founders of Firebase had previously worked on a web messenger startup called Envolve. As Firebase took off, they wanted to focus full time on the new venture so they decided to shut down Envolve. He didn't want to just abandon their previous customers so they asked me to build a new service using Firebase which would be available for the Envolve customers to move onto.
We were running the messenger as a subscription service but after several years, we thought it would be better to make it open source to run alongside our other popular Chat SDK products.
- Tested with over 300k monthly users
- Cheap to run around < $0.5 per 1k monthly users
- Text and video messages
- Compatible with the mobile Chat SDK (iOS, Android)
- Social and anonymous login
- Typing indicator
If you're interested in trying out the Chat SDK, you can see the live demo which is hosted on Firebase Hosting.
Project Setup (Important)
The project uses several build tools:
- NPM: Used to manage dependencies
- Gulp: Used to build library
Install the dependencies:
sudo npm install
Next you need to run
All the files are combined into the
dist directory. This directory contains everything that's needed to run the Chat SDK Web.
You will see the following directories:
- audio: Contains the new message recieved sound effect
- css: Contains all the style sheets
- images: Flag image assets
- img: App specific image assets
- index.html: An test page which launches the Chat SDK Web
- partials: AngularJS partials (HTML files that are rendered by AngularJS)
It's important to have some understanding of the file structure so you can understand how to add the Chat SDK to your site.
To do this, lets look at the
index.html file in more detail:
<div ng-app="myApp" ><div data-ng-include src=" partialsURL + 'chatcat.html'" data-ng-controller="AppController"></div></div>
The above are settings used by the Chat SDK. You can see a full list of the available settings by looking at config.js. The most important settings are the Firebase config settings. These should be taken from the
Google-Services.json file that is created when you register your app in the Firebase Dashboard Dashboard -> Project Overview -> Project Settings -> Add App -> Add Firebase to your web app. These settings tell Firebase which realtime database to connect to.
- We need placeholder HTML code to start the AngularJS app
- We need to configure the Chat SDK settings
Running on a local server
- Check out the Chat SDK Web
- Navigate to the folder containing the Chat SDK in the terminal
- Open the
dist/index.htmlfile in a text editor and update the
- Assuming you have a local LAMP server, create a new virtual host which has it's root directory pointing at the dist folder. If you are using MAMP, you would do this by clicking Hosts -> +. Choose a host name and set the document root to be the
distfolder. Save and restart the server.
- Add the security rules to your Firebase account.
- Enable Firebase file hosting: Firebase Dashboard -> Storage -> Enable Storage
- Then open a web browser and enter the domain of the host you created. Check that the Chat SDK is working as expected
Running on a remote server
When we want to make the Chat SDK publically available, we need to upload the contents of the
dist directory to a host server. Our recommendation would be to use Firebase Hosting to do this. You should only complete these steps after you have tested the Chat SDK locally.
- Setup the Firebase CLI
- Navigate to the
appdirectory in the terminal
firebase init. You may be prompted to log in using
- You will be prompted to choose which features you want to use. Choose
- Choose your project
- Set public directory as
- Configure as single-page app: N
- Don't overrwrite the
firebase deploy --only hosting
- Visit the URL that is displayed in the console. You will see the Chat SDK is live
Adding the Chat SDK to your website
Now that you've deployed the Chat SDK, you can easily add it to your website. Just copy the Chat SDK setup code from the
index.html file to any page on your website, change the
prod and the chat will appear on that page.