CODEWITHSUNDEEP
node.jsbackbone.jssocket.io
s_curry_s
s_curry_s

Reputation: 3432

Socket.io and Backbone

I am trying to learn socket.io and I decided to add socket.io to a backbone application that I have built before.

so using require.js I have the following in my main app.js file: 

require(
    ["jquery",
    "underscore",
    "backbone",
    "bootstrap",
    "view/postsview",
    "model/model",
    "collection/collection",
    "socketio",


],
  function($, _, B,boot, postsView, model, collection, io) {

   $(function() {


        window.socket = io.connect('http://127.0.0.1');

        var postmodel = new model();
        var postcollection = new collection();

        window.socket.on('newPost', function (data) {
            postcollection.create(data);
        });

        var posts = new postsView({model:postmodel, collection:postcollection});
        posts.render();
        $(".maincontainer").html(posts.el);
    }
});

As you can see my socket is a global variable. Because I want to emit something to this socket in my backbone.view. I am pretty new to javascript and I know that using global variables are not always the best practice.

my backbone view looks like: 

var FormView = Backbone.View.extend({
    template: _.template(formTemplate),

    render: function(){
        this.$el.html(this.template());
    },

    events:{
        'click #submit-button' : 'save'
    },

    save: function(e){
        e.preventDefault();
        var newname = this.$('input[name=name-input]').val();
        var newadress = this.$('input[name=adress-input]').val();

        this.collection.create({
            name: newname, 
            adress : newadress, 
            postedBy: window.userID
        });

        window.socket.emit('postEvent' , {
            name: newname, 
            adress : newadress, 
                    postedBy: window.userID
        });

    }
});

and lastly this is what my app.js looks like on the server side: 

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
  socket.on('postEvent', function (data) {
    socket.broadcast.emit('newPost', data);
  });

});

This works fine right now but i am not sure if this is the right way to use socket.io with backbone. First of all I dont like assigning the socket element as a global variable. Is there another way to use reach my socket inside my view? In general I am open to any suggestions how I should be using socket.io with backbone.

Upvotes: 2

Views: 3468

Answers (1)

AndyD
AndyD

Reputation: 5365

I think your use of backbone and socket.io looks fine. I would recommend you have a look at marionette to do some of the heavy lifting for you in backbone and give you a bit more of a framework to work in.

The typical way to remove global variables is to create a module that contains the only reference to that variable and the setup of that variable. Since modules are cached by requirejs, you'll have access to the same object everywhere.

In this case, you could create a socket.io module:

define(["socketio"], function (io) {
  var socket = io('http://localhost');

  return socket;
});

You then reference this module just like you reference backbone or jquery:

require(["yoursocketmodule", "underscore"],
  function(socket, _) {
    socket.emit('test');
  });

You could also use backbone.wreqr to let your socket.io module emit events on a bus so that your views don't need a direct reference to socket.io and its events. That's useful in case you want to use something different than socket.io, want to reconnect, do some error handling etc... you want those things in a seperate module really.

Upvotes: 5

Related Questions