2

我正在尝试学习 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);
    }
});

如您所见，我的套接字是一个全局变量。因为我想在我的主干视图中向这个套接字发出一些东西。我对 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 与骨干一起使用。

4

1 回答 1

6

我认为您对骨干网和 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');
  });

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

于 2013-07-18T19:35:24.943 回答