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

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.

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.

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

Novedades en el sitio de extensiones de Firefox

Crea tu propia aplicación AJAX

FirePHP: obten más información de tus scripts PHP

UIzard: herramienta de desarrollo via Ajax

DevBoi: documentación de desarrollo web en Firefox

Ajax Solutoire: recursos Ajax

Similar Posts