La idea es tener un formulario con el que se suba una imagen en formato png y se optimice con un optipng o alguna librería parecida. Si además, podemos ir informando al cliente del avance del proceso de upload y optimización en tiempo real, pues mejor que mejor.
En el ejercicio me gustaría probar las siguientes herramientas:
- Express (http://expressjs.com/). Se trata de un framework de desarrollo web inspirado en sinatra.
- Jade (https://github.com/visionmedia/jade). Una herramienta de templating para node.js muy basada en haml (http://haml-lang.com/)
- Connect-form. (https://github.com/visionmedia/connect-form) Un middle-ware para la subida de archivos basado en node-formidable. Node-formidable (https://github.com/felixge/node-formidable) es un modulo para parsear datos de formularios y especialmente para uploads
- Socket.io. (http://socket.io/) que permite gestionar de manera sencilla la comunicación en tiempo real entre navegador y servidor con soporte multinavegador.
De momento, os presento unos ejemplos de como se usan las herramientas. En los siguientes posts iré contando los avances que haga en el ejercicio y como iré usando las distintas piezas (con más o menos acierto).
Express.js
Resulta muy cómodo para responder a urls amigables y agregar middleware:
var app = require('express').createServer();
//middleware para logs
app.use(express.logger({ format: ':method :url' }));
app.get('/', function(req, res){
res.send('Hola mundo');
});
//urls amigables con parámetros
app.get('/usuario/:id', function(req, res){
res.send('Usuario ' + req.params.id);
});
app.listen(8000);
Jade
Al más puro estilo haml, una plantilla como
!!! 5
html(lang="en")
head
title= pageTitle
script(type='text/javascript')
if (foo) {
bar()
}
body
h1 Jade - node template engine
#container
- if (youAreUsingJade)
p You are amazing
- else
p Get on it!
pasa a ser
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jade</title>
<script type="text/javascript">
if(foo) {
bar()
}
</script>
</head>
<body>
<h1>Jade - node template engine</h1>
<div id="container">
<p>You are amazing</p>
</div>
</body>
</html>
Connect-form
Para gestionar los uploads de ficheros (para una app de express):
app.post('/', function(req, res, next){
// connect-form adds the req.form object
// we can (optionally) define onComplete, passing
// the exception (if any) fields parsed, and files parsed
req.form.complete(function(err, fields, files){
if (err) {
next(err);
} else {
console.log('\nuploaded %s to %s'
, files.image.filename
, files.image.path);
res.redirect('back');
}
});
// We can add listeners for several form
// events such as "progress"
req.form.on('progress', function(bytesReceived, bytesExpected){
var percent = (bytesReceived / bytesExpected * 100) | 0;
process.stdout.write('Uploading: %' + percent + '\r');
});
});
Socket.io
La gestión de las comunicaciones entre cliente y servidor se realiza en base a eventos.
En el servidor:
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});
En el cliente:
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
</script>
No hay comentarios:
Publicar un comentario