Skip to content

Instantly share code, notes, and snippets.

@micc83

micc83/tutorial-chat-app.html

Created July 16, 2014 08:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save micc83/b085eb7749e86f069529 to your computer and use it in GitHub Desktop.
Save micc83/b085eb7749e86f069529 to your computer and use it in GitHub Desktop.
Download ZIP
Tutorial: Creare una chat in tempo reale con Firebase e login facebook
Raw
tutorial-chat-app.html
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MyApp</title>
<style>
/* Your style goes here */
body { font-family: "Helvetica Neue", Helvetica, Arial; background: #eee;color:#666; }
.login_button { text-align:center;display:block;margin: 20px auto;padding: 10px;background: #45619D;width: 200px;color: #fff;text-decoration:none; }
#message_list { list-style:none;padding: 20px;border: 5px solid #F6F7F8;overflow:auto;background: #fff;margin: 0px auto; max-width: 760px;max-height:400px; }
.message-body { border-bottom: 3px dotted #F6F7F8;padding: 10px;overflow:hidden;padding-left: 60px; }
.message-author { color:#000;font-size:12px; }
.message-author-avatar { float: left; margin-left: -60px; }
.message-content { padding: 0;margin: 15px 0 10px 0; }
.message-date { background: #5890FF;padding:3px 6px;display:inline-block;color:#fff;font-size:10px; }
#chat_input { margin: 20px auto; max-width: 800px;display:block; }
#chat_input input { border: none;padding: 15px 2%;line-height:1em;width: 70%;margin:0; }
#chat_input button { border: none;padding: 15px 2%;line-height:1em;width: 25%;margin:0; background: #5890FF;color:#fff;font-weight:800; }
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Login button -->
<a href="#" class="login_button">Login con facebook</a>
<!-- Chat Input -->
<form id='chat_input' action='#' style="display:none;">
<input type='text' id='message' placeholder='Messaggio'><button type='submit' id='send'>Invia</button>
</form>
<!-- Message list -->
<ul id="message_list" class="loading"><li>Loading...</li></ul>
<!-- Single Message template -->
<script id="message-template" type="text/x-handlebars-template">
<li class="message-body">
<img class="message-author-avatar" src="http://graph.facebook.com/{{author_id}}/picture">
<small class="message-date">{{timeConverter time}}</small>
<strong class="message-author">{{author}}</strong>
<p class="message-content">{{message}}</p>
</li>
</script>
<!-- Scripts -->
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script type='text/javascript' src='//cdn.firebase.com/js/client/1.0.15/firebase.js'></script>
<script type='text/javascript' src='//cdn.firebase.com/js/simple-login/1.4.1/firebase-simple-login.js'></script>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js'></script>
<script type="text/javascript">
// Your code goes here
jQuery('document').ready(function ($) {
// Ci colleghiamo alle API della nostra App firebase
// Sostituite tutorial-chat-app con l'url della vostra App
var myDataRef = new Firebase('https://tutorial-chat-app.firebaseIO.com/');
// Richiedo a firebase la situazione dell'autenticazione
var auth = new FirebaseSimpleLogin(myDataRef, function(error, user) {
// Se l'utente è loggato
if (user) {
// Nascondo il link al login
$('.login_button').hide();
// Visualizzo il modulo per l'inserimento di un nuovo messaggio
$('#chat_input').fadeIn();
// Quando il form viene inviato
$('#chat_input').submit(function (e) {
// Inserisco l'input in un oggetto jQuery
var input = $('#message');
// Impedisco il comportamento di default dell'evento submit
e.preventDefault();
// Se il campo non è vuoto
if ( $('#message').val() ){
// Invio a firebase un oggetto che contiene la proprietà message
myDataRef.push({
author: user.displayName,
author_id: user.id,
time: Firebase.ServerValue.TIMESTAMP,
message: input.val()
});
}
// Riazzero l'input e gli do il focus
input.val('').focus();
});
// Se l'utente non è loggato
} else {
// Cliccando su login
$('.login_button').click(function (e) {
// Impedisco il comportamento di default
e.preventDefault();
// Richiedo l'autorizzazione al login con facebook
auth.login('facebook');
});
}
});
// Registro il mio template per i singoli messaggi
var messageTemplate = Handlebars.compile($('#message-template').html());
// Registro un helper di handlebars per visualizzare correttamente l'ora
Handlebars.registerHelper('timeConverter', function (UNIX_timestamp) {
var now = new Date(UNIX_timestamp),
pad = "00",
minutes = (pad+now.getMinutes()).slice(-pad.length);
return now.getHours() + ':' + minutes;
});
// Rimuovo la dicitura loading al primo caricamento dati
myDataRef.once('child_added', function(dataSnapshot) {
// Rimuovo lo status loading...
if ( $('#message_list').hasClass('loading') ){
$('#message_list').removeClass('loading');
$('#message_list').html('');
}
});
// All'aggiunta di un nuovo messaggio
myDataRef.on('child_added', function(snapshot) {
// Lo aggiungo alla lista
$('#message_list').prepend(messageTemplate(snapshot.val()));
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment