jQuery

индекс
283,92

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

Итак, мне понадобилась поддержка событий 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 :)

Всем спасибо за мудрые советы и тестирование
+39
5 октября 2009, 14:45
78

комментарии (30)

+1
alexeydg #
круто, автору зачет
+1
xscript #
спасибо
+1
gloomkolomna #
Спасибо!
Добавил в закладки
+2
Wott #
Ага, только вот функция болтается в window — не есть хорошо.
Да и url проверочный неплохо бы в параметры вынести или глобальную переменную.
+2
xscript #
Это конечно не катастрофически и легко поправляется, но конечно признаю свою вину :)
+1
woodoo #
спасибо, пригодится в одном из проектов.
+1
bolk #
Предлагаю назвать события «realonline» или «trueonline».
0
xscript #
Хороший совет, спасибо
0
sayber #
Супер! Спасибо огромное.
Завтра на нашем сайте сменю )
0
Zak #
Хм, работает…
0
Zak #
Ой, нет, в хроме 3.0.195.21 не работает, ждал минуту.
0
xscript #
Проверял в нем. Какой из примеров не сработал?
0
Zak #
Первый, который без checkWebStatus
0
xscript #
К сожалению, до 3.0.195.21 не удалось откатить chrome, откатил до 3.0.195.25, там все хорошо. Открыл первый пример, отсоединился, нажал на ссылку — офлайн. Вы также все проделывали?
Довольно странно, с хромом не должно было возникнуть проблем.
0
Zak #
Обновился до 3.0.195.25 Открыл оба примера, все сразу показали «онлайн».
Вытащил сетевой провод, второй пример сам стал оффлайн а первый остался зеленым.
Нажал на ссылку в первом примере и он стал оффлайн :)
Подключил провод, второй пример заработал, но первый пример так и не стал онлайн. Нажимал ссылку несколько раз, ничего :(
0
xscript #
Все правильно :) Чтобы в первом примере опять стало online сейчас необходимо сделать удачный запрос. Чуть ниже написал мысли по этому поводу habrahabr.ru/blogs/jquery/71529/#comment_2050582
0
Zak #
Ну значит не работает :)
0
xscript #
ок :) В новой версии добавлю проверку, появилась ли сеть до появления запроса
0
xscript #
*успешного запроса
0
xscript #
Все готово :) пост заапдейтил
0
AleXSuS #
Firefox 3.0.14 не работает. Пишет всегда «No connect!!!»
0
xscript #
Только что проверил в нем, все ок. При каких действиях пишет «No connect»?
0
AleXSuS #
Да вроде при любых. И отключал соединения и включал и обновлял страницу и запрос делал.
В Опере 10 и ie 7 пишет Connect.
0
xscript #
Очень странно, что у Вас не работает. Откатил до 14, сперва открыл xscript.ru/tests/onlineoffline/example.html, отрубил соединение, нажал на линк, оффлайн показался. Теперь, чтобы заработал онлайн, необходимо сделать удачный запрос. К сожалению, в этом примере такой ссылки нет. Все хорошо и с xscript.ru/tests/onlineoffline/example.html — отсоединился — офф, присоединился — on.

Пока писал пост, возникла идея, что пока оффлайн, для браузеров, не поддерживающих наттивно online event необходимо поставить таймер, который периодически будет тыкаться и проверять, не появился ли инет
0
jandosul #
Предлагаю вместо загрузки фото поставить http method head так можно снизить размер респонса
0
xscript #
В таком случае необходимо заморочиться с кроссдоменными запросами, что может быть очень неудобно.
0
jandosul #
Мы друг друга немного не поняли я имел ввиду использовать метов head вместо get
0
xscript #
По get запросу получаем только картинку. В плагине по get больше ничего не передается. Поясните мысль
0
jandosul #
Насколько я знаю отличием head от get, post является то,
что респонс идет без боди только http заголовки чего нам достаточно.
Я вот предлагаю, зачем картинка нам нужно узнать есть соединение или нет?
Канечно в итоге получается экономим на спичках но все же
0
xscript #
Все правильно, при head запросе мы не получаем тело ответа. Но объект Image не поддерживает head запросы. Если совершать запрос через xhr, то придется заморочится с кроссдоменными запросами, что еще хуже.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.