событие сокета io срабатывает несколько раз

Question

Я искал подобные вопросы здесь, но ни один из них не работает для меня.

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

Итак, я инициализировал сокет внутри другого события, которое обновляется каждый раз, когда что-то происходит. Но сокетное соединение повторяет предыдущий результат с каждым новым обновлением.

Я попытался инициализировать сокет в жизни componentDidMount, и он просто не работает.

class UploadComponent extends Component {
  constructor (props) {
    super(props);

    this.state = {
      endpoint: "http://localhost:3000",
    }

    this.uploadModal = this.uploadModal.bind(this);
  }

  uploadModal () {

     update.on('success', file => {
          let {endpoint} = this.state;
          let socket = socketIOClient(endpoint, {transports: ['websocket', 'polling', 'flashsocket']});

          socket.on('data', (mydata) => {
            console.log(mydata) // <-- This gets fired multiple times.
          })
      })

   }

// some more code //
}

Я хочу запускать сокет всякий раз, когда происходит событие «update» без дублирования сообщения.

Answer 1

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

После просмотра кода моего сервера nodejs я попытался заменить

// some code //
io.on('connection', (client) => {
  client.emit('data', { 
              image: true, 
              buffer: imageBuffer.toString('base64'),
              fileName: meta.name
  })
})

на

// some code //
io.emit('data', { 
   image: true, 
   buffer: imageBuffer.toString('base64'),
   fileName: meta.name
})

, и это работает!

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

Answer 2

Если вы не можете гарантировать, что success вызывается только один раз, вам нужно инициализировать сокет-соединение / обработчик событий вне этой функции

class UploadComponent extends Component {
  constructor (props) {
    super(props);

    const endpoint = "http://localhost:3000";
    this.state = { endpoint };

    this.uploadModal = this.uploadModal.bind(this);
    this.socket = socketIOClient(endpoint, {transports: ['websocket', 'polling', 'flashsocket']});
    this.socket.on('data', (mydata) => {
        console.log(mydata)
    })
  }

  uploadModal() {
    update.on('success', file => {
     // this.socket.emit perhaps?  
    })
  }
}