forked from sararob/live-coding
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcomplete.html
78 lines (62 loc) · 2.26 KB
/
complete.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<html>
<head>
<title>YC Hacks Firebase Chat Example</title>
<script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
<script src='https://cdn.firebase.com/js/simple-login/1.4.1/firebase-simple-login.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div id="stream">
<h1>YC Hacks Example</h1>
<input type="text" id="msgInput" placeholder="Your Message..."/>
<button type="submit" id="tweet-submit">Submit</button>
</div>
<div id="here">
<h1>Who's here?!<a href="#" id="login"><img src="twitter.png"/>Sign in With Twitter</a></h1>
</div>
<script>
//STEP 1: Define Firebase references
var ref = new Firebase("https://yc-hacks.firebaseio.com/");
var usersRef = ref.child("users");
var messagesRef = ref.child("messages");
var currentUser = null;
//STEP 2: Log user in when login button is clicked
$('#login').on("click", function () {
auth.login('twitter');
});
//STEP 3: Login with Twitter
var auth = new FirebaseSimpleLogin(ref, function (error, user) {
if (error) {
console.log(error);
} else if (user) {
usersRef.child(user.uid).set({username: user.username, pic: user.thirdPartyUserData.profile_image_url});
currentUser = user;
} else {
//user is logged out
}
});
//STEP 4: Display a list of users who have logged in
usersRef.on("child_added", function (snapshot) {
var user = snapshot.val();
$("<div id='user'><img src=" + user.pic + "/><span id='username'>@" + user.username + "</span></div>").appendTo($('#here'));
});
//STEP 5: Store messages in Firebase
$('#tweet-submit').on('click', function () {
if (currentUser != null) {
var message = $('#msgInput').val();
//Send the message to Firebase
messagesRef.push({user: currentUser.uid, username: currentUser.username, message: message});
$('#msgInput').val('');
} else {
alert('You must login with Twitter to post!');
}
});
//STEP 6: Add messages to DOM in realtime
messagesRef.on("child_added", function (snapshot) {
var message = snapshot.val();
$('#stream').append($("<div class='msg-text'>").text(message.username).append('<br/>').append($('<span/>').text(message.message)));
});
</script>
</body>
</html>