React Native socket.io 无法收听 "socket.on" 侦听器

Question

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

服务器端逻辑 listen/send 消息到目标客户端 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 出现了问题，因为即使我在我的依赖项列表中提到了“套接字”，这个 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({
      //...
    })
  )
}

React Native socket.io 无法收听 "socket.on" 侦听器

React Native socket.io not able to listen to "socket.on" listener

node.js

reactjs

react-native

sockets

socket.io