Как прослушать личное сообщение socketIO в клиенте React?

Question

У меня есть экземпляр SocketIO в приложении Express, который прослушивает запросы клиента React. Пользователь может отправлять личные сообщения указанному c человеку. Сервер получает личное сообщение и должен отправить его обратно отправителю и получателю благодаря методу io.to (socketId) .emit (content).

Как прослушать это событие в React и обновить массив сообщений? Чтобы упростить процесс, я создал объект connectedUsers, ключами которого являются user._id mongoDB, а значениями - уникальный socketID, сгенерированный socketIO. Таким образом, я могу легко обратиться к клиенту с указанием c человек. После отправки сообщения сохраняются в базе данных MongoDB.

Вот серверная часть. Достопримечательности: io.on ("privateMessage")

const connectedUsers = {};

const socketManager = (io) => {
  io.on("identifyUser", (user) => {
    if (!([user.id] in connectedUsers)) {
      connectedUsers[user.id] = io.id;
    }
  });
  io.on("privateMessage", (data) => { 
io.to(connectedUsers[data.recipientId]).emit(data.message);
io.to(connectedUsers[data.senderId]).emit(data.message);
  });
  io.on("disconnect", () => console.log("user disconnected!"));
};

Вот функция прослушивания в React. Все работает, кроме части "privateMessage".

async function getUser(socketId) {
  try {
    const res = await ax.get(`${serverUrl}/login`);
    const socket = io(serverUrl);
    socketId.current = socket;
    socket.on("connect", () => {
      socket.emit("identifyUser", { id: res.data._id });
      socket.on("privateMessage", (data) =>
        console.log("private message received!", data)
      );
    });
  } catch (err) {
    throw new Error(err);
  }
}

Спасибо за помощь!

Answer 1

Для клиента существует событие подключения, а не подключение.
Подписка на событие privateMessage должна быть вне обратного вызова подключения.

Этот код должен работать. Надеюсь, это поможет

import io from 'socket.io-client'


async function getUser(socketId) {
      try {
        const res = await ax.get(`${serverUrl}/login`);
        const socket = io(serverUrl);
        socketId.current = socket;
        socket.on("connection", () => {
          socket.emit("identifyUser", { id: res.data._id });
        });
        socket.on("privateMessage", (data) =>
           console.log("private message received!", data)
        );
      } catch (err) {
        throw new Error(err);
      }
    }

Answer 2

Я думаю, вам нужно поместить часть socket.on ("privateMessage") за пределы области socket.on ("connect").

React должен загрузить все события в начале.

Внутренняя сторона должна отвечать за авторизацию.