Мне нужна помощь в том, как я могу проверить подключение к Интернету, используя Javascript или jQuery или любую библиотеку, если она доступна. потому что я разрабатываю автономное приложение, и я хочу показать версию, если пользователь находится в автономном режиме и другая версия, если пользователь подключен к сети.
На данный момент я использую этот код:
if (navigator.onLine) {
alert('online');
} else {
alert('offline');
}
Я думаю, вам стоит попробовать OFFLINE.js.. он выглядит довольно простым в использовании, просто попробуйте.
он даже предоставляет опцию checkOnLoad, которая немедленно проверяет соединение при загрузке страницы.
Offline.check(): проверьте текущий статус соединения.
Offline.state: текущее состояние соединения "вверх" или "вниз"
не пробовал, было бы неплохо узнать, работает ли оно по назначению.
EDIT взял немного пика в код, он использует метод с FAILED XHR REQUEST, предложенный в ЭТО SO Вопрос
Я получил эту часть функциональности кода с сайта Mozilla:
window.addEventListener('load', function(e) {
if (navigator.onLine) {
console.log('We\'re online!');
} else {
console.log('We\'re offline...');
}
}, false);
window.addEventListener('online', function(e) {
console.log('And we\'re back :).');
}, false);
window.addEventListener('offline', function(e) {
console.log('Connection is down.');
}, false);
У них даже есть ссылка чтобы увидеть, как она работает. Я попробовал его в IE, Firefox и Chrome. Chrome оказался самым медленным, но это было всего лишь около половины секунды.
Взгляните на Определите, что подключение к Интернету отключено? В принципе, сделайте запрос ajax к тому, что, как вы знаете, скорее всего будет (скажем, google.com) и если это не удается, подключение к Интернету отсутствует.
navigator.onLine - это свойство, которое поддерживает значение true/false (true для онлайн, false для офлайн). Это свойство обновляется всякий раз, когда пользователь переходит в "автономный режим".
window.addEventListener('load', function() {
function updateOnlineStatus(event) {
document.body.setAttribute("data-online", navigator.onLine);
}
updateOnlineStatus();
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
});
Вы можете использовать новый Fetch API, который вызывает ошибку почти сразу, если сеть отсутствует.
Проблема заключается в том, что в API-интерфейсе Fetch есть поддержка для детей (в настоящее время у Chrome больше всего стабильная реализация, Firefox и Opera туда, IE не поддерживает). Для поддержки принципа выборки существует polyfill, но не обязательно быстрый возврат, как при чистой реализации. С другой стороны, для автономного приложения потребуется современный браузер...
Пример, который попытается загрузить обычный текстовый файл через HTTPS, чтобы избежать требований CORS (ссылка выбрана случайным образом, на данный момент вы должны настроить сервер с крошечным текстовым файлом для тестирования против теста в Chrome):
fetch("https://link.to/some/testfile")
.then(function(response) {
if (response.status !== 200) { // add more checks here, ie. 30x etc.
alert("Not available"); // could be server errors
}
else
alert("OK");
})
.catch(function(err) {
alert("No network"); // likely network errors (incl. no connection)
});
Другой вариант - настроить Служебный работник и использовать выборку. Таким образом, вы можете использовать дополнительную/настраиваемую автономную страницу или кэшированную страницу, когда запрашиваемая страница недоступна. Также это очень свежий API.
Попробуйте использовать WebRTC, см. diafygi/webrtc-ips; частично
Кроме того, эти запросы STUN выполняются вне нормального XMLHttpRequest, поэтому они не видны в разработчике консоли или может быть заблокирован плагинами, такими как AdBlockPlus или Ghostery. Это делает эти типы запросов доступными для онлайн-запросов отслеживание, если рекламодатель устанавливает STUN-сервер с подстановочным знаком домен.
модифицировано минимально для регистрации "онлайн" или "офлайн" в console
// https://github.com/diafygi/webrtc-ips
function online(callback){
//compatibility for firefox and chrome
var RTCPeerConnection = window.RTCPeerConnection
|| window.mozRTCPeerConnection
|| window.webkitRTCPeerConnection;
var useWebKit = !!window.webkitRTCPeerConnection;
//bypass naive webrtc blocking using an iframe
if(!RTCPeerConnection) {
//NOTE: you need to have an iframe in the page
// right above the script tag
//
//<iframe id="iframe" sandbox="allow-same-origin" style="display: none"></iframe>
//<script>...getIPs called in here...
//
var win = iframe.contentWindow;
RTCPeerConnection = win.RTCPeerConnection
|| win.mozRTCPeerConnection
|| win.webkitRTCPeerConnection;
useWebKit = !!win.webkitRTCPeerConnection;
}
//minimal requirements for data connection
var mediaConstraints = {
optional: [{RtpDataChannels: true}]
};
//firefox already has a default stun server in about:config
// media.peerconnection.default_iceservers =
// [{"url": "stun:stun.services.mozilla.com"}]
var servers = undefined;
//add same stun server for chrome
if(useWebKit)
servers = {iceServers: [{urls: "stun:stun.services.mozilla.com"}]};
//construct a new RTCPeerConnection
var pc = new RTCPeerConnection(servers, mediaConstraints);
//create a bogus data channel
pc.createDataChannel("");
var fn = function() {};
//create an offer sdp
pc.createOffer(function(result){
//trigger the stun server request
pc.setLocalDescription(result, fn, fn);
}, fn);
//wait for a while to let everything done
setTimeout(function(){
//read candidate info from local description
var lines = pc.localDescription.sdp.split("\n");
// return `true`:"online" , or `false`:"offline"
var res = lines.some(function(line) {
return line.indexOf("a=candidate") === 0
});
callback(res);
}, 500);
}
//Test: Print "online" or "offline" into the console
online(function(connection) {
if (connection) {
console.log("online")
} else {
console.log("offline")
}
});Мое решение - захватить очень маленькое изображение (1x1), не кэшировано и всегда onLine.
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<script>
$( document ).ready(function() {
function onLine() {
alert("onLine")
}
function offLine() {
alert("offLine")
}
var i = new Image();
i.onload = onLine;
i.onerror = offLine;
i.src = 'http://www.google-analytics.com/__utm.gif';
});
</script>
<body>
Примечания:
Используйте локальную копию jQuery, иначе она не будет работать offLine.
Я протестировал код onLine/offLine, и он работает без задержки.
Работает со всеми браузерами, Desktop или Mobile.
В случае, если вам интересно, в Google Analytics не отслеживается, поскольку мы не используем никаких аргументов.
Не стесняйтесь менять изображение, просто убедитесь, что оно не кэшировано и оно мало по размеру.
Вы можете использовать SignalR, если вы разрабатываете веб-технологии MS. SignalR установит либо длинный опрос, либо веб-сокеты в зависимости от вашей технологии браузера сервера/клиента, прозрачный для вас разработчик. Вам не нужно использовать его ни для чего другого, кроме определения наличия активного подключения к сайту или нет.
Если SignalR отключается по какой-либо причине, вы потеряли соединение с сайтом, пока ваш экземпляр сервера SignalR фактически установлен на сайте. Таким образом, вы можете использовать $.connection.hub.disconnected() событие/метод на клиенте, чтобы установить глобальный var, который содержит ваше состояние соединения.
Читайте о SignalR и как его использовать для определения состояний соединения здесь... http://www.asp.net/signalr/overview/guide-to-the-api/handling-connection-lifetime-events#clientdisconnect
Смотрите Как проверить тип подключения (WiFi/LAN/WWAN) с помощью ответов HTML5/JavaScript?:
Windows.Networking.Connectivity API через этот учебник;// check if online/offline
// http://www.kirupa.com/html5/check_if_internet_connection_exists_in_javascript.htm
function doesConnectionExist() {
var xhr = new XMLHttpRequest();
var file = "http://www.yoursite.com/somefile.png";
var randomNum = Math.round(Math.random() * 10000);
xhr.open('HEAD', file + "?rand=" + randomNum, false);
try {
xhr.send();
if (xhr.status >= 200 && xhr.status < 304) {
return true;
} else {
return false;
}
} catch (e) {
return false;
}
}