Дочерний компонент, удаляющий прослушиватель события socket.io из родительского компонента

Question

У меня есть приложение React, и я интегрирую socket.io в приложение реакции. На некоторых страницах, требующих изменения в реальном времени, я использую сокеты для подключения к комнате, а после изменения отправляю сообщения в эту комнату.

У меня есть дочерняя родительская структура, в которой родитель присоединяется к комнате, а ребенок присоединяется к отдельной комнате. Все работает отлично. Когда пользователь отключается и снова подключается, у меня есть событие на componentDidMount , которое автоматически присоединится к комнате, когда пользователь снова подключится к Интернету. И на componentWillUnmount я удаляю этот прослушиватель событий. Но что происходит, когда дочерний компонент отключается и после повторного подключения к Интернету происходит родительское событие, которое должно автоматически присоединиться к комнате родительского компонента, которое не вызывается. Похоже, Child componentWillUnmount также удаляет прослушиватель событий родительского компонента. Пожалуйста, дайте мне знать, как я могу это исправить и что я делаю неправильно.

sockets.js

import openSocket from 'socket.io-client';

let socket = '';
if(typeof window !== "undefined") {

    let connectionUri = "http://"+window.location.hostname+":9001"


    socket = openSocket(connectionUri;

    socket.on('messages', function(data) {
        alert(data);
    });
}

export default socket;

Я использую приведенный выше файл в каждом реагирующем компоненте для выполнения функций, касающихся сокетов.

parent.js

import React, {Component} from 'react'
import Child1 from '../Child1/Index'
import Child2 from '../Child2/Index'
import socket from '../../../sockets'


export default class Parent extends Component {

    componentDidMount() {
        socket.emit('joinRoom', 'Parent')
        socket.on('changeStatus', (data) => {
            .....
        })
        socket.on('connect', () => {
            socket.emit('joinRoom', 'Parent')
        })
    }

    componentWillUnmount() {
        socket.emit('leaveRoom', 'Parent')
        socket.off('changeStatus')
        socket.off('connect')
    }

    render() {

            switch(this.props.pageValue) {
                case "Child1":
                    return <Child1 .... />
                case "Child2":
                    return <Child2 .... />
                default:
                    return null
            }
    }

}

child.js

import React, {Component} from 'react'
import socket from '../../../sockets'


export default class Parent extends Component {

    componentDidMount() {
        socket.emit('joinRoom', 'Child')
        socket.on('changeStatus', (data) => {
            .....
        })
        socket.on('connect', () => {
            socket.emit('joinRoom', 'Child')
        })
    }

    componentWillUnmount() {
        socket.emit('leaveRoom', 'Child')
        socket.off('changeStatus')
        socket.off('connect')
    }

    render() {
       ......
    }

}

Server.js

client.on('joinRoom', function(room) {
    console.log('Connected to Room:', room);
    client.join(room);
});

client.on('leaveRoom', function(room) {
    console.log('Leaving Room:', room);
    client.leave(room);
});

Поэтому, когда socket.off ('connect') вызывается для Child1 / Child2. Кажется, что Parent connect слушатель событий также удаляется.

Пожалуйста, дайте мне знать, если у вас есть вопросы. Извините за плохой английский

Answer 1

Вызов socket.off только с именем события вызывает отписку от всех обратных вызовов для этого события. Вы должны указать, какой обратный вызов отказаться от подписки, чтобы другие могли остаться.

componentDidMount() {
  socket.emit('joinRoom', 'Child')
  socket.on('changeStatus', this.onChangeStatus);
  socket.on('connect', this.onConnect);
}

onChangeStatus(data) {
 ...
}

onConnect() {
  socket.emit('joinRoom', 'Child')
}

componentWillUnmount() {
  socket.emit('leaveRoom', 'Child')
  socket.off('changeStatus', this.onChangeStatus);
  socket.off('connect', this.onConnect);

  // instead of:
  // socket.off('changeStatus') 
  // socket.off('connect') 
}