javascript - 用于在 React.js 中检查互联网连接的可重用钩子(Hook)

Question

对于我的示例应用程序，我试图检查是否存在互联网连接，为此我使用了可重用的 Hook ，如下所示:

function useNetwork() {
    const [isOnline, setNetwork] = useState(window.navigator.onLine);
    const updateNetwork = () => {
        setNetwork(window.navigator.onLine);
    };
    useEffect(() => {
        window.addEventListener("offline", updateNetwork);
        window.addEventListener("online", updateNetwork);
        return () => {
            window.removeEventListener("offline", updateNetwork);
            window.removeEventListener("online", updateNetwork);
        };
    });
    return isOnline;
}

问题是它在 Chrome 中工作，但是当我在 Safari 中检查时尝试关闭 wifi 时仍然 isOnline 返回 true，我也在 safari 的控制台中尝试过，作为 window.navigator。 isOnline 返回 true。

阅读不同的问题，here Danilo建议发送httpRequest并检查。

那么我应该向 google.com 这样的任何网站发送一个 get 请求，以便我可以了解状态并将我的 onLine 值设置为 true。因为我认为我需要轮询这个，因为上面的钩子(Hook)会在 dom 更改时进行处理。

我怎样才能实现这个目标，或者有什么更好的方法？我如何在上面的可重用 Hook 中实现这一点。

Answer 1

你可以做这样的事情，并有一个API端点/或调用任何可靠的API

const useNetworkStatus = () => {
    const [isOnline, setStatus] = useState();
    useEffect(() => {
        (async () => {
            try {
                window.networkPoll = setInterval(async () => {
                    const networkStatus = await fetch(/*your api*/);
                    if (networkStatus.code != 200) {
                        setStatus(false);
                    }
                    if (networkStatus.code == 200) {
                        setStatus(true);
                    }

                }, 5000);
            }
            catch (error) {
                setStatus(false);
            }
        })();
    }, []);
};