Pull to refresh

jQuery плагин для обработки событий online/offline

Reading time 2 min
Views 2K
Итак, мне понадобилась поддержка событий online/offline в браузерах(напомню, что согласно черновику
html5 они возникают при появлении/исчезновении соединения соответственно). На данный момент Mozilla и
IE8 эти события поддерживают. А это уже немало.

Все бы хорошо, но online событие на 100% не гарантирует, что пользователь в онлайне. Оно гарантирует, что есть какое-то соединение, но не связь с интернетом(если кто не видел, поясняющее видео на эту тему). Поэтому необходима дополнительная проверка на доступность внешнего мира. Событие offline гарантирует, что связи нет, что может быть удобно в некоторых случаях, никаких дополнительных действий разработчику совершать не надо.

Не думаю, что со временем реализация этих событий изменится, поэтому если мы хотим точно знать, есть связь или нет, необходимо дописывать реализацию самим.

С Мозиллой и ие8 определились(все хорошо, но необходимо чуть подпилить), но что же делать с остальными браузерами, где еще нет этих событий? Будем определять их сами при инициилизации страницы и после аякс запросов. А сделаем это помощью jquery c trigger/bind в виде плагина.

Основные идеи плагина


0) Удобный интерфейс.
$(document.body).bind('xonline', function(event) { ... });
$(document.body).bind('xoffline', function(event) { ... });
Я использую xonline, xoffline так как online и offline уже реализованы в браузере, а мы, по сути, делаем надстройку над этими событиями.

1) Естественно, плагин должен поддерживать online, offline events для браузеров, в которых эти события имеются. При online для этих браузеров происходит дополнительная проверка на связь с интернетом. При offline ничего не проверяем.

2) Для браузеров, неподдерживающих эти действия, проверка на изменение сетевого статуса происходит после ajax запросов. Предположим, было соединение, а запрос оказался неудачным. В этом случае делаем дополнительную проверку на связь как в 1 пункте и, если надо, запускаем trigger('xoffline').

Как использовать?


Все просто, создаем обработчиков двух событий xonline, xoffline. Все остальное плагин выполнит сам. Посмотреть, как работает плагин, можно открыв пример, а затем отключившись от сети. В восьмом ie и firefox 3.5 сработает xoffline и прямоугольник перекрасится. В google chrome, opera, safari и ранних версиях ie и mozilla, помимо отключения от сети, для запуска события offline еще нужно выполнить неудачный запрос. Если жизненно необходимо следить за соединением постоянно, то плагин поддерживает метод $.checkWebstatus(time) (time — количество секунд). Этот метод в браузерах, неподдерживающих нативно online/offline события, проверяет каждые time секунд соединение. Пример с checkWebStatus

Успешно протестировано в Mozilla 3.5.3, IE8, IE6, Chrome, Opera 10

Скачать плагин Пример Пример с дополнительной проверкой Внутренности плагина

Update 10.10.2009
Подправил плагин:
1) Исправлен баг с проверкой состояния сети при оффлайне.
2) События переименованы из xonline, xoffline в более понятные trueonline, trueoffline.
3) Убраны методы и переменные из window.
4) Добавлена возможность настройки плагина.
5) У плагина появилась своя страница.
6) Теперь он называется TrueOnline plugin :)

Всем спасибо за мудрые советы и тестирование
Tags:
Hubs:
+39
Comments 30
Comments Comments 30

Articles