|   FOROS      |     Tutoriales    |     KIO4 |      
   Inicio B4A (Basic4Android) App inventor 2 WAMP - PHP - MySQL
   Elastix - VoIP Cosas de Windows Webs interesantes Arduino
  Estación meteorológica      

 


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

¿Cuáles son los vídeos más visitados en Youtube?

- Aquí he puesto algunos de los que superan las mil millones de visitas, todos musicales.

Vídeos más visitados en Youtube

 

 

Firebase en español
Base de datos activa. Firebase - Juan Antonio Villalpando

-- Tutorial de iniciación de Firebase en español --

Volver al índice del tutorial                    Return to index tutorial

____________________________

Firebase

________________________________________________________

3.- Presence. Ver quién está conectado.

________________________________

- Vamos a crear una página web en donde podamos ver quienes de nuestros amigos están conectados.

- Simplemente copia este archivo en tu ordenador.

- Debes cambiar mi dirección:

var userListRef = new Firebase("https://kio4.firebaseio.com/");

var connectedRef = new Firebase("https://kio4.firebaseio.com//.info/connected");

por la tuya de Firebase.

Además debes bajar estos dos archivos y subirlos a tu servidor

http://www.kio4.com/firebase/imagenes/idle.js

 

http://www.kio4.com/firebase/imagenes/example.css

presence.htm
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta charset="utf-8">
  <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="http://www.kio4.com/firebase/imagenes/idle.js"></script>
  <link rel="stylesheet" type="text/css" href="http://www.kio4.com/firebase/imagenes/example.css">
</head>
<body>

<div id="presenceDiv" class="l-demo-container example-base">
</div>

<script>
  // Prompt the user for a name to use.
  var name = prompt("Your name?", "Guest");
  var currentStatus = "? online";

  // Get a reference to the presence data in Firebase.
  var userListRef = new Firebase("https://kio4.firebaseio.com/");

  // Generate a reference to a new location for my user with push.
  var myUserRef = userListRef.push();

  // Get a reference to my own presence status.
  var connectedRef = new Firebase("https://kio4.firebaseio.com//.info/connected");

  connectedRef.on("value", function(isOnline) {
    if (isOnline.val()) {
      // If we lose our internet connection, we want ourselves removed from the list.
      myUserRef.onDisconnect().remove();

      // Set our initial online status.
      setUserStatus("? online");
    }
    else {

      // We need to catch anytime we are marked as offline and then set the correct status. We
      // could be marked as offline 1) on page load or 2) when we lose our internet connection
      // temporarily.
      setUserStatus(currentStatus);
    }
  });

  // A helper function to let us set our own state.
  function setUserStatus(status) {
    // Set our status in the list of online users.
    currentStatus = status;
    myUserRef.set({ name: name, status: status });
  }

  function getMessageId(snapshot) {
    return snapshot.key().replace(/[^a-z0-9\-\_]/gi,'');
  }

  // Update our GUI to show someone"s online status.
  userListRef.on("child_added", function(snapshot) {
    var user = snapshot.val();

    $("<div/>")
      .attr("id", getMessageId(snapshot))
      .text(user.name + " is currently " + user.status)
      .appendTo("#presenceDiv");
  });

  // Update our GUI to remove the status of a user who has left.
  userListRef.on("child_removed", function(snapshot) {
    $("#presenceDiv").children("#" + getMessageId(snapshot))
      .remove();
  });

  // Update our GUI to change a user"s status.
  userListRef.on("child_changed", function(snapshot) {
    var user = snapshot.val();
    $("#presenceDiv").children("#" + getMessageId(snapshot))
      .text(user.name + " is currently " + user.status);
  });

  // Use idle/away/back events created by idle.js to update our status information.
  document.onIdle = function () {
    setUserStatus("? idle");
  }
  document.onAway = function () {
    setUserStatus("? away");
  }
  document.onBack = function (isIdle, isAway) {
    setUserStatus("? online");
  }

  setIdleTimeout(5000);
  setAwayTimeout(10000);
</script>
</body>
</html>

- Ahora pulsamos con el ratón en el archivo presence.htm para que se abra con un navegador web.

- Dibujamos con el ratón.

____________________________________________________________
Subimos el archivo a un servidor web.

- Voy a subir mi archivo presence.htm a mi hosting de kio4.com

- Aquí está:

http://kio4.com/firebase/presence.htm

 

- Podremos ver el listado de personas que estén online y se hayan autentificado en esta página.

____________________________________
__________________________________

 

- 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