Geek & Roll - Blog Archive » Cargando recursos binarios desde JavaScript

Cargando recursos binarios desde JavaScript

Desde que Google mostró al mundo su port de Quake 2 a JavaScript usando GWT, no me podía sacar una pregunta de la cabeza: ¿Cómo hacen para cargar los recursos (como por ejemplo los modelos de los jugadores, o los niveles) desde el servidor al cliente, para su uso por el motor del juego en JavaScrip? ¿Es posible obtener archivos binarios del servidor, guardarlos en el sistema de archivos local, y ejecutarlos finalmente por una aplicación en JavaScript? La respuesta obviamente era sí, pero no sabía cómo.

Pero una consulta al código fuente del proyecto quake2-gwt aclaró las dudas. El secreto es sobreescribir un tipo MIME, lo que le permite al objeto XMLHttpRequest recibir respuestas binarias en vez de texto, para lo cual es más comúnmente utilizado.

function load_binary_resource(url) {
  var req = new XMLHttpRequest();
  req.open('GET', url, false);
  //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
  req.overrideMimeType('text/plain; charset=x-user-defined');
  req.send(null);
  if (req.status != 200) return '';
  return req.responseText;
}

En GWT necesitamos hacer uso de una funcion JavaScript nativa (JSNI) para lograr lo mismo:

private native void overrideMimeType(XMLHttpRequest req, String mimeType) /*-{
    req.overrideMimeType(mimeType);
}-*/;

Y finalmente crear un objeto XMLHttpRequest, hacer la petición y procesar los datos binarios en el cliente:

XMLHttpRequest req = XMLHttpRequest.create();
overrideMimeType(req, "text/plain; charset=x-user-defined");

req.setOnReadyStateChange(new ReadyStateChangeHandler(){
    //procesar la respuesta binaria
});

req.open("GET", "archivo.binario");
req.send();

Para convertir la respuesta en un InputStream, en este caso utilizando GWT y clases de emulación io y nio que tomé prestadas del proyecto quake2-gwt:

response = xhr.getResponseText();
byte[] responseBytes = new byte[sbb.stringToByteBuffer(response).remaining()];
InputStream inputStream = new ByteArrayInputStream(responseBytes);

En este punto pueden usar el InputStream como lo harían en un programa Java tradicional, por ejemplo si cargaron los bytes de una imagen, pueden aplicarle filtros a-la-photoshop, en tiempo real, en el cliente, sin necesidad de procesamiento en el servidor mas allá de descargar la imagen.

4 Comentarios

JuanRios

June 29th, 2010

Alo Cesar,

Que milagro que tu haciendo “cosas de hombres”

Muy buen tip.

Saludos!

Tweets that mention Geek & Roll - Blog Archive » Cargando recursos binarios desde JavaScript -- Topsy.com

June 29th, 2010

[...] This post was mentioned on Twitter by Juan Rios™, Geek & Roll. Geek & Roll said: Nuevo post: Cargando recursos binarios desde JavaScript http://www.geekandroll.com/2010/06/cargando-recursos-binarios-desde-javascript/ [...]

Cesar

June 29th, 2010

@JuanRios voy a hacer como que no leí eso…

anonimo

June 29th, 2012

lol

Haz un comentario:

Es necesario que dejes tu nombre y correo electrónico (no se publicarán).

Si dejas un comentario anónimo, con insultos o ajeno al tema, iremos hasta tu casa y le diremos a tu mamá la cantidad de porno que hay en tu computadora. Si, lo sabemos.