|   FOROS      |         |     KIO4 |      
   Inicio B4A (Basic4Android) App inventor 2 WAMP - PHP - MySQL
   Elastix - VoIP Cosas de Windows Webs interesantes Arduino
  Estación meteorológica Visual Basic Script (VBS) Translate:
Búsqueda en este sitio:


Nuevo concurso para España, Argentina, Brasil, Chile, Colombia, Ecuador, México, Perú y Portugal.

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.

__________________________________

 
- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información