|
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
____________________________
________________________________________________________
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.
____________________________________
__________________________________
|
| KIO4 | 