React Native socket.io 无法监听“socket.on”监听器

Question

我正在尝试构建一个聊天应用程序并产生实时效果，我正在使用socket.io，我在 node/express 中开发了我的服务器，它运行良好，但问题出在 react-native 方面，因为我'在使用socket.on 时无法呈现消息（即使我以正确的方式进行操作，我在useEffect 中输入了正确的依赖项）。以下是我的应用程序中的一些代码，我将确认某些部分工作正常，仅在 useEffect 依赖项列表中出现问题。

用于侦听/发送消息到目标客户端 ID 的服务器端逻辑：

socket.on('sendMessage', ({senderId, receiverId, text}) => {
        console.log(text); // getting the output as expected here.
        const user = Utility.getUser(users, receiverId);
        io.to(user.socketId).emit('getMessage', {
            senderId,
            text,
        });
    });

客户端/React Native 端：

const socket = useRef();
    const [arrivalMessage, setArrivalMessage] = useState(null);

    useEffect(() => {
        // connect to server/api link
        socket.current = io('...', {
            transports: ['websocket'],
        });
    }, []);

    useEffect(() => {
        socket.current.on('getMessage', data => {
            console.log('getmessages: ',data);
            setArrivalMessage({
                // matchId: matchId,
                senderId: data.senderId,
                text: data.text,
                createdAt: Date.now(),
                updatedAt: Date.now(),
            });
        });
    // SOMETHING IS WRONG HERE, as this useEffect block is not being executed even though I have mentioned "socket" in my dependency list.
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [socket]);

    useEffect(() => {
        // ensures we don't get any other user's msg
        arrivalMessage &&
        match.includes(arrivalMessage.senderId) &&
        setMessages((prev) => [...prev, arrivalMessage]);
    }, [arrivalMessage, match]);

所以，第二个useEffect 出了点问题，因为即使我在依赖项列表中提到了“socket”，这个 useEffect 块也没有被执行，因此聊天列表没有更新。 此外，控制台中没有错误日志，因此增加了调试难度...

如果有人指出我做错了什么，我将不胜感激！

Answer 1

您不能将useRef 用于套接字实例...变异引用不会重新渲染组件的内容，因此它不会触发useEffect

这是一个如何在钩子中使用套接字的示例

export function useSocket(
  url = process.env.NEXT_PUBLIC_API_URL /* default URL */
) {
  const [socket, setSocket] = useState<SocketType>(null)

  useEffect(() => {
    const io: SocketType = SocketClient(url).connect()
    setSocket(io)

    return () => {
      socket?.disconnect()
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return socket
}

export function useSocketEvent(
  socket: SocketType,
  event: keyof SocketListenEventMap,
  callback: (...args: unknown[]) => void
) {
  useEffect(() => {
    if (!socket) {
      return
    }

    socket.on(event, callback)

    return () => {
      socket.off(event, callback)
    }
  }, [callback, event, socket])

  return socket
}

export function useMessagesSocket() {
  const [arrivalMessage, setArrivalMessage] = useState(null)
  const socket = useSocket(/* URL */)

  useSocketEvent(socket, 'getMessages', (data) =>
    setArrivalMessage({
      //...
    })
  )
}