Nodejs + ReactJS socket.io off/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 但没有任何效果。它也不会抛出任何错误。任何帮助深表感谢。蒂亚！

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 );
    } );
}