Socket.io和Backbone

Question

我在學習socket.io，並決定將socket.io添加到我之前構建的主幹應用程序中。

所以使用require.js在我的主app.js文件我有以下幾點：

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); 
    } 
}); 

正如你可以看到我的插座是一個全局變量。因爲我想在我的backbone.view中向這個套接字發出一些東西。我對JavaScript很新，我知道使用全局變量並不總是最好的做法。

我的骨幹看法是這樣的：

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 
     }); 

    } 
}); 

，最後這是我的app.js看起來像在服務器端：

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); 
    }); 

}); 

這現在工作得很好，但我不知道如果這是使用socket.io和骨幹網的正確方法。首先，我不喜歡將套接字元素分配爲全局變量。有沒有其他的方法可以在我的視圖中使用我的套接字？一般來說，我很樂意提供任何建議，我應該如何使用socket.io和主幹。

Answer 1

我認爲你使用backbone和socket.io看起來很好。我建議你看看marionette爲你在骨幹上做一些繁重的工作，並給你更多的工作框架。

移除全局變量的典型方法是創建一個模塊包含對該變量的唯一引用以及該變量的設置。由於模塊被requirejs緩存，所以你可以在任何地方訪問同一個對象。

在這種情況下，你可以創建一個socket.io模塊：

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

    return socket; 
}); 

然後，您可以參考該模塊就像你引用骨幹或jQuery的：

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

你也可以使用骨幹。 wreqr讓你的socket.io模塊在總線上發送事件，以便你的視圖不需要直接引用socket.io及其事件。如果你想使用與socket.io不同的東西，想要重新連接，做一些錯誤處理等等，那麼這很有用。你真的希望在單獨的模塊中使用這些東西。