Created
March 20, 2015 22:15
-
-
Save davideast/7772ba57fc8c75ac91c6 to your computer and use it in GitHub Desktop.
Basic Firebase Chat App
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>Firestart</title> | |
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" media="screen" charset="utf-8"> | |
<script src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="jumbotron"> | |
<p id="pList"> | |
</p> | |
</div> | |
<input id="txtMessage" class="form-control" type="text"> | |
<button id="btnMessage" class="btn btn-primary btn-block" disabled="true">Add</button> | |
<hr> | |
<button id="btnLogin" class="btn btn-info btn-block">Login with Twitter</button> | |
</div> | |
<script> | |
(function() { | |
// Grab elements | |
var pList = document.getElementById('pList'); | |
var txtMessage = document.getElementById('txtMessage'); | |
var btnMessage = document.getElementById('btnMessage'); | |
var btnLogin = document.getElementById('btnLogin'); | |
// Firebase ref and user | |
var ref = new Firebase('https://hack-a-ton.firebaseio.com/messages/'); | |
var user = null; | |
// Add chat message | |
btnMessage.addEventListener('click', function() { | |
ref.push(user.twitter.username + ' - ' + txtMessage.value); | |
txtMessage.value = ''; | |
}); | |
// Login with Twitter | |
btnLogin.addEventListener('click', function() { | |
ref.authWithOAuthRedirect('twitter', function() { | |
}); | |
}); | |
// Listen for authentication state | |
ref.onAuth(function(authData) { | |
if(authData) { | |
btnMessage.disabled = false; | |
user = authData; | |
} | |
}); | |
// Sync data with Firebase | |
ref.on('child_added', function(snap) { | |
var item = document.createElement('div'); | |
item.innerText = snap.val(); | |
pList.appendChild(item); | |
}); | |
}()); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment