Question

我有一个顶级组件App.js和两个孩子hue.js和switch.js（他们是兄弟姐妹）。

在App.js中，我创建了这样的套接字：

var socket = require('socket.io-client')('http://192.168.0.26:4000');

socket.once("connect", () =>{
  socket.emit('authenticate', {token: 'test'});
  socket.once('authenticated', ()=>{
    console.log("Application connected !");
  });
});

export default class main extends Component {
  ...
}

下面，我这样称呼我的Hue孩子：

<Hue propSocket = {socket}/>

我的Switch孩子是这样的：

<Switch propSocket = {socket}/>

正如您所看到的，我通过了在顶层创建的套接字，因此我没有多个连接。

以下是Hue组件的代码：

export default class Hue extends Component {
  state = {
    toggleState : false,
  }

  importedSocket = this.props.propSocket

  render() {    
    this.importedSocket.once('hue-state-change', (state)=>{
      console.log("Received "+state);
      this.setState({toggleState: state});
    });
  }
  ...
}

switch.js的代码基本相同。

应该会发生这种情况：当我在两台设备上运行应用程序时，如果一个用户修改了某个值，则会将该值广播给所有其他客户端。

当我只使用一个子组件运行应用程序时，它运行良好。当我使用两个子组件运行应用程序时，我不知道它是如何或为什么看起来像是重复监听器，因为socket.once事件每次触发两次以上。像2那样4,8,16 ......

非常感谢任何帮助。

编辑

这是我的server.js代码，如果它来自这里：

require('socket.io-auth')(io, auth, function(socket){


    socket.on('hue-state', (state) => {
      if (state == true) {console.log(socket.device+" turned the Hue ON.")}
      else {console.log(socket.device+" turned the Hue OFF.");}

      hue_state = state
      socket.broadcast.emit('hue-state-change', state);
      console.log("done");

    });

...
}

为每个组件触发套接字

0 个答案: