JavaScript中怎么檢查用戶(hù)的網(wǎng)絡(luò )連接

這篇文章給大家介紹JavaScript中怎么檢查用戶(hù)的網(wǎng)絡(luò )連接，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

這涉及JavaScript navigator API和 window 對象上的eventListener，這將幫助我們跟蹤用戶(hù)的連接性。

onLine屬性返回一個(gè)布爾值，該值指定瀏覽器處于online模式還是offline模式

你可能希望向用戶(hù)添加一條小的彈出消息，告知他們已斷開(kāi)連接，一旦它們重新聯(lián)機，就歡迎他們回到你的網(wǎng)站。

你應該將這些事件監聽(tīng)器添加到加載事件監聽(tīng)器中，這樣當用戶(hù)訪(fǎng)問(wèn)(加載)你的網(wǎng)站時(shí)，它們就會(huì )被初始化。

showOnlineStatus 函數可以幫助您向用戶(hù)顯示自定義消息。例如，如下所示：

根據連接狀態(tài)顯示自定義消息

您可以在CodePen上找到上述示例的完整源代碼。

CodePen：https://codepen.io/varunjoshi995/pen/MWazKjB

但是，此屬性可能并不完全可信，如MDN所述：

在Chrome和Safari中，如果瀏覽器無(wú)法連接到局域網(wǎng)(LAN)或路由器，則表明該瀏覽器處于脫機狀態(tài);所有其他條件都返回true。所以，當瀏覽器返回一個(gè)  false 值時(shí)，你可以認為它是離線(xiàn)的，但你不能認為 true 值一定意味著(zhù)瀏覽器可以上網(wǎng)。

這意味著(zhù) navigator.onLine 屬性可能會(huì )導致誤報。因此，我們可能需要考慮其他確定方法。

這些方法之一是使用OfflineJS，這是一個(gè)很酷的庫，用于通知您的用戶(hù)他們已失去與您網(wǎng)站的連接。它提供了精美的主題，幾乎不需要配置。

OfflineJS：https://github.hubspot.com/offline/docs/welcome/

如果你不想使用OfflineJS，比較好的解決方法是調用端API。如果客戶(hù)端/用戶(hù)處于脫機狀態(tài)，則API調用將失敗并返回錯誤響應。如果你使用的是Axios，可能會(huì )丟失  error.response，這可能意味著(zhù)客戶(hù)端/用戶(hù)處于離線(xiàn)狀態(tài)。

上面的示例與 navigator.onLine 屬性一起可以幫助避免誤報，并且你可以確定用戶(hù)是否連接到Internet或網(wǎng)絡(luò )。