Question

socket.on('new message', function(data) {
    self.createMessage(data);
}); 

createMessage: function(data) {
    setTimeout(function() {
        window.App.data.messages.fetch({
            success: function() {
                console.log('success')
            }
        });
    }, 1000); 
    window.App.core.vent.trigger('app:log', 'Chat View: Received a new message!');
}

比方说，我连接了三个套接字/用户。当我运行上面的代码时，每个客户端都会发出三次GET请求（连接的用户数量很多）。有点烦我，它运作良好，但我不喜欢不必要的请求。

这有点令人困惑，因为如果我只是添加了一些像这样的HTML。

createMessage: function(data) {
    this.$el.find('.message-content').append('<div class="message"><b>'+data.username+':</b>'+data.message+'</div>');
    window.App.core.vent.trigger('app:log', 'Chat View: Received a new message!');
}

然后只在所有连接的套接字/用户中发生一次而不是三次？但是当我获取GET然后它想要三次提出这个请求时，嗯？任何想法，我缺少什么？

完整代码： 所以没有混淆

var Marionette = require('backbone.marionette'),
    MessagesView = require('./messages'),
    socket = io.connect();

module.exports = ChatView = Marionette.ItemView.extend({

    className: 'chat',

    template: require('../../templates/chat.hbs'),

    events: { 
        'submit #chat-form': 'sendMessage' 
    },                

    initialize: function() {
        var self = this;
        this.messagesView = new MessagesView({ collection: window.App.data.messages });
        socket.on('new message', function(data) {
            self.createMessage(data);
        }); 
    },    

    onRender: function() {
        this.$el.find('.message-content').append(this.messagesView.render().$el);
    },

    sendMessage: function(e) {
        e.preventDefault();
        var $message = this.$el.find('input.message');
            $email = this.$el.parent().attr('data-email');
            $username = this.$el.parent().attr('data-username');
        var message = {
            email   : $email,
            username: $username,
            message : $message.val()
        }
        if($message.val() != '') {
            socket.emit('send message', $message.val());
            window.App.data.messages.create(message);
            $message.val('');
        }
        window.App.core.vent.trigger('app:log', 'Chat View: Sent a new message!');
    },

    createMessage: function(data) {
        window.App.data.messages.fetch({
            success: function() {
                console.log('success')
            }
        }); 
        //this.$el.find('.message-content').append('<div class="message"><b>'+data.username+':</b>'+data.message+'</div>');
        window.App.core.vent.trigger('app:log', 'Chat View: Received a new message!');
    }

});

Answer 1

所以socket.io和backbone.js组合似乎并不受欢迎。它是令人惊叹的技术IMO。

好的，所以我找到了一个解决方案，我忘记了当.fetch发出我的GET请求时，.create发出了POST请求。

因此，只需向.create方法添加一个回调，然后在成功时将数据发送到套接字，然后将其返回给客户端并向所有套接字发出GET请求。像魅力一样，这是我的解决方案。

var Marionette = require('backbone.marionette'),
    MessagesView = require('./messages'),
    socket = io.connect();

module.exports = ChatView = Marionette.ItemView.extend({

    className: 'chat',

    template: require('../../templates/chat.hbs'),

    events: { 
        'submit #chat-form': 'sendMessage' 
    },                

    initialize: function() {
        var self = this;
        this.messagesView = new MessagesView({ collection: window.App.data.messages });
        socket.on('new message', function(data) {
            self.createMessage(data);
        }); 
    },    

    onRender: function() {
        this.$el.find('.message-content').append(this.messagesView.render().$el);
    },

    sendMessage: function(e) {
        e.preventDefault();
        var $message = this.$el.find('input.message');
            $email = this.$el.parent().attr('data-email');
            $username = this.$el.parent().attr('data-username');
        var message = {
            email   : $email,
            username: $username,
            message : $message.val()
        }
        if($message.val() != '') {
            //window.App.data.messages.create(message);
            window.App.data.messages.create({ message }, {
                success: function() {
                    socket.emit('send message', $message.val());
                }
            });
            $message.val('');
        }
        window.App.core.vent.trigger('app:log', 'Chat View: Sent a new message!');
    },

    createMessage: function(data) {
        window.App.data.messages.fetch({
            success: function() {
                console.log('success')
            }
        }); 
        window.App.core.vent.trigger('app:log', 'Chat View: Received a new message!');
    }

});

这解决了我的所有问题。对于一个我没有发出任何GET请求，直到数据在服务器上成功。成功后我发出数据，然后.fetch()方法只为每个套接字运行一次！

Backbone.js只发送一次GET请求？

1 个答案: