前端判断电脑是否断网 并且在重连的时候发请求给后端记录

用electron 打包的电脑软件 加了一个断网提示和联网发请求给后端做记录

javascript 复制代码
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
  <title>吧台绿树电竞 - V1.0.0 店铺ID</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> 

</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->

  <!-- 页面内容 -->
  <script>
   
    let offlineTime = null;
    // let nowtim = new Date()
    window.addEventListener('online', () => {
      const now = new Date();
      if (offlineTime) {
        const offlineDuration = now - offlineTime; // 离线时长(毫秒)  
        console.log(`网络重连成功,上次断网时间:${new Date(offlineTime).toLocaleString()}, 重连时间:${now.toLocaleString()}, 离线时长:${offlineDuration} 毫秒`);
        alert(`网络重连成功,离线时长:${offlineDuration / 1000 / 60} 分钟`);
        this.sendAjaxRequest() //断网时间
        localStorage.setItem('nowTime', now.toLocaleString()); //重连
        this.nowRequest()

      } else {
        console.log(`网络重连成功,之前没有断网记录`);
      }
      offlineTime = null; // 重置离线时间  
    });

    window.addEventListener('offline', () => {
      offlineTime = new Date(); // 记录断网时间  
      console.log(`当前断网,时间:${offlineTime.toLocaleString()}`);
      localStorage.setItem('offlineTime', offlineTime.toLocaleString()); //断网
      alert('当前断网');
    });
    

    // 断网
    function sendAjaxRequest() {  
            var formData = new FormData();  
            formData.append('storeId', sessionStorage.getItem("storeId") || ''); 
            formData.append('type', 0);  
            formData.append('ip', sessionStorage.getItem("ip") || ''); 
            formData.append('createTime', offlineTime.toLocaleString() || ''); 
            var xhr = new XMLHttpRequest();  
            xhr.open("POST", 'http://192.168.0.124:8091/bar/log/add', true); 
            xhr.onload = function () {  
                if (xhr.status === 200) { 
                } else {  
                    console.error("Request failed. Returned status of " + xhr.status);  
                }  
            }; 
            xhr.send(formData);  
        };

        //重连
        function nowRequest() {  
          let nowtim = new Date()
            var Data = new FormData();  
            Data.append('storeId', sessionStorage.getItem("storeId") || ''); 
            Data.append('type', 1);  
            Data.append('ip', sessionStorage.getItem("ip") || ''); 
            Data.append('createTime', nowtim.toLocaleString() || ''); 
            var xhrb = new XMLHttpRequest();  
            xhrb.open("POST", 'http://192.168.0.124:8091/bar/log/add', true); 
            xhrb.onload = function () {  
                if (xhrb.status === 200) {  
                    console.log(xhrb.responseText);  
                } else {  
                    console.error("Request failed. Returned status of " + xhrb.status);  
                }  
            };  
            xhrb.send(Data);  
        } 

  </script>
</body>

</html>

我是写在public- index.html 文件中 这样他只要是在运行中都可以 判断是否断网

相关推荐
yanlele3 分钟前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮9 分钟前
【无标题】
开发语言·前端·javascript
谦行20 分钟前
深度神经网络训练过程与常见概念
前端
Simon_He1 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊1 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录2 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃2 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军2 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子2 小时前
Blob 对象及 Base64 转换指南
前端
风铃喵游2 小时前
让大模型调用MCP服务变得超级简单
前端·人工智能