electron网络环境在线/离线事件探测

_陌子曦

已于 2023-02-24 17:36:26 修改

阅读量1.8k

点赞数

分类专栏： electron 文章标签：前端 Powered by 金山文档

于 2023-02-24 17:33:38 首次发布

本文链接：https://blog.csdn.net/QCIWYY/article/details/129204650

版权

electron 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

electron判断网络环境问题，可以说在任何桌面应用都可以使用到，处理方式有很多种，我介绍几种办法

第一种HTML5 API navigator.onLine：

官方案例给的，这边为直接贴出地址了，有兴趣的同学可自行查看

https://www.electronjs.org/zh/docs/latest/tutorial/online-offline-events

https://www.cnblogs.com/loaderman/p/12163574.html

此方案我也经过多次尝试，但是发现不准确，不能准确的得到预期的结果

所谓的“在线/离线事件”并不指的是与互联网的连接状态，而是指主机的联机与脱机状态。

它所指的是：

在 Chrome 和 Safari 中，如果浏览器连接不上互联网、路由器、局域网（LAN）、主机虚拟局域网（无论是 Windows 的 WSL ，还是 VMware 的虚拟局域网），就是离线状态；否则就是在线状态。

所以不能通过 EventTarget.addEventListener() 监听事件来判断有无与互联网连接。

第二种nodejs的ping：

这里不多说，请查看链接：https://code.insistime.com/qiao-ping#/

第三种qiao-is-online：

链接：https://code.insistime.com/qiao-is-online#/

第四种(重点)：

先贴出地址，实际上就是官方api：onErrorOccurred

webRequest.onErrorOccurred([filter, ]listener)
filter WebRequestFilter (可选)
listener Function | null
details Object
id Integer
url string
method string
webContentsId Integer (可选)
webContents WebContents (可选)
frame WebFrameMain (可选)
resourceType string - 可以是 mainFrame， subFrame，stylesheet，script，image，font，object，xhr，ping，cspReport，media，webSocket 或 other。
referrer string
timestamp Double
fromCache boolean
error string - 错误描述.
当发生错误时，将以 listener(details)的方式调用listener。

https://www.electronjs.org/zh/docs/latest/api/web-request#webrequestonbeforesendheadersfilter-listener

这个api可以说很强大，你的任何异常请求它都能监控到，可以获取到url，error，这俩是重点，我们根据请求error返回会的类型可以判断当前网络环境等一些列信息，我使用此api主要是判断网络环境，并结合qiao-is-online（单独使用需要定时操作，风险大，容易导致进程阻塞，因为JavaScript是单线程的）使用，当我们拿到error：net::ERR_INTERNET_DISCONNECTED时候，说明网络异常了，接下来就可以做弹窗警告或者重定向到自定义的异常界面，废话不多说，直接上代码更加清晰

session.defaultSession.webRequest.onErrorOccurred(xxx_filter, (details)=> {
        //details对象具体值可参考以上api
        log.info("referrer:",details.referrer)
        log.info("error:",details.error)
        //网络异常
        if(details.error == 'net::ERR_INTERNET_DISCONNECTED'){
                //自己的逻辑，此处可以弹窗警告也可以向渲染进程发送消息，打开一个网络异常的界面
            }
        //向渲染进程发送消息
        win.webContents.send('networkError');
    })

网络异常之后我们可以模仿chrome网络异常的操作，可以自定义刷新按钮，当网络正常的时候刷新当前页面，此时就用到了qiao-is-online，点击刷新的时候渲染进程向主进程发送消息

this.$ipcRenderer.send('refresh');

主进程监听到刷新消息之后

ipcMain.on('refresh', (e) => {
            //采用qiao-is-online判断当前网络
            q.isOnline().then(isOnline =>{
                    if(isOnline == 'online'){
                        //网络正常则跳转到正常页面
                    }
                }).catch(err =>{
                    log.error('网络信息获取异常：',err)
                })
            //网络没有链接上则继续保持在网络异常界面
        });

参考链接：https://www.cnblogs.com/Yogile/p/15010264.html

https://blog.insistime.com/is-online