TypeError：無法讀取 Socket 未定義的屬性“房間”。<anonymous> (C:\CHAT\server\index.js:22:21)</anonymous>

Question

我一直收到這個錯誤，我盡我所能來解決它，但沒有。 我覺得沒有從 Users.js 文件中獲取用戶。 這是 Index.js 文件

const socketio = require("socket.io");
const router = require("./router");
const http = require("http");
const cors = require("cors");
const port = process.env.PORT || 5000;
const app = express();
const server = http.createServer(app);

const { addUser, removeUser, getUser, getUserInRoom } = require("./users");
const io = socketio(server);
app.use(cors());
// app.use(router);
io.on("connection", (socket) => {
  console.log("We have a new connection!");
  socket.on("join", ({ name, room }, callback) => {
    const { user } = addUser({ id: socket.id, name, room });
    console.log(user);
    // if (error) return callback(error);
    socket.emit("message", {
      user: "admin",
      text: `${user.name}, welcome to the room ${user.room}.`,
    });
    socket.broadcast
      .to(user.room)
      .emit("message", { user: "admin", text: `${user.name} has joined` });
    socket.join(user.room);
    callback();
  });
  socket.on("sendMessage", (message, callback) => {
    const user = getUser(socket.id);
    console.log(user);
    io.to(user.room).emit("message", { user: user.name, text: message });
    callback();
  });
  socket.on("disconnect", () => {
    console.log("User had just left!");
  });
});

server.listen(port, () => console.log(`Server has started on port ${port}`));

這是我的 Users.js 文件

const users = [];
const addUser = ({ id, name, room }) => {
  name = name.trim().toLowerCase();
  room = room.trim().toLowerCase();
  const existingUser = users.find((user) => {
    user.room === room && user.name === name;
  });
  if (existingUser) {
    return { error: "Username is taken" };
  }
  const user = { id, name, room };
  users.push(user);
  return { user };
};

const removeUser = (id) => {
  const index = users.findIndex((user) => {
    user.id === id;
  });
  if (index !== -1) {
    return users.splice(index, 1)[0];
  }
};

const getUser = (id) => {
  users.find((user) => user.id === id);
};

const getUserInRoom = (room) => {
  users.filter((user) => user.room === room);
};
module.exports = { addUser, removeUser, getUser, getUserInRoom };

我已經搜索了任何可能放錯位置的變量，但我沒有找到。 最后，我的客戶端

import "./Chat.css";
import queryString from "query-string";
import io from "socket.io-client";
import { InfoBar } from "../InfoBar/InfoBar";
import { Input } from "../Input/Input";
import { Messages } from "../Messages/Messages";
let socket;
export const Chat = ({ location }) => {
  const [name, setName] = useState("");
  const [message, setMessage] = useState("");
  const [messages, setMessages] = useState([]);
  const [room, setRoom] = useState("");

  const ENDPOINT = "localhost:5000";
  // ("ws://localhost:5000", { transports: ["websocket", "polling"] });

  useEffect(() => {
    socket = io(ENDPOINT);
    const { name, room } = queryString.parse(location.search);
    // console.log(name, room);
    setName(name);
    setRoom(room);

    // console.log(socket);
    socket.emit("join", { name, room }, () => {});
    return () => {
      socket.emit("disconnect");
      socket.off();
    };
  }, [ENDPOINT, location.search]);

  //UseEffect for the messages
  useEffect(() => {
    socket.on("message", (message) => {
      setMessages(messages=>[...messages, message]);
    });
  }, []);
  const sendMessage = (event) => {
    event.preventDefault();
    if (message) {
      socket.emit("sendMessage", message, () => setMessage(""));
    }
  };
  console.log(message, messages);
  return (
    <div className="outerContainer">
      <div className="container">
        <InfoBar room={room} />
        <Input
          setMessage={setMessage}
          message={message}
          sendMessage={sendMessage}
        />
        <Messages messages={messages} />
        {/* <input
          value={message}
          onChange={(event) => setMessage(event.target.value)}
          onKeyPress={(event) =>
            event.key === "Enter" ? sendMessage(event) : null
          }
        /> */}
      </div>
    </div>
  );
};

我將感謝所有可用的幫助

Answer 1

您沒有名為user的變量，因此user undefined ，您無法獲得未定義的 object 的屬性。

const { user } = addUser({ id: socket.id, name, room });

不會創建user變量，而是創建一個未命名的 object，它有一個名為user的屬性。

我不知道，為什么您的addUser function 不只是返回創建的用戶 object 而是將其封裝在 object 中。 也許你可以做

const addUser = ({ id, name, room }) => {
  ...
  const user = { id, name, room };
  users.push(user);        
  return user;
}

接着

const user = addUser(....) 

如果這是不可能的並且addUser的返回類型無法更改，您可以執行以下操作

const user = addUser(...).user;
socket.emit("message", {
  user: "admin",
  text: `${user.name}, welcome to the room ${user.room}.`,
});

Answer 2

您實際上並不需要返回周圍的 {}

const addUser = ({ id, name, room }) => {
  name = name.trim().toLowerCase();
  room = room.trim().toLowerCase();
  const existingUser = users.find((user) => {
    user.room === room && user.name === name;
  });
  if (existingUser) {
    return { error: "Username is taken" };
  }
  const user = { id, name, room };
  users.push(user);
  return { user };
};

而是這樣做：

const addUser = ({ id, name, room }) => {
  name = name.trim().toLowerCase();
  room = room.trim().toLowerCase();
  const existingUser = users.find((user) => {
    user.room === room && user.name === name;
  });
  if (existingUser) {
    return { error: "Username is taken" };
  }
  const user = { id, name, room };
  users.push(user);
  return user;
};