reactjs - Socket.io 连接属性始终为 false

Question

我正在尝试创建一个私有(private)消息应用程序。套接字首先连接，但当我尝试从客户端发出任何事件时，它显示 socket.connected 属性为 false。 请帮帮我。

这是我的客户端代码，请注意 socket.on("users") 部分工作正常，因为所有这些都发生在连接套接字时。这意味着连接部分正确发生。此后，每当我尝试调用发出套接字事件的函数时，它都会显示 socket.connected 属性为 false 并且不执行任何操作。

如有任何帮助，我们将不胜感激。

var connectionOptions = {
    transports: ["websocket"],
    autoConnect: false,
  };
  socket = io("http://localhost:3001", connectionOptions);

  socket.on("connection _error", (err) => {
    if (err.message === "invalid username") {
      console.log("ERROR");
    }
  });

  socket.on("users", (users) => {
    users.forEach((user) => {
      user.self = user.userID === socket.id;
      //initReactiveProperties(user);
    });

    socket.on("user connected", (user) => {
      // TODO
      setUsers((existingusers) => [...existingusers, user]);
      console.log(user);
    });
    // put the current user first, and then sort by username
    users = users.sort((a, b) => {
      if (a.self) return -1;
      if (b.self) return 1;
      if (a.username < b.username) return -1;
      return a.username > b.username ? 1 : 0;
    });
    //console.log(users);
  });

  socket.on("private message", ({ content, from }) => {
    console.log(content);
  });

  useEffect(() => {
    const username = localStorage.getItem("username");
    console.log(username);
    socket.auth = { username };
    socket.connect();
  }, []);

  function SendMessage() {
    socket.emit("test", "hello");
    // selectedChatUser
    console.log(socket.connected);
    if (selectChatUser) {
      socket.emit("private message", {
        content: "hello there",
        to: selectChatUser.userID,
      });
      console.log("Message Sent");
    }
  }

这是我的服务器端代码:

const app = require("express")();
const httpServer = require("http").createServer(app);
const cors = require("cors");
app.use(cors());
const options = {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
};
const io = require("socket.io")(httpServer, options);

io.use((socket, next) => {
  const username = socket.handshake.auth.username;
  if (!username) {
    return next(new Error("invalid usernmae"));
  }
  socket.username = username;
  next();
});

io.on("connect", (socket) => {
  console.log("New connection");
  const users = [];
  for (let [id, socket] of io.of("/").sockets) {
    users.push({
      userID: id,
      username: socket.username,
    });
  }
  socket.broadcast.emit("user connected", {
    userID: socket.id,
    username: socket.username,
  });
  socket.emit("users", users);

  socket.on("test", () => {
    console.log("test");
  });

  socket.on("private message", ({ content, to }) => {
    console.log(content);
    console.log("hello there");
    socket.to(to).emit("private message", {
      content,
      from: socket.id,
    });
  });
});

httpServer.listen(3001, () => {
  console.log("Server has started");
});

// https://socket.io/

Answer 1

以下行将在每次组件渲染时重新运行，从而丢失对实际连接的套接字的引用:

socket = io("http://localhost:3001", connectionOptions);

您可以使用引用在渲染之间保留它:

const socketRef = useRef();
socketRef.current = socket;
// use socketRef.current everywhere else in your code