javascript - 为什么通过道具在父级和使用子级中初始化的套接字之间存在不一致？

Question

我有一个创建 socket.io 连接的客户端组件。这发生在父组件中。从父组件中，我可以成功地发出并跨多个客户端从服务器接收事件。一旦两个客户端都加入一个房间，发送和接收服务器事件的尝试就会出错。

例如：第一个客户端尝试使用其 props 中的套接字从子组件中发送 socket.io 事件，这将成功一半，因为只有发送客户端从服务器接收到事件，另一个客户端什么都没有收到。无论客户端首先尝试发送什么，都会发生这种情况，并且会一直持续到第二个客户端尝试发送。然后两个客户端都从服务器接收事件返回，从那时起一切都按预期工作。

进一步的实验表明，如果将socket.on()侦听器（使用存储在子组件中的套接字对象在子组件中触发的事件）放置在类之外的父组件内，那么两个客户端都会在第一次按预期成功接收服务器事件.

我不确定这是否与道具的工作方式/更新方式有关。我尝试在 didComponentUpdate 函数中比较this.props.socketwith的值prevProps.socket，但在客户端发出事件后从未调用过它。

父组件：

import stuff;
const socket = io("http://192.***.*.*:3000");
// socket.on("test", response => {
//   alert("response logged from parent component.");
// });
export default class Lobby extends React.component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  // first sending & receiving of server events that works properly
  join =() => {
    socket.emit("join");
    socket.on("matched", data => {
      this.setState({matched: true})
    }
  }
// conditional rendering of child component based on this.state.matched
render() {
  return this.state.matched == false ? (
    <View> <Text> Not matched </Text> </View> 
    ):(
    <ChildComponent
      socket={socket}/> );
}
}

子组件：

import stuff;
export default class ChildComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  onTest = () => {
    alert("outgoing test alert");
    this.props.socket.emit("test");
    this.props.socket.on("test", () => {alert("incoming test alert")});
  }
  render() {
    return (
      <View>
        <TouchableOpacity
          onPress={this.onTest}/>
      </View>
    );
  }
}

我希望两个客户端都在第一次尝试时从服务器接收事件。但是，如果客户端 1 或客户端 2 首次尝试，则只有该客户端分别接收服务器事件。但是在半失败的尝试之后，如果另一个客户端进行尝试，两个客户端都会从服务器接收。

标签： javascriptreact-nativesocket.io