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", ...)并且未添加任何处理程序，因此没有人正在处理传入的消息，并且好像没有到达。设置套接字时，应始终直接附加处理程序。

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

1 个答案: