Firebase en español
Base de base activa. Firebase - Juan Antonio Villalpando
-- Tutorial de iniciación de Firebase en español --
Volver al índice del tutorial
____________________________
________________________________________________________
1.- Chat
________________________________
- Vamos a crear un chat en una página web.
- Simplemente copia este archivo en tu ordenador.
- Debes cambiar mi dirección:
var myDataRef = new Firebase('https://kio4.firebaseiO.com/');
por la tuya de Firebase.
chat.htm |
<html>
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
<div id='messagesDiv'></div>
<input type='text' id='nameInput' placeholder='Name'>
<input type='text' id='messageInput' placeholder='Message'>
<script>
var myDataRef = new Firebase('https://kio4.firebaseio.com/');
$('#messageInput').keypress(function (e) {
if (e.keyCode == 13) {
var name = $('#nameInput').val();
var text = $('#messageInput').val();
myDataRef.push({name: name, text: text});
$('#messageInput').val('');
}
});
myDataRef.on('child_added', function(snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
});
function displayChatMessage(name, text) {
$('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
$('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
};
</script>
</body>
</html>
|
- Comentarios
- keyCode = 13 significa que pulsar el botón "Entrar" del teclado del ordenador o móvil.
- push = guarda la información en una nueva clave de la forma Kruf4tiyoprkeprert
- Ahora pulsamos con el ratón en el archivo chat.htm para que se abra con un navegador web.
- Escribimos un nombre y nos autoenviamos mensajes. Para enviar un mensaje pulsa la tecla "Entrar" del ordenador.
- Puedes ejecutarlo desde tu ordenador, como ven en la imagen: file://D:/kio4/... o subir el archivo a internet.
____________________________________________________________
- Subimos el archivo a un servidor web.
- Voy a subir mi archivo chat.htm a mi hosting de kio4.com
- Aquí está:
http://kio4.com/firebase/chat.htm
- Ya tenemos un chat. Fácil, ¿verdad?
____________________________________
- Database.
- Si entras en Database, observarás que por cada mensaje se crea una clave.
__________________________________
|