在NextJs中显示用户断开连接的页面

kcrjzv8t  于 2023-11-18  发布在  其他
关注(0)|答案(2)|浏览(119)

我正在寻找一种方法来显示给用户,像WhatsApp网页,当连接不佳或用户没有互联网的页面,说“您的互联网连接已关闭”.如何在Next Js中做到这一点?

cbwuti44

cbwuti441#

你必须将这个自定义钩子添加到_app.js文件中:

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

字符串
添加您的逻辑:

const isOnline = useNetwork();

////////////////////////

useEffect(()=>{
  if(!isOnline){
  // show your going offline message here
  }
  
},[isOnline])

ryhaxcpt

ryhaxcpt2#

你可以连接到一个没有互联网的网络,它仍然会在这个实现中返回true,因为navigator.onLine属性只指示浏览器是否有网络连接,而不一定是互联网连接。我认为检查互联网访问的最好方法是用axios发送一个请求,或者每隔一段时间取API到一个现有的url。如果请求没问题,然后你有互联网,否则没有互联网。如果它需要太长的时间来完成,然后你通知你有穷人的互联网。
您可以通过阅读文档来检查和更新您自己:https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine

相关问题