| |

Comet paso a paso: pizarra colaborativa para páginas web

ByLuis

Hoy vamos a ver otro ejemplo de Comet, que a los que trabajamos en desarrollo web, nos puede venir muy bien, para cuando queremos testear una aplicación web de forma conjunta y online. También puede ser útil para realizar presentaciones.

Se trata de una pizarra colaborativa, para dibujar sobre páginas web. Cada usuario dibuja sobre el navegador y el resto de los usuarios ven lo que ha dibujado. Nada mejor para entenderlo que el siguiente video.

Se van a usar sobre todo tres cosas: comet, canvas y http://www.php.net/xml, todo sobre Firefox.

El proceso que usamos para poder crear este ejemplo es el siguiente: tenemos un iframe que contiene la página que vamos a ver, una capa que hará de pantalla (detecta el pintar sobre la página) y una capa que canvas que será donde se dibuja. Para entederlo en más detalle, vamos a ver como sería paso a paso:

  • Cargamos la página en el iframe.
  • Dimensionar el iframe, la capa “pantalla” y el canvas al tamaño de la página que vamos a mostrar.
  • Empezar a recibir datos del servidor para ver que otras personas han dibujado (guardado en un XML llamado comandos.xml).
  • Capturar el evento onmousemove para la capa “pantalla” para que cuando se halla pulsado el ratón (onmousedown), se ponga a dibujar.
  • Cuando se haya soltado el ratón (onmouseup) se dibuja el path en el canvas y se envían todos los comandos que se han ejecutado en el servidor.

En la parte del servidor disponemos de dos scripts, uno para recibir los comandos que hemos ejecutado (mandar.php), y otro que recibiendo el usuario, y una marca de tiempo, enviamos que comandos de otros usuarios no ha recibido aún (enviar.php).

  • El script que recibe los comandos simplemente se encarga de añadir un elemento al XML comandos.xml al final del XML con la marca de tiempo actual.
  • El script que envia los comandos que aún no se han ejecutado, para ello recorre todos los elementos, y comprueba si el usuario es distinto y si la marca de tiempo es posterior a la que enviamos (que será la más antigua que ha recibido del script anteriormente).

Empecemos a mirar el código, primeramente la parte cliente, que peude ser la más compleja.

El HTML necesario para crear las capas que antes hemos indicado es el siguiente.

<div class="pagina">
<iframe id="pagina" src="sentidoweb.com.html" width="520" height="520"></iframe>
</div>
<div class="canvas" id="pantalla"
onmousedown="lapiz(event, true)"
onmouseup="lapiz(event, false)"
onmousemove="pinta(event)">
<canvas id="canvas" width="500" height="500"></canvas>
</div>

Junto sus estilos, que simplemente los posiciona de forma absoluta para que se posicionen unos encima de otros.

div.pagina {
position: absolute;
}
div.canvas {
position: absolute;
z-index: 100;
background: url(sp.gif);
}
canvas {
overflow: auto;
border: 2px solid rgb(0, 133, 133);
}

Podrás ver que en el div.canvas usa un background que es un gif transparente totalmente, esto es para que cuando se pulse en esta capa, sea en esta capa únicamente y no acceda a las que está debajo de ella.

El código Javascript es el siguiente, empezando por la declaración de variables globales.

var ctx = null; // Contexto canvas
var estadoLapiz = false; // true = esta dibujando; false = no está dibujando
// Posicion X e Y del punto anterior
// para que haya demasiados puntos juntos
var antX = -10;
var antY = -10;
var espacio = 5; // espacion mínimo entre puntos
var cargado = false;	// Si la página se ha cargado
// Alto y ancho de la página que se carga
var altoPag = 0;
var anchoPag = 0;
// El grupo de comandos para canvas que se ejecutan y luego se envian
var comando = "";
// Id del usuario
var usuario = (Math.random()*(new Date()).getTime())+"";
// Marca de tiempo para saber que se ha recibido
var tiempo = 0;

Inicialmente, cuando se cargue la página, vamos a redimensionar las capas y a empezar a leer los datos.

// Inicialización
function init() {
var canvas = document.getElementById("canvas");
var pagina = document.getElementById("pagina");
var pantalla = document.getElementById("pantalla");
// Obtenemos el contexto del canvas
ctx = canvas.getContext('2d');
// Estilos por defecto
ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
ctx.strokeStyle = "rgba(200, 0, 0, 0.5)";
var pagina = document.getElementById("pagina");
cargado = true;
// Se cambia el tamaño del iframe para que ocupe lo mismo que la página
pagina.style.width = document.body.offsetWidth+"px";
altoPag = document.getElementById("pagina").contentDocument.body.offsetHeight;
anchoPag = document.getElementById("pagina").contentDocument.body.offsetWidth;
// Se cambia el tamaño del canvas para que ocupe toda la página
canvas.width = anchoPag;
canvas.height = altoPag;
// Se cambia el tamaño de la "pantalla" que detecta los movimientos del ratón
pagina.style.height = altoPag+"px";
pantalla.style.width = anchoPag+"px";
pantalla.style.height = altoPag+"px";
// Se empieza con la lectura de lo que ha dibujado otro usuario
lectura();
}

Para dibujar sobre el canvas, vamos a capturar tres eventos en la capa “pantalla”: onmousemove para crear el path (función pinta), onmousedown para saber que empezamos a dibujar (función lapiz) y onmouseup para saber que dejamos de dibujar (función lapiz).

// Acciones que se realizan cuando se pincha y suelta el ratón
function lapiz(evt, ok) {
// Si se ha cargado la imagen
if (cargado) {
estadoLapiz = ok;
// Si se pincha (mouse down)
if (ok) {
// Se almancena el primer punto
antX = evt.layerX;
antY = evt.layerY;
// Si inicializa el grupo de comandos que se van a enviar
comando = "";
// Estilosp or defecto
ctx.lineWidth = 4;
ctx.strokeStyle = "rgba(200, 0, 0, 0.5)";
// Empezamos el path
ctx.beginPath();
// Nos movemos a la posicion inicial
ctx.moveTo(antX, antY);
// Almacenamos los comandos ejecutados para luego enviarlos
comando += "ctx.beginPath();\n";
comando += "ctx.moveTo("+antX+", "+antY+");\n";
// Si se suelta el ratón (mouse up)
} else {
// Se dibuja el path
ctx.lineWidth = 3;
ctx.stroke();
// Se manda lo que hemos dibujado
comando += "ctx.stroke();\n";
mandar();
// Se inicializa el comando
comando = "";
}
}
}
// Crea el path en el canvas según se mueve el ratón
function pinta(evt) {
// Si se ha pulsado el ratón (mouse down)
if (estadoLapiz) {
// Almacenamos el punto
var x = evt.layerX;
var y = evt.layerY;
// Si el punto actual difiere en 3 pixels del punto anterior entonces dibujamos
if (Math.abs(x-antX) > espacio || Math.abs(y-antY) > espacio) {
// Creo la línea
ctx.lineTo(x, y);
// Almaceno el comando
comando += "ctx.lineTo("+x+", "+y+");\n";
antX = x;
antY = y;
}
}
}

Las funciones que se encargan de la comunicación entre el cliente y el servidor (comet) son las siguientes: la creación del objeto, la que lee datos cada cierto tiempo, enviar datos, recibir datos.

// Creacion del objeto Comet
function cometobj() {
try {
_cometobj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
_cometobj = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
_cometobj = false;
}
}
if (!_cometobj && typeof XMLHttpRequest!='undefined') {
_cometobj = new XMLHttpRequest();
}
return _cometobj;
}
// Inicialización
function init() {
var canvas = document.getElementById("canvas");
var pagina = document.getElementById("pagina");
var pantalla = document.getElementById("pantalla");
// Obtenemos el contexto del canvas
ctx = canvas.getContext('2d');
// Estilos por defecto
ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
ctx.strokeStyle = "rgba(200, 0, 0, 0.5)";
var pagina = document.getElementById("pagina");
cargado = true;
// Se cambia el tamaño del iframe para que ocupe lo mismo que la página
pagina.style.width = document.body.offsetWidth+"px";
altoPag = document.getElementById("pagina").contentDocument.body.offsetHeight;
anchoPag = document.getElementById("pagina").contentDocument.body.offsetWidth;
// Se cambia el tamaño del canvas para que ocupe toda la página
canvas.width = anchoPag;
canvas.height = altoPag;
// Se cambia el tamaño de la "pantalla" que detecta los movimientos del ratón
pagina.style.height = altoPag+"px";
pantalla.style.width = anchoPag+"px";
pantalla.style.height = altoPag+"px";
// Se empieza con la lectura de lo que ha dibujado otro usuario
lectura();
}
// Lee lo que ha dibujado otro usuario cada cierto tiempo
function lectura() {
setTimeout("leer()", 1);
setTimeout("lectura()", 5000);
}
// Envio al servidor lo que se ha dibujado
function mandar() {
// Creamos el objeto comet
var comet = cometobj();
comet.open("POST", "mandar.php", true);
// No se espera ninguna respuesta
comet.onreadystatechange=function() {
}
// Enviamos el comando
comet.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
comet.send("&comando=" + escape(comando) + "&usuario=" + usuario);
}
// Acciones que se realizan cuando se pincha y suelta el ratón
function lapiz(evt, ok) {
// Si se ha cargado la imagen
if (cargado) {
estadoLapiz = ok;
// Si se pincha (mouse down)
if (ok) {
// Se almancena el primer punto
antX = evt.layerX;
antY = evt.layerY;
// Si inicializa el grupo de comandos que se van a enviar
comando = "";
// Estilosp or defecto
ctx.lineWidth = 4;
ctx.strokeStyle = "rgba(200, 0, 0, 0.5)";
// Empezamos el path
ctx.beginPath();
// Nos movemos a la posicion inicial
ctx.moveTo(antX, antY);
// Almacenamos los comandos ejecutados para luego enviarlos
comando += "ctx.beginPath();\n";
comando += "ctx.moveTo(" + antX + ", " + antY + ");\n";
// Si se suelta el ratón (mouse up)
} else {
// Se dibuja el path
ctx.lineWidth = 3;
ctx.stroke();
// Se manda lo que hemos dibujado
comando += "ctx.stroke();\n";
mandar();
// Se inicializa el comando
comando = "";
}
}
}

La parte servidor consta de dos scripts: leer.php y mandar.php, el primero es para leer que partes del XML tenemos que enviar al cliente, y el segundo para almancenar los comandos que hemos mandado desde el cliente.

<?php
// Lee el XML y devuelve los elementos que no se hayan ejecutaddo
// Mandamos datos en varias veces al cliente
header('Content-type: multipart/x-mixed-replace;boundary="limite01234"');
echo "--limite01234\n";
$usuario = $_POST['usuario'];
$tiempo = $_POST['tiempo'];
$ok; // Si se manda o no
$maxTiempo = 0; // El timestamp mayor
$fichero = 'comandos.xml'; // Fichero de los comandos
// Trata los elementos iniciales de un XML
// comprueba si se tiene que enviar o no
function inicio($xml, $nombre, $atributos) {
global $usuario;
global $ok;
global $tiempo;
global $maxTiempo;
$ok = (($atributos["USUARIO"] != $usuario) AND ($tiempo < $atributos["TIEMPO"])) ? 1 : 0;
$maxTiempo = max($maxTiempo, $atributos["TIEMPO"]);
}
// Trata los elementos finales de un XML
// no hace nada
function fin($xml, $name) {
}
// Trata los elementos de datos de un XML
// Si se tiene que enviar, se manda, si no,
// no hace nada
function datos($xml, $datos) {
global $usuario;
global $ok;
global $tiempo;
global $maxTiempo;
if ($ok == 1) {
echo "Content-type: text/plain\n\n";
echo "//".$maxTiempo."\n";
echo "$datos\n";
echo "--limite01234\n";
flush();
}
$ok = 0;
}
// Parseo el XML
$xml = xml_parser_create();
xml_set_element_handler($xml, "inicio", "fin");
xml_set_character_data_handler($xml, "datos");
if (!($f = fopen($fichero, "r"))) {
die("No se puede abrir el fichero XML.");
}
while ($data = fread($f, 4096)) {
if (!xml_parse($xml, $data, feof($f))) {
die(sprintf("Error en el XML: %s en línea %d",
xml_error_string(xml_get_error_code($xml)),
xml_get_current_line_number($xml)));
}
}
xml_parser_free($xml);
fclose($f);
// Fin del envio
echo "--limite01234--\n";
?>
<?php
$comando = $_POST['comando'];
$usuario = $_POST['usuario'];
$fichero = 'comandos.xml';
$f = null;
// Si el fichero no existe lo creo
if (!file_exists($fichero)) {
$f = fopen($fichero, 'w+');
fclose($f);
}
// Leo el fichero
$f = fopen($fichero, 'r');
$xml = "";
// Si el fichero tiene datos, elimino la etiqueta final
if (filesize($fichero) > 0) {
$xml = fread($f, filesize($fichero));
$xml = ereg_replace("\<\/comandos\>", "", $xml);
// Si el fichero no tiene datos, creo la etiqueta inicial
} else {
$xml .= '<comandos>';
}
// Añado una etiqueta con el usuario, la marca de tiempo y los datos
$xml .= '<comando usuario="'.$usuario.'" tiempo="'.time().'">'.$comando.'</comando>';
// Añado la etiqueta final
$xml .= '</comandos>';
fclose($f);
// Reemplazo los datos en el fichero
$f = fopen($fichero, 'w');
fwrite($f, $xml);
fclose($f);
?>

¿Por qué Comet y no AJAX?, porque realmente Comet lo usamos para ir recibiendo los comandos uno a uno, cuando los podríamos recibir en un XML e ir ejecutándolos uno a uno. Bueno, habría gente que diría que hacer llamadas AJAX cada cierto tiempo para recibir datos es Comet, no sé, estas cosas las dejo para los puristas.

¿Qué más se podría hacer o que fallos tiene este ejemplo?

  • Uno de las cosas que más me preocupa es el uso de memoria, pon el Administrador de Tareas y fíjate en el uso de memoria de Firefox, en el momento anterior y después de cargar este ejemplo, verás que aumenta varios megas, algo increible, sobre todo como me pasaba a mí cuando estaba creando el script que necesitaba tener dos pestañas con el ejemplo. Supongo que se debe a que reserva memoria para todo el canvas y que depende del tamaño de el elemento, en este caso excesivo.
  • Supongo que se podría mejorar la forma de crear los paths, hasta que no sueltas el botón del ratón no se dibuja, probé a dibujar el path por cada movimiento del ratón, pero el número de comandos que se ejecutaban era excesivo.
  • Otra cosa que no controlo es el hecho de que cuando quiere empezar un nuevo testeo, el usuario verá como se dibuja lo de la vez anterior. Esto es porque no se borra el fichero comandos.xml y se debería borrar a cada nuevo inicio. Vamos, que no estaría mal poder incorporarle algunos comandos: borrar pantalla, etc...
  • No he dado la oportunidad de que se cargue cualquier página, de todas formas, no tengo muy claro de que se pueda cargar una página externa a tu servidor, porque tenemos que acceder a la página para ver el alto y ancho de esta, y puede que si la página es externa, esta información nos esté restringida.
  • Control de usuarios, claro, que si hago esto es para nota, y me tendría que pasar una o dos semanas con este script al 100% y no podría escribir en Sentido Web.
  • Dar la posibilidad de elegir el color, el ancho del pincel, ... esto para cuando salgamos de la beta.

Y poco más, si le sacáis partido a este script, por favor, decídnoslo y si no lo vais a usarlo nunca, espero que os de alguna idea para algo que vayáis a realizar.

Podéis bajaros el código fuente aquí

Similar Posts

|

Cosas que no hay que hacer cuando usas AJAX

ByLuis

Siempre es bueno aprender de todo, y una de las mejores formas de aprender es de los fallos, si son los tuyos, mejor, pero si son de otros, tambien bien. En este caso, se trata de un estudio sobre Live.com y algunas cosas que han encontrado que no son buenas a la hora de seguir.

  • Cuidado con las comunicaciones: el que AJAX se conecte al servidor para refrescar la página y no nos demos cuenta, tampoco quita que tengamos que estar conectando todo el tiempo. El número de conexiones repercute en el ancho de banda, lo cual puede ser negativo para el cliente y para el servidor.
  • Tratar con XML es lento: cierto que el XML es muy bueno para transmitir datos, es legible para el programador y para el servidor, pero pasearlo nos puede llevar demasiado tiempo. Posible recomendación: JSON.
  • Ir cargando la página poco a poco: las nuevas aplicaciones web suelen requerir de mucha programación, lo cual puede tardar en cargarse, y cuando si no se va mostrando algo, el usuario pensará que la página es lenta, por eso es preferible ir cargando lo necesario y luego ir cargando el resto, así el usuario no se desesperará.

Vía / ZDNet.com

|

Fireflix: controla tu cuenta de Flickr desde Firefox

ByLuis

fireflix.pngEncuentro en firefoXtensions (página que recomiendo que sigas si eres usuario de Firefox), una extensión que facilitará mucho el trabajo a los usuarios de Flickr.
Con esta extensión podras subir fotos nuevas, crear thumbnails en formato HTML de las fotos seleccionadas, buscar fotos en Flickr, eliminiar fotos, trabajar con sets de fotos y más cosas.
La primera vez que lo ejecutas, te aparecerá en Flickr una pestaña nueva para poder permitir el acceso a la extensión, una vez concedido ya podrás trabajar con ella perfectamente.
fireflix
Vía / firefoXtensions

| |

Laboratorio: shortcuts en formularios

ByLuis

Algo a lo que suelo estar acostumbrado es a usar el teclado para realizar ciertas acciones (shortcuts), cuando estás 8 horas diarias delante de un ordenador, si no haces uso de los shortcuts, perderás mucho tiempo moviendo el ratón de un lado para otro.

Antes el uso estaba más restringido a las aplicaciones de escritorio (CTRL + S para guardar el documento, ALT + F4 para cerrar la ventana, …), pero ahora que cada vez se usa con más frecuencia aplicaciones web, se echan en falta estas facilidades. Aunque hay que decir que últimamente se ven con más frecuencia: TAB + INTRO para enviar un correo en GMail (claro que esta no se programa), CONTROL + S para guardar una entrada en Blogger, …

Read More “Laboratorio: shortcuts en formularios”

|

Palette Grabber: obtén la paleta de colores mediante Firefox

ByLuis

Palette Grabber es una extensión para Firefox que nos permite obtener los colores de una página web y exportarlos a un archivo para su posterior utilización.
pallettegrabber.png
El formato más sencillo al que exporta los colores es un fichero de texto con los componentes RGB de cada color en formato decimal. Pero lo que más nos puede ser útil es que lo exporta a formatos de paleta de colores de Adobe, Flash, Paintshop Pro, GIMP y Adobe Fireworks.
Esta herramienta la veo muy útil para cuando te mandan hacer un prototipo de alguna página nueva y hay que basarse en un diseño que no es tuyo, por lo que no tienes el original sobre el que se trabajó.
Palette Grabber

Errores al desarrollar con Ajax

ByLuis

Buena serie de consejos para evitar cometer errores cuando desarrollamos con Ajax.

  • Ajax es una herramienta, no un juguete: en muchos casos el uso de Ajax es totalmente innecesario.
  • No se lleva bien con el botón back del navegador: este botón es necesario para la usabilidad y javascript no se lleva muy bien con él.
  • No avisar de que se realiza una acción: cuando hago click en alguna zona de la página y se genera una acción, se debería avisar de ello para que el usuario sepa que se están actualizando datos.
  • Dejar a los usuarios offline de lado: que cada vez haya más gente con conexión a internet, no quita que nos debamos olvidar de la gente que apenas hace uso de ella, por ello es necesario pensar que las páginas en Ajax muestran datos de forma dinámica, y que no se producirá el refresco de datos si el usuario está offline.
  • Hacer esperar al usuario: la ‘A’ de Ajax es de asíncrono, no es necesario que el usuario haga algo para obtener datos, nos podemos adelantar a sus acciones e ir realizando peticiones para obtener esos datos y que el usuario no tenga que esperar la respuesta.
  • Enviar información sensible de forma visible: en muchas ocasiones enviamos al navegador los mismos datos que se reciben en la aplicación, la diferencia es que la aplicación filtra esos datos y muestra los que convienen. En el navegador, aunque no se muestren todos, si se envían se podrán ver.
  • Asumir que Ajax es una única plataforma: hay que testear correctamente las aplicaciones Ajax para que se puedan ver en las distintas plataformas que permiten Ajax, por ejemplo los distintos navegadores.
  • Múltiples usuarios: si tu aplicación la usan varios usuarios a la vez, ten en cuenta que puede haber problemas al actualizar datos por parte de unos y visualizarlos por parte de otros.
  • Excesivo trabajo para el navegador: a veces el uso de aplicaciones Ajax hace que el navegador tenga que realizar muchas tareas, lo cual puede no ser bueno para el rendimiento.
  • Olvidarse de aquellos que no tienen Javascript: según las estadísticas son un 11%, por ello siempre hay que ofrecer una alternativa no Ajax.
  • No usar enlaces: al refrescarse el contenido dinámicamente, nos olvidamos de los enlaces para poder acceder a esa información.
  • Salirse de lo común en la usabilidad: al permitirnos realizar operaciones poco habituales, nos encontramos con la circunstancia de que esperemos que el usuario realice una acción que este no espera que se tenga que hacer así. La gente suele estar acostumbrada a realizar siempre lo mismo.
  • No realizar cambios en cascada: nos olvidamos de que cuando cambia una parte de la página deben cambiar a su vez otras partes relacionadas.

Yo a parte añadiría algo que se suele decir con frecuencia pero que nunca está mal volver a repetirlo: el que asíncrono implica que si se lanzan varias peticiones al servidor, el orden de llegada no tiene que ser el mismo que el orden de envío, esto es muy importante a la hora de actualizar datos.

Ajax Mistakes