Cloud chat is a realtime chat demo powered by Firebase. This example demonstrates how easy it is to create a realtime multi person chat client with javascript, html, and css. View the live demo.
(http://firebase.github.io/cloud-chat/)
To use the demo follow the steps below:
- Download or clone this repo
- Open js/chat.js and replace the Firebase database URL with one from your own account. You can sign up for free.
- Open index.html in your browser and have fun!
This repo includes a great gulp build process. If you run gulp the sass will get preprocessed, auto prefixed, minified, and opened automatically in your browser (Chrome). The page will also auto refresh anytime you make changes to js, scss, html, or images. This makes development fast and easy. To setup this environment please follow the steps below:
- Download or clone this repo
- Make sure you have node.js installed.
- From the command line in the root of the cloud-chat directory run
npm install
orsudo npm install
(depending on your system permissions). - When that process successfully completes, on the command line run
gulp
. When gulp is finished it will open a browser with the Chat Demo. - Anytime you modify files (scss, html, js, images) and save your changes the demo page will reload automatically! Note: this does not apply to css, css is compiled from the Sass file. Edit the Sass file not the css file ;)
The background photo used was taken by Brocken Inaglory and is available under the Creative Commons license. For more information on this photo and acceptable use please visit Wikimedia Commons.