Nodejs + ReactJS socket.io關閉/ removeListener不起作用

Question

我正在嘗試在我的react / nodejs應用程序上實現socket.io。 我可以成功訂閱一個事件並將數據推送到前端。 但是當不再需要某個事件時，我無法取消訂閱。

版本 socket.io-2.0.4 socket.io-client-2.0.4

下面是示例代碼

前端

subscribeForTimer() {
    socket.on('timer', timestamp => {
        console.log(timestamp)
    });
    socket.emit('subscribeToTimer', 1000);
}

UnubscribeFromTimer() {
    socket.removeListener ( 'timer', (data) => {
        console.log ( 'stopped' )
    } );
}

后端

const socketServer = http.createServer ();
// create a server instance with the port and host
socketServer.listen ( port, host );

// Make the sockets listen on the created server instance
const sio = io.listen ( socketServer );
sio.sockets.on ( socketEvents.CONNECTION, ( socket ) => {
    subscribeToTimer ( socket );
    UnubscribeFromTimer ( socket );
    terminateConnection ( socket );
} );
function subscribeToTimer ( socket ) {
    socket.on ( 'subscribeToTimer', ( interval ) => {
        setInterval ( () => {
            socket.emit ( 'timer', new Date () );
        }, interval );
    } );
}

我嘗試使用off / removeListener / removeAllListeners，但沒有任何效果。 它也不會引發任何錯誤。 任何幫助深表感謝。 TIA！

Answer 1

您應該傳遞相同的已訂閱函數實例以取消訂閱：

在前端：

 const subscribeFn = timestamp => { console.log(timestamp) } subscribeForTimer() { socket.on('timer', subscribeFn); socket.emit('subscribeToTimer', 1000); } UnubscribeFromTimer() { socket.removeListener('timer', subscribeFn); } 

在后端

 const socketServer = http.createServer (); // create a server instance with the port and host socketServer.listen ( port, host ); // Make the sockets listen on the created server instance const sio = io.listen ( socketServer ); let intervalId; sio.sockets.on ( socketEvents.CONNECTION, ( socket ) => { subscribeToTimer ( socket ); intervalId && clearInterval(intervalId) UnubscribeFromTimer ( socket ); terminateConnection ( socket ); } ); function subscribeToTimer ( socket ) { socket.on ( 'subscribeToTimer', ( interval ) => { intervalId = setInterval ( () => { socket.emit ( 'timer', new Date () ); }, interval ); } ); }