如何在 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);
      }
    }