Electron 判斷互聯網網絡連接

Electron 判斷網絡環境

最近在學用 Electron 實現桌面程序。在嘗試使用原生的 EventTarget.addEventListener() 監聽 window.online 和 window.offline 事件，但是我在調用函數並手動斷網之后，卻發現並沒有觸發監聽來彈出自定義通知。

於是我分別去了 Electron 官方文檔 在線/離線事件探測 、 NavigatorOnLine.onLine 及其指向的 Document.ononline 文檔，得到了一個結果：

所謂的“在線/離線事件”並不指的是與互聯網的連接狀態，而是指主機的聯機與脫機狀態。

它所指的是：

在 Chrome 和 Safari 中，如果瀏覽器連接不上互聯網、路由器、局域網（LAN）、主機虛擬局域網（無論是 Windows 的 WSL ，還是 VMware 的虛擬局域網），就是離線狀態；否則就是在線狀態。

所以不能通過 EventTarget.addEventListener() 監聽事件來判斷有無與互聯網連接。

這里推薦使用 ping 實現。請參考 npm qiao-is-online 來實現 Electron 、 Node.js 來實現對互聯網連接判定。

qiao-is-online

qiao-is-online 包如何實現 ping 請參考：https://www.cnblogs.com/Yogile/p/15010261.html

測試

在測試時，建議 qiao-is-online 和 監聽 window.online 、 window.offline 事件都進行測試，實際體會區別。

Windows 下，在 網絡連接 中先禁用不與互聯網連接的網絡（除了 WIFI 、以太網等），在手動進行斷網或禁用連網網絡。

更多參考

• 用 javascript 實現 ping 一個主機，僅測試是否能夠連接。

  這個是使用 image 預加載進行，實際上就是 HTTP GET 請求，現在網上都是這種，如何捕獲異常並處理是一大問題。

• electron-ping

  如果想要 ping google 可以參考這個，或者自行打包。