Socket.io 已连接属性始终为 false

Question

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

这是我的客户端代码，请注意 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);

您可以使用 ref 在渲染之间保留它：

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

Socket.io 已连接属性始终为 false

Socket.io connected property is always false

socket.io

reactjs

Socket.io 已连接 属性 始终为 false

Socket.io connected property is always false

socket.io

reactjs

Socket.io 已连接属性始终为 false