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()
  }
})