是否可以将 socket.io 限制为每个事件只有一个侦听器？

Question

我的问题是是否可以限制特定事件的绑定侦听器可能性？例如我有一个监听器：

//In server
socket.emit('something', { message: 'Hello World!' });

//At client
socket.on('something', (data) => {
    console.log(data.message);  
});

//Output in console
Hello World!

但是，如果我在代码中的其他位置复制该 sn-p，我会将 2 个相同的侦听器绑定到一个事件，因此我会得到 2 个我只想要一个的控制台日志。

//In server
socket.emit('something', { message: 'Hello World!' });

//At client
socket.on('something', (data) => {
    console.log(data.message);  
});

socket.on('something', (data) => {
    console.log(data.message);  
});

//Output in console
Hello World!
Hello World!

我知道对于单个事件的不同操作可能有多个侦听器，但是当我在某些框架中使用 socket.io 并在组件之间切换（我在组件的构造函数中绑定）时，框架只是绑定相同的每次我在组件之间切换时监听相同的事件。所以结果如上。

所以我的问题是：

• 是否可以检查某些事件是否已经有监听器并忽略第二个绑定？
• 或者，如果有一些 socket.io 配置设置允许每个事件只绑定一个侦听器，并且当您绑定一个新的侦听器时，它会覆盖旧的侦听器？
• 或者只是一些关于如何处理这种情况的良好做法？

Answer 1

socket.io 套接字派生自EventEmitter 对象。因此，它的侦听器功能完全来自该实现。 EventEmitter 对象没有阻止一个给定事件的多个侦听器的功能。

所以，你有几个选择：

1. 当您不再希望附加第一个事件侦听器时，您可以删除它。

2. 您可以覆盖 .on() 以拒绝为已有处理程序的事件设置新的处理程序，或者您可以在设置新的处理程序之前删除之前的处理程序。

3. 您可以更改逻辑，以便您自己的代码在您不再希望它处于活动状态时删除它自己的事件侦听器。

这是一个您可以在每个新套接字上调用的函数，以避免给定的eventName 拥有多个侦听器：

function hookSocketSingle(socket) {
    let origOn = socket.on;
    socket.on = function(eventName, listener) {
        // allow the event handler to be registered only if one doesn't already exist
        if (this.listenerCount(eventName) === 0) {
            return origOn.call(this, eventName, listener);
        } else {
            return this;
        }
    }
}

Answer 2

jfriend00的回答可以进一步简化b/c Emitter类有一个方法叫hasListeners,https://socket.io/docs/client-api/

socket 实际上继承了 Emitter 类的每个方法，比如 hasListeners，一次或关闭（删除事件侦听器）。

let exist = socket.hasListeners(eventName)
if (exist) {
   // maybe just return
} else { 
   // the usual stuff
   socket.on(eventName, ...)
}

Answer 3

在“paolo mania”评论和“jfriend00”回答的帮助下，我已经解决了 Angular2 框架和 Socket.IO 库的问题。

所以首先我创建了一个服务来保持 Socket.IO 连接在整个组件创建和销毁周期中保持打开状态。

import { Injectable } from '@angular/core';

declare var io: any;

@Injectable()
export class SocketService {

    // We create socket object for socket.io lib and events object 
    // to store all events that are bound from specific component 
    socket;
    events;

    // When the service is injected it checks if socket.io and our 
    // events objects are initialised
    constructor() {
        if(!this.socket) {
            this.socket = io(environment.apiURL);
            this.events = {};
        }
    }

    // Then we create a middleware function to intercept the socket.on()
    // function and we request one more parameter which is the component name.
    on(component, event, callback) {
        // We check if component key already exists in our events object. 
        if(this.events[component]) {
            // We check if the wanted event is already bound in selected component
            // (basically we check if its added to events[component] array) 
            if(this.events[component].indexOf(event) < 1) {
                // If it's not added we bind the event to socket and add it to events[component] array
                this.events[component].push(event);
                this.socket.on(event, callback);
            }
        // If the component key does not exist we initialise event[component] as an array 
        // and we add our event to the array as well as we bind the socket event
        } else {
            this.events[component] = [];
            this.events[component].push(event);
            this.socket.on(event, callback);
        }
    }

    // We also create a middleware function to intercept the socket.emit()
    // function and just forward data to socket.emit
    emit(event, data = {}) {
        this.socket.emit(event, data);
    }

    // And last we add unsubscribe function so we can unbind all listeners from
    // single component (mostly used in onNgDestroy() when we don't want that bound events
    // are persistent between more than one component)
    unsubscribe(component) {
        // We check if component key exists in events object
        if(this.events[component]) {
            // We iterate through array and we remove listeners for every 
            // event that was bound to selected component
            this.events[component].forEach((event) => {
                this.socket.off(event);
            });

            // And in the end we remove component key from events
            delete this.events[component];
        }
    }
}

所以我们有服务，我们可以绑定任意数量的事件，它们按组件排序，所以我们知道哪个组件有哪些绑定。如果我们想在同一个组件中绑定相同的事件，我们只需忽略它，当我们需要时，我们可以取消绑定组件中的所有内容，这样当我们的组件被销毁或不活动时，不会触发一些有趣的动作。

在组件方面，我们像其他所有服务一样使用该服务：

import { ApiService } from '../core/socket.service'; 

@Component({
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.scss']
})
export class ExampleComponent {

    // We inject our socket service in constructor
    constructor(private socket: SocketService) {
        // We bind wanted events with component name and handle them as we would normally in socket.io
        this.socket.on(this.constructor.name, 'event1', (data) => {
            console.log(data);
        });

        this.socket.on(this.constructor.name, 'event2', (data) => {
            console.log(data);
        });
    }

    ... other functions ...

     // If we don't want to keep our events persistent for another component we just unsubscribe.
     // When we will return to this component it will re-bind the events stated in component constructor.
     // But if we choose to use persistent mode it will not duplicate the events.
     ngOnDestroy() {
        this.socket.unsubscribe(this.constructor.name);
    }
}