Post on 16-Jun-2015
Одно постоянное соединение на все вкладки сайтаГлеб Арестов,
веб-технолог, Мамба
Одно соединение — это хорошо
– 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