1. Одно постоянное
соединение на все
вкладки сайта
Глеб Арестов,
веб-технолог, Мамба

2. Одно соединение —
это хорошо
––Comet использует постоянное соединение
––Нагрузка на сетевое оборудование
––Мобильные устройства
––Ограничения браузеров

3. Одно соединение —
это хорошо
––Comet использует постоянное соединение
––Нагрузка на сетевое оборудование
––Мобильные устройства
––Ограничения браузеров

4. browserscope.org/?category=network&v=top
http://b23.ru/y5o5
Firefox 14 6
IE 8 6
Opera 12 6
Android 2.3 9
iPhone 4 4
IE 7.0 2

5. Решения для обхода
ограничений
––shared web worker
––localStorage c onstorage
––flash
––когда совсем ничего нет – субдомены

6. Решения для обхода
ограничений
––shared web worker
––localStorage c onstorage
––flash
––когда совсем ничего нет – субдомены

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

8. localStorage
window.onstorage(function(event){
event.key //”name”
event.newValue // “Gleb“
});

9. localStorage
window.onstorage(function(event){
event.key //”name”
event.newValue// “Gleb“
});
Срабатывает только если вкладка активна

10. Как оставить одно
соединение
––системно разделять данные
––знать, есть ли уже соединение или нет
––уметь передавать данные между
вкладками

11. Как оставить одно
соединение
––системно разделять данные
––знать, есть ли уже соединение или нет
––уметь передавать данные между
вкладками

12. Система разделения
данных
––Оперативные данные отправляются в
каналы
––Каждый канал служит для своей задачи

13. Comet
Publish/Subscribe
подписка на канал
total_users_counter
публикация в канал
total_users_counter

14. PHP Comet
подписка
публикация

15. PHP Comet
3
«5 новых»

16. PHP Comet
3
«5 новых»

17. {
“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
}
}]
}

18. Как оставить одно
соединение
––системно разделять данные
––знать, есть ли уже соединение или нет
––уметь передавать данные между
вкладками

19. Есть ли уже соединение
или нет?
––Cоглашение — только “главная” вкладка
занимается соединением
––Остальные вкладки следят, чтобы
“главной” кто-то был

20. ––Вкладка может осознавать себя главной
––Главная вкладка общается с сервером
––Главная общается с другими вкладками
––Любая вкладка стремиться стать главной
интернеты

21. Какая вкладка главная
–– У вкладок есть id
––“я главная” каждые 300 мс и когда
открывается новая вкладка
––Последний отчёт не старше секунды
––Допускается, что главная может
перестать быть главной

22. “главная” подтверждает
своё существование
––localStorage.setItem(‘xd-master’, ...);
––каждые 300 мс
––при изменении ячейки “xd-master-pretendent”
––новые вкладки:
...setItem(‘xd-master-pretendent’, my_id);

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

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

25. Главная Второстепенная
ms
setItem 0 onstorage
setTimeout()

26. Главная Второстепенная
ms
setItem 0 onstorage
setTimeout()
setItem 300 onstorage
setTimeout()

27. Главная Второстепенная
ms
setItem 0 onstorage
setTimeout()
setItem 300 onstorage
453 setTimeout()

28. Главная Второстепенная
ms
setItem 0 onstorage
setTimeout()
setItem 300 onstorage
453 setTimeout()
600

29. Главная Второстепенная
ms
setItem 0 onstorage
setTimeout()
setItem 300 onstorage
453 setTimeout()
600
900

30. Главная Второстепенная
ms
setItem 0 onstorage
setTimeout()
setItem 300 onstorage
453 setTimeout()
600
900
1200

31. Главная Второстепенная
ms
setItem 0 onstorage
setTimeout()
setItem 300 onstorage
453 setTimeout()
600
1 sec
900
1200
1300

32. Главная Второстепенная
ms
setItem 0 onstorage
setTimeout()
setItem 300 onstorage
453 setTimeout()
600
1 sec
900
1200
1300 проверка, setItem()

33. Главная может
перестать быть главной
––Главная может быть занята, а не закрыта
––Главная должна смириться с тем, что она
больше не главная

34. Как оставить одно
соединение
––системно разделять данные
––знать, есть ли уже соединение или нет
––уметь передавать данные между
вкладками

35. Обмен данными между
вкладками
––Все должны получить данные,
полученные от сервера
––“Главная” должна знать, что нужно другим

36. Обмен данными между
вкладками
––Все должны получить данные,
полученные от сервера
––“Главная” должна знать, что нужно другим

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

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

39. Обмен данными между
вкладками
––Все должны получить данные,
полученные от сервера
––“Главная” должна знать, что нужно другим

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

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

42. Обмен данными между
вкладками
––Все должны получить данные,
полученные от сервера
––“Главная” должна знать, что нужно другим

43. Главная не знает что не
нужно другим
––Вкладки запрашивают каналы
––Вкладки закрываются - список каналов
накапливается
––Отказываемся от получения ненужного
––При закрытии “главной” восстанавливаем
поток необходимых каналов (xd-message)

44. Как оставить одно
соединение
––системно разделять данные
––знать - есть ли уже соединение или нет
––уметь передавать данные между
вкладками

45. localStorage
без события onstorage
––нужно получать изменения
––как можно скорее
––все (ничего не потерять)
––производительно
––и не хранить лишнего

46. saveToLS(‘xd-message’, {message: ‘alerta’})
xd-message-wrap: “22=1min“
id-wrap-22: {message: ‘alerta’}

47. saveToLS(‘xd-message’, {message: ‘notify’})
xd-message-wrap: “22=1min&23=1.01min“
id-wrap-22: {message: ‘alerta’}
id-wrap-23: {message: ‘notify’}

48. 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’}

49. Одно постоянное
соединение
––Мгновенные уведомления — это хорошо
––Одно соединение — тоже хорошо
––Реализация для сирых (IE) — субдомены
––comet/localStorage/onstorage — сегодня
––comet/shared WebWorker — завтра

50. Вопросы
Глеб Арестов,
glebarestov@mamba.ru