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。
这个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)
})
//网络没有链接上则继续保持在网络异常界面
});