отправить запрос сокета от одного компонента к другому компоненту

Question

Существует два разных компонента. Один терпелив, а другой - Доктор. Врач может быть на любой странице. Когда пациент отправляет событие join со своей страницы определенному врачу (например, ab c), сервер узла затем перехватит это событие и отправит событие JoinAccept 'ab c doctor'. Следующий врач должен получить уведомление о том, что следующий пациент хочет с вами связаться.

Чтобы достичь этого, я мог отправить событие «Присоединиться» на сервер, но не смог прослушать событие 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 (вызовет событие присоединения)

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>
  );
};

сервер. 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

On DoctorPage.js socket - это объект, если вы поместите этот объект в качестве единственной переменной в массиве зависимостей, он будет работать как al oop.

Попробуйте вместо этого переключиться на идентификатор сокета Итак:

  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]);