如何使用 browserify (commonjs) 在 backbonejs 中为 socketio 注册自定义事件

Question

我需要以声明的方式为以下 socketio 事件放置事件：

连接上的套接字
断开连接时的套接字
消息上的套接字

目前我放在 module.exports 之外。我正在为我的 backbone 应用程序

使用 npm、gulp 和 browserify

以下代码运行良好。我只想以正常方式注册 socketio 事件，这种方式在 module.exports

中是声明性的

    var $ = require('jquery'),
        Backbone = require('backbone'),
        homeTemplate = require("../../templates/home/homeTemplate.hbs"),
        socket = require('socket.io-client')('http://localhost:8080');

        socket.on('connect', function(){
            $('#incomingChatMessages').append($('<li>Connected</li>')); 
        });

        socket.on('message', function(message) {
            $('#incomingChatMessages').append($('<li></li>').text(message));
        });

    Backbone.$ = $;

    module.exports = Backbone.View.extend({

        el: $("#page"),

        initalize: function(){
        },

        render: function(){
          console.log("home view");
          $('.navbar-collapse li').removeClass('active');
          $('.navbar-collapse li a[href="#"]').parent().addClass('active');
          this.$el.html(homeTemplate);
        },

        events: {
            'keypress #outgoingChatMessage': 'processOutgoingMessage'
        },

        processOutgoingMessage: function(e) {
            if(e.which == 13) {
                event.preventDefault();
                socket.send($('#outgoingChatMessage').val());
                $('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val()));
                $('#outgoingChatMessage').val('');
            }
        }
    });

Answer 1

因为 socketIO 不是 backbone 组件。您可以使用通用 backbone 事件或将套接字包装在模型中。

这是使用Backbone全局事件处理事件的一种方法 backbone 查看

var $ = require('jquery'),
    Backbone = require('backbone'),
    homeTemplate = require("../../templates/home/homeTemplate.hbs"),
    socket = require('socket.io-client')('http://localhost:8080');

    socket.on('connect', function(){
        Backbone.trigger("socket:connect");            
    });

    socket.on('message', function(message) {
        Backbone.trigger("socket:message");            
    });

Backbone.$ = $;

module.exports = Backbone.View.extend({

    el: $("#page"),

    initalize: function(){
        Backbone.on("socket:connect", this.connect, this);
        Backbone.on("socket:message", this.message, this);
    },

    render: function(){
      console.log("home view");
      $('.navbar-collapse li').removeClass('active');
      $('.navbar-collapse li a[href="#"]').parent().addClass('active');
      this.$el.html(homeTemplate);
    },

    events: {
        'keypress #outgoingChatMessage': 'processOutgoingMessage'
    },

    connect : function(event){
        $('#incomingChatMessages').append($('<li>Connected</li>')); 
    },

    message : function(event){
       $('#incomingChatMessages').append($('<li></li>').text(message)); 
    },

    processOutgoingMessage: function(e) {
        if(e.which == 13) {
            event.preventDefault();
            socket.send($('#outgoingChatMessage').val());
            $('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val()));
            $('#outgoingChatMessage').val('');
        }
    }
});

编辑：

我在一定程度上得到了这个运行。它缺少一个正确的套接字连接，但其他工作正常。
请随时处理此问题 fiddle。非常感谢@Louis 帮助我 fiddle

如何使用 browserify (commonjs) 在 backbonejs 中为 socketio 注册自定义事件

How to register custom events for socketio in backbonejs using browserify (commonjs)

backbone.js

socket.io

browserify