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的使用看起来很好。我建议你看看marionette为骨干做一些繁重的工作，并为你提供一些工作框架。

删除全局变量的典型方法是创建一个模块，其中包含对该变量的唯一引用以及该变量的设置。由于模块是由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不同的东西，想要重新连接，做一些错误处理等等，那么这很有用......你真的希望这些东西在一个单独的模块中。

Socket.io和Backbone

1 个答案: