Question

我正在升级传统的基于jquery的应用程序，将其中的一部分转换为ReactJs组件，并使用socket.io作为数据传输介质。

页面上有一些React组件。 react组件将使用componentDidMount方法从套接字连接接收更新。

例如：

componentDidMount: function(){
    socket.on('connect', function(data){....});
    socket.on('anotherEvent', function(data){....})
}

现在，问题在于React组件将分散在整个页面中，并且不会在单个应用程序结构下，并且他们将订阅相同的套接字事件以保持同步。

为此，我编写了下面的socket.io包装器，这样可以避免对相同事件的多个订阅，但可以在事件更新时通知所有感兴趣的React组件。

window.socketEvents = (function(){
    var socket = io.connect("http://localhost:3000"),
        events = {};                    //events structure = {'event_name':subscribers:[callback functions], isSubscribed:true}

    var _register = function(event, callback){
        events[event] = events[event] || {};
        events[event].subscribers = events[event].subscribers || [];
        events[event].subscribers.push(callback);
    };

    var _subscribe = function(event){
        console.log('Subscribingto: ', event);
        socket.on(event, function(data){    // notifiy the subscribers of this event by firing their callbacks.
            for(var cb=0;cb<events[event].subscribers.length;cb++){
                events[event].subscribers[cb](data);
            };
        });
        events[event].isSubscribed = true;
    };  

    var emit = function(event, data){
        socket.emit(event, data);
    };

    return {
        listen: function(event, callback){
            _register(event, callback);
            if(!events[event].isSubscribed){
                _subscribe(event);
            };
        },
        emit: emit
    }

})();

使用新包装器反应示例：

在ReactClassOne中：

componentDidMount: function(){
    socketEvents.listen('connect', function(data){...});
    socketEvents.listen('anotherEvent', function(data){...})
}

在ReactClassTwo中：

componentDidMount: function(){
    socketEvents.listen('connect', function(data){...})
    socketEvents.listen('anotherEvent', function(data){...})
}

问题：一切都按预期工作，但有时connect事件无法触发。这种情况间歇性地发生。

我知道我无法在我的应用中正确找出connect部分。此外，connect可能只需要在页面上触发一次，而不是在每个组件中触发。

有人可以帮助我解决我的设计问题。谢谢！

连接事件上的Socket.io有时无法触发/写一个更好的socket.io包装器

0 个答案: