javascript - 在类外部调用函数与在类内部调用函数有什么区别？

Question

客户端的套接字事件遇到一些意外的功能。我有两个客户加入了一个 socket.io 房间。他们已成功加入，如我的服务器控制台日志所示。客户端，事件发送成功并被服务器成功接收。服务器正在向房间中的两个客户端(即发送者和另一个客户端)发送事件。 仅发送客户端会收到第一次尝试。在所述半失败尝试之后，如果另一个客户端尝试相同的套接字发射，则服务器成功发送到两个客户端。 .emit() 和 .on() 位于组件函数中。

有趣的是，如果服务器事件的 .on() 放置在类的外部，那么第一次一切都会正常工作。

组件:

import stuff
const socket = io("http://172.**.**.***:3000");
// example '.on()' that works correctly
socket.on("test", () => {
  alert("response from outside component");
});
export default class Lobby extends React.Component {
  constructor() { }
  onTest(socket) {
    alert("outgoing alert");
    socket.emit("test", {
      room: this.state.room
    });
    // '.on()' that doesn't work correctly
    socket.on("test", () => {
      alert("incoming client alert")
    });
  }
  render() {
    <View>
      <TouchableOpacity onPress={() => this.onTest(socket)}>
        <Text>Press me </Text>
      </TouchableOpacity>
    </View> 
  }

服务器事件:

io.on("connection", socket => {
  console.log("user connected with socket id:" + socket.id);
  socket.on("test", test => {
    console.log(received from client, emitting to room #:" + test.room);
    io.to(test.room).emit("test");
  });
}

Answer 1

因为尚未发送任何内容的客户端，尚未调用 omTest，因此 socket.on("test", ...) 被调用没有执行，也没有添加处理程序，因此没有人处理传入的消息，看起来好像没有到达。设置套接字时，您应该始终直接附加处理程序。