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元素指定为全局变量.是否有另一种方法可以在我的视图中使用到达我的套接字？总的来说,我对如何使用带有主干的socket.io的任何建议持开放态度.

Answer 1

我认为你使用backbone和socket.io看起来很好.我建议你看一下牵线木偶,为骨干做一些繁重的工作,并为你提供更多的工作框架.

删除全局变量的典型方法是创建一个模块,其中包含对该变量的唯一引用以及该变量的设置.由于模块由requirejs缓存,因此您可以在任何地方访问同一个对象.

在这种情况下,您可以创建一个socket.io模块:

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

  return socket;
});

然后,就像引用backbone或jquery一样引用此模块:

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

您还可以使用backbone.wreqr让您的socket.io模块在总线上发出事件,以便您的视图不需要直接引用socket.io及其事件.如果你想使用与socket.io不同的东西,想要重新连接,做一些错误处理等等,那么这很有用......你真的希望这些东西在一个单独的模块中.