Reactjs 问题是：下面的代码在dev中可以完美地工作，但是在上传到Heroku之后'；他有时工作，

我正试图让socket.io与Heroku一起工作，但效果不好。 问题是：下面的代码在dev中可以完美地工作，但在上传到Heroku后，它有时会工作

1.在日志上看不到任何奇怪的东西

2.将数据保存到数据库，并在刷新后显示

3.刷新有时有助于更新套接字

4.没有规律可循，有时候一个小时就行，有时候一分钟也行

5.heroku功能：启用http会话关联也完成

服务器：

    const mongoose = require("mongoose");
const Rooms = mongoose.model("Rooms");
const Chat = mongoose.model("Chats");

const jwt = require("jwt-then");

const socketChat = (app, io) => {

  io.use(async (socket, next) => {
    try {
      const token = socket.handshake.query.token;
      const payload = await jwt.verify(token, process.env.SECRET_KEY);
      socket.userId = payload.id;
      socket.id = payload.id;
      socket.name = payload.username;
      console.log({ socketisd: socket.userId, name: socket.name });
      next();
    } catch (err) { }
  });

  io.on("connection", (socket) => {
    console.log("Connected: " + socket.name);

    socket.on("disconnect", () => {
      console.log("Disconnected: " + socket.name);
    });

    socket.on("joinRoom", async ({ roomId },callback) => {
      socket.join(roomId);
      console.log(` ${socket.name} joined room: ` + roomId);
      socket.to(roomId).emit("live", { name: socket.name, live: true, roomId });
      callback({
        status: "ok"
      });
    });

    socket.on("leaveRoom", async ({ roomId },callback) => {
      socket.leave(roomId);
      console.log(` ${socket.name} left room: ` + roomId);
      socket.to(roomId).emit("live", { name: socket.name, live: false, roomId });
      callback({
        status: "ok"
      });
    });
    socket.on("typing", async ({ msg, roomId }) => {
      let name = "";
      if (msg.text && msg.text.trim().length > 0) {
        let length = msg.text.length;
        name = length > 0 ? socket.name : "";
      }
      socket.to(roomId).emit("typingclient", { name });
    });
    socket.on(
      "chatroomMessage",
      async ({ roomId, message, name, profileImg, timestamp, type, date }) => {

        if (message.trim().length > 0) {
          io.to(roomId).emit("newMessage", {
            roomId,
            user: socket.userId,
            message,
            name,
            type,
            date,
            profileImg,
            timestamp,
            recived: true,
          });
          let room = await Rooms.findById(roomId).populate("messages");

          if (type === "reject") {
            await Chat.findOneAndUpdate(
              { roomId, type: "dateConfirm" },
              { type: "reject", message },
              { new: true }
            );
          }

          else {
            const newMessage = new Chat({
              roomId,
              date,
              type,
              user: socket.userId,
              message,
              name,
              profileImg,
              timestamp,
              recived: true,
            });
            await newMessage.save();
            room.messages.push(newMessage);
            await room.save();
          }

          let theOtherGuy =await room.users.find((user) => user != socket.userId);
          io.to(theOtherGuy).emit("room", room);
        }
      }
    );
  });
};

module.exports = socketChat;

客户：

      /**
   * Sends message with emit socket to server
   * @param {Object} event Default Browser Event Object
   * @param {String} text content of message
   * @param {String} date Date for schedualing
   * @param {String} type type of the message (reject,request etc...)
   */
  const sendMessage = (event, text, date = null, type = null) => {
    event && event.preventDefault();
    if (socket) {
      socket.emit("chatroomMessage", {
        roomId,
        date,
        type,
        name: currentUser.user.username,
        profileImg: currentUser.user.profileImageUrl,
        timestamp: new Date(),
        recived: false,
        message: text,
      });
      setText("");
    
    socket.emit("typing", {
      msg: "",
      roomId,
    });
  }
  };

  React.useEffect(() => {
   
    if (socket) {
      socket.emit("joinRoom", {roomId},(answer)=>
      console.log("joinRoom",roomId,answer)
      );
      socket.on("newMessage", (message) => {
        console.log({message})
        if (message.type === "reject")
          setMessages((prevMessages) => [...prevMessages.filter(m => m.type !== 'dateConfirm'), message]);
        else
          setMessages((prevMessages) => [...prevMessages, message]);
      });

      socket.on("live", (message) => {
        console.log(message)
        message.live ? setSucess(`user ${message.name} has connected`) : setErr(`user ${message.name} has left`)
      });
      socket.on("typingclient", (name) => {
        setTyping(name);
      });
    }
    return () => {
      if (socket) {
        socket.emit("leaveRoom", {roomId},(answer)=>
        console.log("leaveRoom",roomId,answer)
        );
      }
      //Component Unmount
    };
    //eslint-disable-next-line
  }, [socket]);

以及定义套接字的主要位置：

  const [socket, setSocket] = React.useState(null);

  const setupSocket = () => {
    console.log("socket4")

    const token = sessionStorage.getItem("jwtToken");
    if (token && !socket) {
      const newSocket = io("/", {
        query: {
          token: sessionStorage.getItem("jwtToken"),
        },
        path: '/socket'
      });

      newSocket.on("disconnect", () => {
        // setSocket(null);
        // makeToast("error", "Socket Disconnected!");
      });

      newSocket.on("connect", () => {
        // makeToast("success", "Socket Connected!");
        console.log("Socket Connected");
      });

      setSocket(newSocket);
    }
  };

  React.useEffect(() => {
    if (currentUser && !socket) setupSocket();
    //eslint-disable-next-line
  }, [currentUser, socket]);

ststic.json：

{
    "root":"build/",
    "routes":{
        "/**":"index.html"
    },
    "proxies":{ 
        "/api/":{"origin":"${API_URL}"},
        "/socket/":{"origin":"${SOCKET_URL}"}
    }
}

---

看起来Io对象不喜欢

       socket.id = payload.id;

我已经移除了它，现在一切都正常了。

---

我认为这可能是由于Io对象中的不同键导致了意外行为。

看起来Io对象不喜欢

       socket.id = payload.id;

我已经移除了它，现在一切都正常了。 我认为这可能是由于Io对象中的不同键导致意外行为