electron + react 如何实现网络断开、重新连接后刷新页面
欢迎留言一起讨论

1、首先在新建一个html页面,页面中监听online和offline事件,当状态改变时,使用ipcRenderer将消息传递给electron的主进程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<body>
<script>
const { ipcRenderer } = require('electron')
const updateOnlineStatus = () => {
console.info('发送网络状态')
ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline')
}

window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)

updateOnlineStatus()
</script>
</body>
</html>

2、在app的ready时载入上面的html页面,设置属性为width: 0, height: 0,show: false,即加载但不显示页面

1
2
3
4
5
6
7
app.on('ready', () => {

let onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false, webPreferences: { nodeIntegration: true } })

onlineStatusWindow.loadFile('dist/page/onlineStatus.html')

})

3、在主进程中使用ipcMain接收ipcRenderer发送过来的消息,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ipcMain.on('online-status-changed', (event, status) => {
console.info('网络状态改变', status)
const win = loginWindow || contentWindow

// netStatus初始值为online,
// if 条件的意思是 网络变化时,status !== 'online' (即 = 'offline'),此时网络已断开,
// 将 netStatus = status,即 netStatus = 'offline'
// 这else if 条件的时候,status !== netStatus 表示 网络断开后重新连接
//(如果没有断开过,即status为online,则 if 中的 status !== 'online' 和 else if 中的 status !== netStatus 不成立,所以不会触发if 和esle if)
// 此时 win.webContents.reload() 刷新页面
if (status && status !== 'online') netStatus = status || 'online'
else if (win && win.webContents && status && status !== netStatus) {
netStatus = status
win.webContents.reload()
}
})