Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Socket Model Sync (gallery-model-sync-socket) on cdn

Last Updated: 07/16/12

+ 1 -

Clarence Leung

YUI Contributor

See 1 more by this user.

Created: 07/11/12
Last CDN Push: 07/11/12
Build Tag: gallery-2012.07.11-21-38
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.1
Free for use.

An extension which provides a sync implementation using Socket.IO as the
transport method, which can be mixed into a Model or ModelList subclass.

This makes it trivial for your Model or ModelList subclasses to communicate
and transmit JSON data via WebSockets, falling back to Flash sockets, long
polling, or other available real-time transport methods if not supported.

Currently based on Jake Luer's (@logicalparadox/jakeluer) backbone.iobind though
this will likely change in the future to take better advantage of YUI's custom
event system.

Tags:
clarle

Shows how a Model initializes the Socket.IO bindings to pass Socket.IO messages to a respective handler.

Code Sample

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

/* Client-side code for a chat application */
 
// Connect to socket.io
 
window.socket = io.connect('http://localhost');
 
// Set-up code in a Model
 
PostModel = Y.PostModel = Y.Base.create('postModel', Y.Model, [Y.ModelSync.Socket], {
        root: '/posts'
    }, {
        ATTRS: {
            id: '',
            author: '',
            email: '',
            message: ''
        }
    });
 
// Set-up code in a View
 
PostView = Y.PostView = Y.Base.create('postView', Y.View, [], {
        containerTemplate: '<li class="post-item" />',
 
        template: Y.one('#blog-post-template').getContent(),
 
        initializer: function () {
            var model = this.get('model'),
                self = this;
 
            model.onSocket('delete', function (e) {
                self.constructor.superclass.remove.call(self);
            });
 
            model.onSocket('update', function (e) {
                this.setAttrs(e.data);
            });
 
            model.after('change', this.render, this);
        }
        // And so on
});
 
/* Server-side code for a chat application */
 
var server = app.listen(3000),
    io = require('socket.io').listen(server),
    db = new Collection();
 
io.sockets.on('connection', function (socket) {
    socket.on('posts:update', function (data, callback) {
        db.update(data);
        socket.emit('posts/' + data.id + ':update', {data: data});
        socket.broadcast.emit('posts/' + data.id + ':update', {data: data});
    });
 
    socket.on('posts:read', function (data, callback) {
        socket.emit('posts:read', {data: db.toJSON()});
    });
 
    socket.on('posts:construct', function (data, callback) {
        data = db.add(data);
        socket.emit('posts:construct', {data: data});
        socket.broadcast.emit('posts:construct', {data: data});
    });
 
    socket.on('posts:delete', function (data, callback) {
        db.remove(data);
        socket.emit('posts/' + data.id + ':delete');
        socket.broadcast.emit('posts/' + data.id + ':delete');
    });
});

/* Client-side code for a chat application */

// Connect to socket.io
        
window.socket = io.connect('http://localhost');

// Set-up code in a Model

PostModel = Y.PostModel = Y.Base.create('postModel', Y.Model, [Y.ModelSync.Socket], {
        root: '/posts'
    }, {
        ATTRS: {
            id: '',
            author: '',
            email: '',
            message: ''
        }
    });

// Set-up code in a View

PostView = Y.PostView = Y.Base.create('postView', Y.View, [], {
        containerTemplate: '<li class="post-item" />',
        
        template: Y.one('#blog-post-template').getContent(),
        
        initializer: function () {
            var model = this.get('model'),
                self = this;

model.onSocket('delete', function (e) {
                self.constructor.superclass.remove.call(self);
            });

model.onSocket('update', function (e) {
                this.setAttrs(e.data);
            });

model.after('change', this.render, this);
        }
        // And so on
});

/* Server-side code for a chat application */

var server = app.listen(3000),
    io = require('socket.io').listen(server),
    db = new Collection();

io.sockets.on('connection', function (socket) {
    socket.on('posts:update', function (data, callback) {
        db.update(data);
        socket.emit('posts/' + data.id + ':update', {data: data});
        socket.broadcast.emit('posts/' + data.id + ':update', {data: data});
    });

socket.on('posts:read', function (data, callback) {
        socket.emit('posts:read', {data: db.toJSON()});
    });

socket.on('posts:construct', function (data, callback) {
        data = db.add(data);
        socket.emit('posts:construct', {data: data});
        socket.broadcast.emit('posts:construct', {data: data});
    });

socket.on('posts:delete', function (data, callback) {
        db.remove(data);
        socket.emit('posts/' + data.id + ':delete');
        socket.broadcast.emit('posts/' + data.id + ':delete');
    });
});