Question

我在这里搜索了类似的问题，但没有一个对我有用。

我知道有人建议不要在另一个事件中使用套接字，但是我不知道如何在发生事件时触发套接字。

所以我已经初始化了另一个事件中的套接字，该事件每次发生时都会更新。但是套接字连接在每个新更新中都会重复以前的结果。

我尝试在componentDidMount lifecyle中初始化套接字，但它根本无法正常工作。

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 //
}

每当触发“更新”事件而没有消息重复时，我都想触发套接字。

Answer 1

由于套接字在Angular上多次使用nodejs发出信号，对我来说，套接字也是如此，因此我尝试通过this.socket.removeListener( "Your On Event" );删除套接字侦听器，

这帮助我解决了多个套接字调用的问题，请尝试一下，可能有帮助！

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

Answer 3

正如 James 所建议的那样，我已将套接字逻辑放入构造函数中。但是它只是在我的组件重新安装后才被解雇。

查看完我的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中的套接字，以避免重复数据。

套接字io事件触发多次

3 个答案: