raknjarasoa / cloud-chat

Cloud Chat Demo

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.

(https://live-cloud-chat.firebaseapp.com/)

Basic Development

To use the demo follow the steps below:

1. Download or clone this repo
2. Open js/chat.js and replace the Firebase URL with one from your own account. You can sign up for free.
3. Open index.html in your browser and have fun!

Tutorial Mode

You can build your own chat. This goes through a couple phases, starting at 0. Clone or download the repo and open up tutorial.html in the browser. You'll be adding code to js/tutorial.js, which starts at phase 0. All the UI is built, and just waiting for you to add the logic.

1. js/phase0.js has no interesting logic.
2. js/phase1.js adds chat capabilities. It can send and receive messages, and you can set the sender username. Be sure to change Firebase URL in js/tutorial.js to one you can access (see Basic Development).
3. js/phase2.js adds social auth. You can authenticate with a social provider, and it will automatically grab the display name or user name.

If you get an error in while authenticating in phase2 that says TRANSPORT_UNAVAILABLE, that's because authentication won't work with local files (you can read more here). If you have python, you can run python -m SimpleHTPPServer to serve the files and then go to localhost:8000 or check out Firebase hosting to push your files to the web!

Advanced Development

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:

1. Download or clone this repo
2. Make sure you have node.js installed.
3. From the command line in the root of the cloud-chat directory run npm install or sudo npm install (depending on your system permissions).
4. When that process successfully completes, on the command line run gulp. When gulp is finished it will open a browser with the Chat Demo.
5. 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 ;)

Photography License

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.

Repository License

MIT - http://firebase.mit-license.org