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.
To use the demo follow the steps below:
- Download or clone this repo
- Open js/chat.js and replace the Firebase URL with one from your own account. You can sign up for free.
- Open index.html in your browser and have fun!
You can build your own chat following the different phases. Try building it in js/tutorial.js, which starts at phase 0. All the UI is built, and just waiting for you to add the logic.
- js/phase0.js has no interesting logic.
- js/phase1.js adds chat capabilities. It can send and receive messages, and you can set the sender username.
- js/phase2.js adds social auth. You can authenticate with a social provider, and it will automatically grab the display name or user name.
This repo includes a great gulp build process. If you run gulp the sass with 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 installorsudo 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 John Phelan and is available under the Creative Commons license. For more information on this photo and acceptable use, click here.
The San Francisco image in the folder 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.