Одно постоянное соединение на все вкладки сайтаГлеб Арестов,

веб-технолог, Мамба

Одно соединение — это хорошо

– Comet использует постоянное соединение

– Нагрузка на сетевое оборудование

– Мобильные устройства

– Ограничения браузеров

Одно соединение — это хорошо

– Comet использует постоянное соединение

– Нагрузка на сетевое оборудование

– Мобильные устройства

– Ограничения браузеров

http://b23.ru/y5o5browserscope.org/?category=network&v=top

Firefox 14 6IE 8 6Opera 12 6Android 2.3 9iPhone 4 4IE 7.0 2

Решения для обхода ограничений

– shared web worker

– localStorage c onstorage

– flash

– когда совсем ничего нет – субдомены

Решения для обхода ограничений

– shared web worker

– localStorage c onstorage

– flash

– когда совсем ничего нет – субдомены

localStorage

localStorage.setItem(‘name’, ‘Gleb’);

localStorage

window.onstorage(function(event){

event.key //”name”

event.newValue // “Gleb“

});

localStorage

window.onstorage(function(event){

event.key //”name”

event.newValue// “Gleb“

});

Срабатывает только если вкладка активна

Как оставить одно соединение

– системно разделять данные

– знать, есть ли уже соединение или нет

– уметь передавать данные между вкладками

Как оставить одно соединение

– системно разделять данные

– знать, есть ли уже соединение или нет

– уметь передавать данные между вкладками

Система разделения данных

– Оперативные данные отправляются в каналы

– Каждый канал служит для своей задачи

публикация в канал

total_users_counter

CometPublish/Subscribe

подписка на канал

total_users_counter

PHP Comet

подписка

публикация

PHP Comet

«5 новых»3

PHP Comet

«5 новых»3

{ “jsonrpc”: “2.0”, “id”: 1, “result”: [{ “channel”: “mamba.messenger.counter.173963799”, “action”: “replace”, “limit”: 1, “lifetime”: 600, “cursor”: 1350389631154392, “identity”: “173963799”, “key”: 173963799, “content”: { “count_all”: 2999, “count_unread”: 5 } }]}

Как оставить одно соединение

– системно разделять данные

– знать, есть ли уже соединение или нет

– уметь передавать данные между вкладками

Есть ли уже соединение или нет?

– Cоглашение — только “главная” вкладка занимается соединением

– Остальные вкладки следят, чтобы “главной” кто-то был

– Вкладка может осознавать себя главной

– Главная вкладка общается с сервером

– Главная общается с другими вкладками

– Любая вкладка стремиться стать главной

интернеты

Какая вкладка главная – У вкладок есть id

– “я главная” каждые 300 мс и когда открывается новая вкладка

– Последний отчёт не старше секунды

– Допускается, что главная может перестать быть главной

“главная” подтверждает своё существование

– localStorage.setItem(‘xd-master’, ...);

– каждые 300 мс

– при изменении ячейки “xd-master-pretendent”

– новые вкладки:

...setItem(‘xd-master-pretendent’, my_id);

localStorage

.setItem(‘xd-master’, my_id + ‘ ‘ + now());

window.onstorage = function(e){

if (e.key == ‘xd-master‘){

...

}

};

Главная Второстепеннаяms

setItem

Главная Второстепенная

0 onstoragesetTimeout()

Главная Второстепеннаяms

setItem

setItem

Главная Второстепенная

0

300

onstoragesetTimeout()

onstoragesetTimeout()

Главная Второстепеннаяms

setItem

setItem

Главная Второстепенная

0

300453

onstoragesetTimeout()

onstoragesetTimeout()

Главная Второстепеннаяms

setItem

setItem

Главная Второстепенная

0

300453600

onstoragesetTimeout()

onstoragesetTimeout()

Главная Второстепеннаяms

setItem

setItem

Главная Второстепенная

0

300453600

900

onstoragesetTimeout()

onstoragesetTimeout()

Главная Второстепеннаяms

setItem

setItem

Главная Второстепенная

0

300453600

900

1200

onstoragesetTimeout()

onstoragesetTimeout()

Главная Второстепеннаяms

setItem

setItem

Главная Второстепенная

0

300453600

900

12001300

1 sec

onstoragesetTimeout()

onstoragesetTimeout()

Главная Второстепеннаяms

setItem

setItem

проверка, setItem()

Главная Второстепенная

0

300453600

900

12001300

1 sec

onstoragesetTimeout()

onstoragesetTimeout()

Главная может перестать быть главной

– Главная может быть занята, а не закрыта

– Главная должна смириться с тем, что она больше не главная

Как оставить одно соединение

– системно разделять данные

– знать, есть ли уже соединение или нет

– уметь передавать данные между вкладками

Обмен данными между вкладками

– Все должны получить данные, полученные от сервера

– “Главная” должна знать, что нужно другим

Обмен данными между вкладками

– Все должны получить данные, полученные от сервера

– “Главная” должна знать, что нужно другим

localStorage

.setItem(‘xd-message’, {data: “...”})

window.onstorage = function(e){ if (e.key == ‘xd-message’){ ... }};

Обмен данными между вкладками

– Все должны получить данные, полученные от сервера

– “Главная” должна знать, что нужно другим

localStorage

.setItem(‘xd-message’, {data: “...”})

window.onstorage = function(e){ if (e.key == ‘xd-message’){ ... }};

Обмен данными между вкладками

– Все должны получить данные, полученные от сервера

– “Главная” должна знать, что нужно другим

Главная не знает что не нужно другим

– Вкладки запрашивают каналы

– Вкладки закрываются - список каналов накапливается

– Отказываемся от получения ненужного

– При закрытии “главной” восстанавливаем поток необходимых каналов (xd-message)

Как оставить одно соединение

– системно разделять данные

– знать - есть ли уже соединение или нет

– уметь передавать данные между вкладками

localStorage без события onstorage

– нужно получать изменения

– как можно скорее

– все (ничего не потерять)

– производительно

– и не хранить лишнего

saveToLS(‘xd-message’, {message: ‘alerta’})

xd-message-wrap: “22=1min“

id-wrap-22: {message: ‘alerta’}

saveToLS(‘xd-message’, {message: ‘notify’})

xd-message-wrap: “22=1min&23=1.01min“

id-wrap-22: {message: ‘alerta’}

id-wrap-23: {message: ‘notify’}

saveToLS(‘xd-message’, {message: ‘warning’})

xd-message-wrap: “22=1min&23=1.01min&24=1.02min“

id-wrap-22: {message: ‘alerta’}

id-wrap-23: {message: ‘notify’}

id-wrap-24: {message: ‘warning’}

– Мгновенные уведомления — это хорошо

– Одно соединение — тоже хорошо

– Реализация для сирых (IE) — субдомены

– comet/localStorage/onstorage — сегодня

– comet/shared WebWorker — завтра

Одно постоянное соединение

Вопросы

Глеб Арестов,

glebarestov@mamba.ru