如何在 React 客戶端監聽 socketIO 私人消息？

Question

我在 Express 應用程序中有一個 SocketIO 實例，它偵聽 React 客戶端請求。 用戶可以向特定的人發送私人消息。 服務器收到私人消息，並應將其發送回發送者和接收者，這要歸功於 io.to(socketId).emit(content) 方法。

如何在 React 中監聽這個事件並更新消息數組？ 為了簡化這個過程，我創建了一個connectedUsers object，它的key是mongoDB的user._id，value是socketIO生成的唯一socketID。 這樣，我可以輕松地將消息發送給客戶端中的特定人員。 發送后，消息將存儲在 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 中的監聽 function。 除了“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

我認為您需要將 socket.on("privateMessage") 部分放在 socket.on("connect") scope 之外。

React 必須在開始時加載所有事件。

后端必須負責授權。

Answer 2

對於客戶端，有連接事件，而不是連接。
訂閱事件 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);
      }
    }