将套接字请求从一个组件发送到不同的组件

Question

有两个不同的组件。一个是病人，另一个是医生。医生可以在任何页面上。当患者从他的页面向特定医生（例如 abc）触发 join 事件时，节点服务器将捕获该事件并将 JoinAccept 事件发送给“abc 医生”。以下医生应收到以下患者想要与您联系的通知。

为此，我可以将“加入”事件发送到服务器，但无法在医生端收听JoinAccept 事件。

这就是我所做的

context.js

import io from "socket.io-client";

import { SOCKET_URL } from "constants/url";

const SocketContext = React.createContext();

const SocketProvider = ({ children }) => {
  const [socketClient, setSocketClient] = React.useState();
  const [socketUpdated, setSocketUpdated] = React.useState(false);
  React.useEffect(() => {
    const socket = io(SOCKET_URL);
    setSocketClient(socket);
    return () => {
      io.disconnect();
    };
  }, []);

  React.useEffect(() => {
    console.log("socketClient", socketClient);
    if (socketClient) {
      const tokenData =
        !!localStorage.token &&
        JSON.parse(atob(localStorage.token.split(".")[1]));
      if (tokenData.user) {
        console.log("user", tokenData.user);
        socketClient.emit("clientData", tokenData.user);
        socketClient.on("connected", msg => {
          console.log("connected");
          setSocketUpdated(true);
        });
        // setSocketUpdated(true);
      }
    }
  }, [socketClient]);

  console.log("socket updated", socketUpdated);

  return (
    <>
      <SocketContext.Provider value={{ socket: socketClient, socketUpdated }}>
        {children}
      </SocketContext.Provider>
    </>
  );
};

export { SocketContext, SocketProvider };

Patient.js（它会触发 Join 事件）

const Patient = () => {
  const { socket } = React.useContext(SocketContext);
  React.useEffect(() => {
    const data = {
      to: "abcdoctor@gmail.com",
      from: "patient@gmail.com",
      message: "Join a call"
    };

    socket.emit("Join", data);
  }, [socket]);

  return (
    <div>
      <h1>Patient</h1>
    </div>
  );
};

Doctor.js

const DoctorParentComponent = () => {
  return (
    <>
      <SocketProvider>
        <h1>Navbar</h1>
        <DoctorRoutes />
      </SocketProvider>
    </>
  );
};

DoctorPage.js

const DoctorPage = () => {
  const [msg, setMessage] = React.useState("");
  const { socket, socketUpdated } = React.useContext(SocketContext);
  console.log("Doctor socket", socket, socketUpdated);

  React.useEffect(() => {
    console.log("socket", socket);
    if (socket !== undefined) {
      console.log("socket join", socket);
      socket.on("JoinAccept", message => {
        debugger;
        console.log("message", message);
        setMessage(message);
      });
    }
  }, [socket]);

  return (
    <div>
      <h1>Doctor </h1>
    </div>
  );
};

server.js

io.of("/sockets").on("connection", socket => {
      console.log("socket connection is made!!!", socket.id);

      socket.on("clientData", clientData => {
        console.log(clientData, "CLEITN DATA");
        socket.emit("connected", "connected");
      });
      socket.on("Join", data => {
        const msg = {
          message: "I am joining"
        };
        console.log("socket", socket.id);
        console.log("I am Joining", data);
        socket.broadcast.to(data.to).emit("JoinAccept", msg);
      });
}

在我的情况下，服务器从患者那里获取Join 事件，然后将事件发送给请求的医生，但医生页面没有响应。我的意思是医生页面不监听更改，即它无法监听套接字事件JoinAccept，因此它可以加入患者的请求。

更新

改变

socket.on("Join", data => {
    const msg = {
        message: "I am joining"
    };
    console.log("socket", socket.id);
    console.log("I am Joining", data);
    socket.broadcast.to(data.to).emit("JoinAccept", msg);
});

以下作品

socket.on("Join", data => {
    const msg = {
        message: "I am joining"
    };
    console.log("socket", socket.id);
    console.log("I am Joining", data);
    io.of("/sockets").emit("JoinAccept", msg)
});

但我只想为患者从加入事件中请求的特定医生发出“JoinAccept”事件。

Answer 1

DoctorPage.js socket 是一个对象，如果你把这个对象作为依赖数组中的唯一变量，它将作为循环运行。

尝试切换到socket id，所以：

  React.useEffect(() => {
    console.log("socket", socket);
    if (socket !== undefined) {
      console.log("socket join", socket);
      socket.on("JoinAccept", message => {
        debugger;
        console.log("message", message);
        setMessage(message);
      });
    }
  }, [socket.id]);