Blog. Just Blog

Определение состояния подключения к сети на JavaScript

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Определение состояния подключения к сети на JavaScript
Определение состояния подключения к сети на JavaScript

В очередной раз бродя по интернетам, я наткнулся на упоминание электронного журнала The Disconnect. Суть его в том, что контент сайта становится доступен только когда пользователь отключится от интернета. Стоит включить соединение обратно и текст вновь скрывается. Весь этот эпатаж я оставлю на совести разработчика, но мне стало интересно, как реализована проверка состояния подключения.

Посмотрев сетевую активность страницы, я выяснил, что каждые несколько секунд выполняется AJAX-запрос к сайту ipv4.icanhazip.com. Если запрос отработал без ошибок, значит сайт считает, что соединение есть и надо скрыть контент. Согласно политики безопасности, AJAX-запросы могут отправляться только на свой домен, если иное не прописано в настройках сервера. Действительно, если посмотреть заголовки ответа с сервера ipv4.icanhazip.com, то в них обнаружится заголовок Access-Control-Allow-Origin: *, который разрешает получать контент кроссдоменными запросами. На мой взгляд, весьма сомнительное решение напрягать поллингом сторонний ресурс при наличии своего сервера. Но с другой стороны, такие скрипты могут работать хоть на локальном компьютере без необходимости вносить какие-либо настройки на сервере. С теорией разобрались, переходим к практике.
  1. var http_request;
  2. var offline=true;
  3.  
  4. // Mozilla, Safari, Opera, Chrome
  5. if (window.XMLHttpRequest) {
  6.     http_request = new XMLHttpRequest();
  7. }
  8. // Internet Explorer
  9. else if (window.ActiveXObject) {
  10.     try {
  11.         http_request = new ActiveXObject("Msxml2.XMLHTTP");
  12.     }
  13.     catch (e) {
  14.         try {
  15.             http_request = new ActiveXObject("Microsoft.XMLHTTP");
  16.         }
  17.         catch (e) {
  18.             // Браузер не поддерживает эту технологию
  19.         }
  20.     }
  21. }
  22. else {
  23.     // Браузер не поддерживает эту технологию
  24. }
  25.  
  26. if (http_request) {
  27.     // Обработчик AJAX-запроса
  28.     http_request.onreadystatechange = function() {
  29.         // Запрос завершен с каким-то результатом
  30.         if (http_request.readyState==4) {
  31.             // Сервер отработал успешно
  32.             if (http_request.status==200) {
  33.                 offline=false;
  34.                 go_online();
  35.             }
  36.             else {
  37.                 offline=true;
  38.                 go_offline();
  39.             }
  40.         }
  41.     };
  42.  
  43.     // Проверка состояния подключения
  44.     setInterval(function() {
  45.         http_request.open('GET''http://ipv4.icanhazip.com'true);
  46.         http_request.timeout=500;
  47.         http_request.send('');
  48.     }, 3000);
  49. }
  50.  
  51. // Обработчик перехода в онлайн
  52. function go_online() {
  53.     // действия при появлении соединения
  54. }
  55. // Обработчик перехода в оффлайн
  56. function go_offline() {
  57.     // действия при отключении соединения
  58. }
Запросы выполняются с интервалом в 3 секунды, текущее состояние подключения в любой момент можно определять по значению глобальной переменной offline, а в функциях go_online() и go_offline() выполнять действия, соответственно, при появлении соединения и при отключении. Повторюсь, при наличии своего сервера хорошей практикой будет использовать для проверки какой-нибудь скрипт, расположенный на своем ресурсе, а не сторонний сервер.

Где это можно использовать? Например, можно проверять статус соединения перед отправкой формы, сохранять в локальном хранилище введенные данные при обрыве соединения, приостанавливать фоновые действия, которые требуют наличия интернета, ну и так далее. Применений можно найти много. Готовый пример скрипта вы можете посмотреть на демонстрационной странице.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 396 | Комментариев: 3

Метки: JavaScript

Комментарии

Отзывы посетителей сайта о статье
toor (23.10.2019 в 14:50):
Сомнительное решение... Открыл демо страницу через proxy, о там OFFLINE.
ManHunter (22.10.2019 в 10:52):
navigator.onLine работает очень неоднозначно, поэтому я его тут даже не упоминал.

ЦитатаВ Chrome и Safari, если браузер не может соединиться с локальной сетью (LAN) или роутером, это будет означать offline; во всех остальных случаях вернется true. Таким образом, мы можем предположить что браузер не в сети, когда возвращаемое значение false, но вы не можете предположить что значение true обязательно обозначает что браузер может получить доступ к интернету. Вы можете получать ложные срабатывания, например, в случаях, когда компьютер под управлением программного обеспечения для виртуализации, которое имеет виртуальные сетевые адаптеры, которые всегда "Подключено". Поэтому, если вы действительно хотите, чтобы определять состояние браузера, вы должны разработать дополнительные средства проверки.

В Firefox и Internet Explorer, переключение браузера в автономный режим посылает false значение. Во всех остальных случаях возвращается значение true.

Это примерно как WinAPI'вское GetSystemMetrics(SM_NETWORK) возвращает наличие возможности подключения к интернету, но не позволяет узнать реальный статус подключения. Приведенный способ проверяет именно доступность соединения "наружу".
Infocatcher (21.10.2019 в 20:09):
Еще в современных браузерах для пущей эффективности есть navigator.onLine и специальные события:
https://developer.mozilla.org/...ffline_event

А журнальные затейники больше раздражение вызывают и желание пошаманить с каким-нибудь адблоком.

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2019
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0035 сек.) / Память: 5 Mb
Наверх