Отключение Socket.io не работает от компонента

Question

Я пытаюсь создать чат в реальном времени, используя socket.io. Однако у меня возникают проблемы с отключением приложения чата.

Внешний интерфейс

constructor(props){
        super(props);
            this.state={
                endpoint: 'localhost:3001'
        }
        this.socket = socketIOClient(this.state.endpoint);
    }
    componentDidMount() {
        this.socket.emit('join', {name: "name",room: "rooms" }, () => {

        });
    }
    componentWillUnmount(){
        this.socket.emit('disconnect');
        this.socket.off();
    }

Сторона сервера

var app = express();
let server = app.listen(PORT, ()=> console.log('Listening on port ' + PORT));
let io = require('socket.io')(server);

io.on('connection', (socket) => {
    console.log('We have a new conneciton');

    socket.on('join', ({name, room}, callback) => {
        console.log(name, room);

    })

    socket.on('disconnect', () => {
        console.log('user had left');
    })
})

Оставленный пользователь не появляется в консоли, когда компонент отключен.

Где я go ошибся?

Также я заметил, что сокет 'присоединиться' и 'отключиться всегда будет работать, даже если я не звоню со стороны клиента. почему это?

Answer 1

Вы должны использовать socket.disconnect() для отключения от сокета.

off () не останавливает этот сокет на стороне клиента от получения каких-либо отправленных сервером сообщений, он просто предотвращает указанное событие Обработчик от стрельбы. Обычно, желаемое.

join/disconnect - это события по умолчанию в сокете, событие join всегда срабатывает, когда клиент подключается к сокету, а disconnect всегда запускается, когда клиент отключается Вот почему вы видите эти события в журналах, даже если вы не вызываете их явно, эти события будут вызываться автоматически.

Попробуйте приведенный ниже код для отключения от сокета.

constructor(props){
    super(props);
    this.state = {
        endpoint: 'localhost:3001'
    }
    this.socket = socketIOClient(this.state.endpoint);
}
componentDidMount() {
    this.socket.emit('join', { name: "name", room: "rooms" }, () => {
    });
}
componentWillUnmount(){
    this.socket.emit('disconnect');
    socket.disconnect();
}