mensajeria "casera" andando

[Nicolas Zuasti]

Gente hice una app de express. Le cargue las cosas que necesitamos (underscore, backbone, backbone.io, etc) y deje un ejemplo mínimo andando

Adjunto el proyecto "entero" sin los modulos de node, "npm install" para probarlo.

Es una chotada lo que hice, pero para marcar un concepto da.

Usa templates de underscore? (creo) mezclados con Jade -> NO agradable a la vista --- mejorar urgente.

Por si no les anda dejo el codigo del server y del "cliente" aca abajo. Salu2

Server:

/**

 * Module dependencies.

 */

var express = require('express')

  , routes = require('./routes');

var backboneio = require('backbone.io');

var app = module.exports = express.createServer();

// Configuration

app.configure(function(){

  app.set('views', __dirname + '/views');

  app.set('view engine', 'jade');

  app.use(express.bodyParser());

  app.use(express.methodOverride());

  app.use(app.router);

  app.use(express.static(__dirname + '/public'));

});

app.configure('development', function(){

  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));

});

app.configure('production', function(){

  app.use(express.errorHandler());

});

// Routes

app.get('/', routes.index);

app.listen(3000, function(){

  console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);

});

var backendMensajes = backboneio.createBackend();

backendMensajes.use(backboneio.middleware.memoryStore());

backboneio.listen(app, { mensajes: backendMensajes });

Cliente:

h1= title

p Welcome to #{title}

script(src="/javascripts/jquery.js")

script(src="/javascripts/underscore.js")

script(src="/javascripts/backbone-min.js")

script(src="/socket.io/socket.io.js")

script(src="/socket.io/backbone.io.js")

script(type="text/javascript")        

        var Mensaje = Backbone.Model.extend({

            

            initialize: function() {

                this.bind('error', function(model, err) {

                    alert(err.message);

                });

            }

            

        });

    

        var Mensajes = Backbone.Collection.extend({

            

            // defino el backend para los mensajes

            backend: 'mensajes',

        

            model: Mensaje,

        

            initialize: function() {

                // (binding al default, no probe aun hacer uno por uno)

                this.bindBackend();

            }

        

        });

        

        var VistaMensaje = Backbone.View.extend({

            

            tagName: 'li',

            

            events: {

                'click .delete': 'delete'

            },

            

            initialize: function() {

                _.bindAll(this, 'render', 'delete');

                

                this.template = _.template($('#template-mensaje').html());

            },

            

            render: function() {

                $(this.el).html(this.template(this.model.toJSON()));

                return this;

            },

            

            delete: function(e) {

                e.preventDefault();

                this.model.destroy();

            }

            

        });

    

        var VistaMensajes = Backbone.View.extend({

        

            events: {

                'click .send': 'send',

                'keypress .mensaje': 'keypress'

            },

        

            initialize: function(options) {

                _.bindAll(this, 'render', 'send', 'keypress');

            

                this.collection.bind('add', this.render);

                this.collection.bind('change', this.render);

                this.collection.bind('remove', this.render);

                this.collection.bind('reset', this.render);

                this.collection.fetch();

                

                this.template = _.template($('#template-mensajes').html());

                

            },

        

            render: function() {

                $(this.el).html(this.template());

                

                this.collection.each(function(mensaje) {

                    var view = new VistaMensaje({ model: mensaje });

                    this.$('ul').append(view.render().el);

                });

                

                return this;

            },

        

            send: function() {

                this.collection.create({ texto: this.$('.mensaje').val() }, { wait: true });

                this.$('.mensaje').val('');

            },

            

            keypress: function(e) {

                if (e.which === 13) this.send();

            }

        

        });

        

        $(function() {

            window.mensajes = new Mensajes();

            new VistaMensajes({ el: $('#mensajes'), collection: mensajes }).render();

        });

            

    

script(id="template-mensaje", type="template")

  | <%= texto %>

  a(class="delete", href="#")

   [x]

script(id="template-mensajes", type="text/template")

  input(class="mensaje", type="text")

  input(class="send", type="submit", value="Mandar Mensaje")

  ul

h1

  Mensajes

div#mensajes

A.P. Nicolás Zuasti
@zonical.net/cv

[Laureano Nicolás De Andrea Gallo]

clap clap clap!!!

2012/5/2 Nicolas Zuasti <nicoz...@gmail.com>

[Nicolas Zuasti]

Juge un ratito mas con esto

A que llegue? A un mini chat muyyy simple (poner nick arriba) mandar mensaje abajo. Tiene un poco de css, nada del otro mundo, todo como para que quede mas "chat-istico".

Lo probe a la vez en chrome, safari, firefox e internet explorer 9 (y si.. hay que probar en eso tambien).

Si lo prueban cuenten que tal, para probarlo usen mas de 1 navegador a la vez, sino no tiene gracia.

salu2

A.P. Nicolás Zuasti
@zonical.net/cv