3. 聯網/脫機事件監聽

原文:https://github.com/electron/electron/blob/master/docs/tutorial/online-offline-events.md
譯者:Lin

在線和離線事件監聽可以在渲染進程中使用HTML接口執行,就像下面例子中展示的一樣。

main.js

const {app, BrowserWindow} = require('electron')

let onlineStatusWindow

app.on('ready', () => {
    onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
    onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`)
})

online-status.html

<!DOCTYPE html>
<html>
<body>
<script>
    const alertOnlineStatus = () => {
        window.alert(navigator.onLine ? 'online' : 'offline')
    }

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

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

這里有可能有一些你想要在主進程中的同樣事情上作出響應的實例。然而主進程沒有navigator對象因此不能直接檢測到這些事件。使用Electron的進程間通信工具,這些事件可以被轉發到主進程并按照需要進行處理,就像下面的例子展示的那樣。

main.js

const {app, BrowserWindow, ipcMain} = require('electron')
let onlineStatusWindow

app.on('ready', () => {
    onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
    onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`)
})

ipcMain.on('online-status-changed', (event, status) => {
    console.log(status)
})

online-status.html

<!DOCTYPE html>
<html>
<body>
<script>
    const {ipcRenderer} = require('electron')
    const updateOnlineStatus = () => {
        ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline')
    }

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

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

注意:如果Electron不能連接到局域網(LAN)或者路由器,它就被認為是離線的;其他的所有情況都會返回true。所以你可以認為是Electron離線時navigator.onLine返回一個false,你不能肯定的認為一個true值就代表Electron可以訪問互聯網。你可能會被誤報,就像在計算機上運行的一個虛擬機總是“連接”上虛擬以太網適配器。因此,如果你想要確定網絡狀態,你需要其他的額外的檢測手段。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容