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

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

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

Я попытался инициализировать сокет в жизненном цикле 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» без дублирования сообщения.

1
JKhan 2 Май 2019 в 10:48

3 ответа

Лучший ответ

Если вы не можете гарантировать, что 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?  
    })
  }
}
0
James 2 Май 2019 в 08:06

Так как сокеты испускаются несколько раз на Angular с помощью nodejs, то же самое произошло и со мной для сокетов, я попытался удалить прослушиватели сокетов с помощью this.socket.removeListener( "Your On Event" );,

Это помогло мне решить проблему множественных вызовов сокетов, попробуйте, это может помочь!

1
Markus 17 Янв 2020 в 11:22

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

Посмотрев код моего сервера 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, чтобы избежать многократного повторения данных.

0
Ted Khi 2 Май 2019 в 09:16