Определение состояния подключения к сети на JavaScript
Определение состояния подключения к сети на JavaScript
В очередной раз бродя по интернетам, я наткнулся на упоминание электронного журнала The Disconnect. Суть его в том, что контент сайта становится доступен только когда пользователь отключится от интернета. Стоит включить соединение обратно и текст вновь скрывается. Весь этот эпатаж я оставлю на совести разработчика, но мне стало интересно, как реализована проверка состояния подключения.
Посмотрев сетевую активность страницы, я выяснил, что каждые несколько секунд выполняется AJAX-запрос к сайту ipv4.icanhazip.com. Если запрос отработал без ошибок, значит сайт считает, что соединение есть и надо скрыть контент. Согласно политики безопасности, AJAX-запросы могут отправляться только на свой домен, если иное не прописано в настройках сервера. Действительно, если посмотреть заголовки ответа с сервера ipv4.icanhazip.com, то в них обнаружится заголовок Access-Control-Allow-Origin: *, который разрешает получать контент кроссдоменными запросами. На мой взгляд, весьма сомнительное решение напрягать поллингом сторонний ресурс при наличии своего сервера. Но с другой стороны, такие скрипты могут работать хоть на локальном компьютере без необходимости вносить какие-либо настройки на сервере. С теорией разобрались, переходим к практике.
Code (JavaScript) : Убрать нумерацию
- var http_request;
- var offline=true;
- // Mozilla, Safari, Opera, Chrome
- if (window.XMLHttpRequest) {
- http_request = new XMLHttpRequest();
- }
- // Internet Explorer
- else if (window.ActiveXObject) {
- try {
- http_request = new ActiveXObject("Msxml2.XMLHTTP");
- }
- catch (e) {
- try {
- http_request = new ActiveXObject("Microsoft.XMLHTTP");
- }
- catch (e) {
- // Браузер не поддерживает эту технологию
- }
- }
- }
- else {
- // Браузер не поддерживает эту технологию
- }
- if (http_request) {
- // Обработчик AJAX-запроса
- http_request.onreadystatechange = function() {
- // Запрос завершен с каким-то результатом
- if (http_request.readyState==4) {
- // Сервер отработал успешно
- if (http_request.status==200) {
- offline=false;
- go_online();
- }
- else {
- offline=true;
- go_offline();
- }
- }
- };
- // Проверка состояния подключения
- setInterval(function() {
- http_request.open('GET', 'http://ipv4.icanhazip.com', true);
- http_request.timeout=500;
- http_request.send('');
- }, 3000);
- }
- // Обработчик перехода в онлайн
- function go_online() {
- // действия при появлении соединения
- }
- // Обработчик перехода в оффлайн
- function go_offline() {
- // действия при отключении соединения
- }
Где это можно использовать? Например, можно проверять статус соединения перед отправкой формы, сохранять в локальном хранилище введенные данные при обрыве соединения, приостанавливать фоновые действия, которые требуют наличия интернета, ну и так далее. Применений можно найти много. Готовый пример скрипта вы можете посмотреть на демонстрационной странице.
Просмотров: 3810 | Комментариев: 3
Метки: JavaScript
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
toor
(23.10.2019 в 14:50):
Сомнительное решение... Открыл демо страницу через proxy, о там OFFLINE.
ManHunter
(22.10.2019 в 10:52):
navigator.onLine работает очень неоднозначно, поэтому я его тут даже не упоминал.
Это примерно как WinAPI'вское GetSystemMetrics(SM_NETWORK) возвращает наличие возможности подключения к интернету, но не позволяет узнать реальный статус подключения. Приведенный способ проверяет именно доступность соединения "наружу".
Это примерно как WinAPI'вское GetSystemMetrics(SM_NETWORK) возвращает наличие возможности подключения к интернету, но не позволяет узнать реальный статус подключения. Приведенный способ проверяет именно доступность соединения "наружу".
Infocatcher
(21.10.2019 в 20:09):
Еще в современных браузерах для пущей эффективности есть navigator.onLine и специальные события:
https://developer.mozilla.org/...ffline_event
А журнальные затейники больше раздражение вызывают и желание пошаманить с каким-нибудь адблоком.
https://developer.mozilla.org/...ffline_event
А журнальные затейники больше раздражение вызывают и желание пошаманить с каким-нибудь адблоком.
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 35,984 раза
Поблагодарили 35,984 раза
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |