Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Одно постоянноесоединение на всевкладки сайтаГлеб Арестов,веб-технолог, Мамба
Одно соединение —это хорошо––Comet использует постоянное соединение––Нагрузка на сетевое оборудование––Мобильные устройств...
Одно соединение —это хорошо––Comet использует постоянное соединение––Нагрузка на сетевое оборудование––Мобильные устройств...
browserscope.org/?category=network&v=tophttp://b23.ru/y5o5Firefox 14    6IE 8          6Opera 12      6Android 2.3   9iPho...
Решения для обходаограничений––shared web worker––localStorage c onstorage––flash––когда совсем ничего нет – субдомены
Решения для обходаограничений––shared web worker––localStorage c onstorage––flash––когда совсем ничего нет – субдомены
localStoragelocalStorage.setItem(‘name’, ‘Gleb’);
localStoragewindow.onstorage(function(event){ event.key //”name” event.newValue // “Gleb“});
localStoragewindow.onstorage(function(event){ event.key //”name” event.newValue// “Gleb“});Срабатывает только если вкладка...
Как оставить односоединение––системно разделять данные––знать, есть ли уже соединение или нет––уметь передавать данные меж...
Как оставить односоединение––системно разделять данные––знать, есть ли уже соединение или нет––уметь передавать данные меж...
Система разделенияданных––Оперативные данные отправляются в каналы––Каждый канал служит для своей задачи
Comet           Publish/Subscribe                      подписка на канал                      total_users_counterпубликаци...
PHP   Comet              подпискапубликация
PHP   Comet              3              «5 новых»
PHP   Comet              3              «5 новых»
{    “jsonrpc”: “2.0”,    “id”: 1,    “result”: [{       “channel”: “mamba.messenger.counter.173963799”,       “action”: “...
Как оставить односоединение––системно разделять данные––знать, есть ли уже соединение или нет––уметь передавать данные меж...
Есть ли уже соединениеили нет?––Cоглашение — только “главная” вкладка занимается соединением––Остальные вкладки следят, чт...
––Вкладка может осознавать себя главной––Главная вкладка общается с сервером––Главная общается с другими вкладками––Любая ...
Какая вкладка главная–– У вкладок есть id––“я главная” каждые 300 мс и когда открывается новая вкладка––Последний отчёт не...
“главная” подтверждаетсвоё существование––localStorage.setItem(‘xd-master’, ...);––каждые 300 мс––при изменении ячейки “xd...
localStorage.setItem(‘xd-master’, my_id + ‘ ‘ + now());
window.onstorage = function(e){	 if (e.key == ‘xd-master‘){		 ...		 }};
Главная            Второстепенная                 mssetItem      0          onstorage                          setTimeout()
Главная              Второстепенная                   mssetItem        0          onstorage                            set...
Главная             Второстепенная                  mssetItem       0          onstorage                           setTime...
Главная             Второстепенная                  mssetItem       0          onstorage                           setTime...
Главная              Второстепенная                   mssetItem        0          onstorage                            set...
Главная               Второстепенная                    mssetItem         0          onstorage                            ...
Главная               Второстепенная                    mssetItem         0          onstorage                            ...
Главная               Второстепенная                    mssetItem         0          onstorage                            ...
Главная можетперестать быть главной––Главная может быть занята, а не закрыта––Главная должна смириться с тем, что она боль...
Как оставить односоединение––системно разделять данные––знать, есть ли уже соединение или нет––уметь передавать данные меж...
Обмен данными междувкладками––Все должны получить данные, полученные от сервера––“Главная” должна знать, что нужно другим
Обмен данными междувкладками––Все должны получить данные, полученные от сервера––“Главная” должна знать, что нужно другим
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’){		 ...	 }};
Обмен данными междувкладками––Все должны получить данные, полученные от сервера––“Главная” должна знать, что нужно другим
Главная не знает что ненужно другим––Вкладки запрашивают каналы––Вкладки закрываются - список каналов накапливается––Отказ...
Как оставить односоединение––системно разделять данные––знать - есть ли уже соединение или нет––уметь передавать данные ме...
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:...
saveToLS(‘xd-message’, {message: ‘warning’})xd-message-wrap: “22=1min&23=1.01min&24=1.02min“id-wrap-22: {message: ‘alerta’...
Одно постоянноесоединение––Мгновенные уведомления — это хорошо––Одно соединение — тоже хорошо––Реализация для сирых (IE) —...
Вопросы      Глеб Арестов,      glebarestov@mamba.ru
Upcoming SlideShare
Loading in …5
×

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

2,564 views

Published on

  • Be the first to comment

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

  1. 1. Одно постоянноесоединение на всевкладки сайтаГлеб Арестов,веб-технолог, Мамба
  2. 2. Одно соединение —это хорошо––Comet использует постоянное соединение––Нагрузка на сетевое оборудование––Мобильные устройства––Ограничения браузеров
  3. 3. Одно соединение —это хорошо––Comet использует постоянное соединение––Нагрузка на сетевое оборудование––Мобильные устройства––Ограничения браузеров
  4. 4. browserscope.org/?category=network&v=tophttp://b23.ru/y5o5Firefox 14 6IE 8 6Opera 12 6Android 2.3 9iPhone 4 4IE 7.0 2
  5. 5. Решения для обходаограничений––shared web worker––localStorage c onstorage––flash––когда совсем ничего нет – субдомены
  6. 6. Решения для обходаограничений––shared web worker––localStorage c onstorage––flash––когда совсем ничего нет – субдомены
  7. 7. localStoragelocalStorage.setItem(‘name’, ‘Gleb’);
  8. 8. localStoragewindow.onstorage(function(event){ event.key //”name” event.newValue // “Gleb“});
  9. 9. localStoragewindow.onstorage(function(event){ event.key //”name” event.newValue// “Gleb“});Срабатывает только если вкладка активна
  10. 10. Как оставить односоединение––системно разделять данные––знать, есть ли уже соединение или нет––уметь передавать данные между вкладками
  11. 11. Как оставить односоединение––системно разделять данные––знать, есть ли уже соединение или нет––уметь передавать данные между вкладками
  12. 12. Система разделенияданных––Оперативные данные отправляются в каналы––Каждый канал служит для своей задачи
  13. 13. Comet Publish/Subscribe подписка на канал total_users_counterпубликация в каналtotal_users_counter
  14. 14. PHP Comet подпискапубликация
  15. 15. PHP Comet 3 «5 новых»
  16. 16. PHP Comet 3 «5 новых»
  17. 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. 18. Как оставить односоединение––системно разделять данные––знать, есть ли уже соединение или нет––уметь передавать данные между вкладками
  19. 19. Есть ли уже соединениеили нет?––Cоглашение — только “главная” вкладка занимается соединением––Остальные вкладки следят, чтобы “главной” кто-то был
  20. 20. ––Вкладка может осознавать себя главной––Главная вкладка общается с сервером––Главная общается с другими вкладками––Любая вкладка стремиться стать главной интернеты
  21. 21. Какая вкладка главная–– У вкладок есть id––“я главная” каждые 300 мс и когда открывается новая вкладка––Последний отчёт не старше секунды––Допускается, что главная может перестать быть главной
  22. 22. “главная” подтверждаетсвоё существование––localStorage.setItem(‘xd-master’, ...);––каждые 300 мс––при изменении ячейки “xd-master-pretendent”––новые вкладки: ...setItem(‘xd-master-pretendent’, my_id);
  23. 23. localStorage.setItem(‘xd-master’, my_id + ‘ ‘ + now());
  24. 24. window.onstorage = function(e){ if (e.key == ‘xd-master‘){ ... }};
  25. 25. Главная Второстепенная mssetItem 0 onstorage setTimeout()
  26. 26. Главная Второстепенная mssetItem 0 onstorage setTimeout()setItem 300 onstorage setTimeout()
  27. 27. Главная Второстепенная mssetItem 0 onstorage setTimeout()setItem 300 onstorage 453 setTimeout()
  28. 28. Главная Второстепенная mssetItem 0 onstorage setTimeout()setItem 300 onstorage 453 setTimeout() 600
  29. 29. Главная Второстепенная mssetItem 0 onstorage setTimeout()setItem 300 onstorage 453 setTimeout() 600 900
  30. 30. Главная Второстепенная mssetItem 0 onstorage setTimeout()setItem 300 onstorage 453 setTimeout() 600 900 1200
  31. 31. Главная Второстепенная mssetItem 0 onstorage setTimeout()setItem 300 onstorage 453 setTimeout() 600 1 sec 900 1200 1300
  32. 32. Главная Второстепенная mssetItem 0 onstorage setTimeout()setItem 300 onstorage 453 setTimeout() 600 1 sec 900 1200 1300 проверка, setItem()
  33. 33. Главная можетперестать быть главной––Главная может быть занята, а не закрыта––Главная должна смириться с тем, что она больше не главная
  34. 34. Как оставить односоединение––системно разделять данные––знать, есть ли уже соединение или нет––уметь передавать данные между вкладками
  35. 35. Обмен данными междувкладками––Все должны получить данные, полученные от сервера––“Главная” должна знать, что нужно другим
  36. 36. Обмен данными междувкладками––Все должны получить данные, полученные от сервера––“Главная” должна знать, что нужно другим
  37. 37. localStorage .setItem(‘xd-message’, {data: “...”})
  38. 38. window.onstorage = function(e){ if (e.key == ‘xd-message’){ ... }};
  39. 39. Обмен данными междувкладками––Все должны получить данные, полученные от сервера––“Главная” должна знать, что нужно другим
  40. 40. localStorage .setItem(‘xd-message’, {data: “...”})
  41. 41. window.onstorage = function(e){ if (e.key == ‘xd-message’){ ... }};
  42. 42. Обмен данными междувкладками––Все должны получить данные, полученные от сервера––“Главная” должна знать, что нужно другим
  43. 43. Главная не знает что ненужно другим––Вкладки запрашивают каналы––Вкладки закрываются - список каналов накапливается––Отказываемся от получения ненужного––При закрытии “главной” восстанавливаем поток необходимых каналов (xd-message)
  44. 44. Как оставить односоединение––системно разделять данные––знать - есть ли уже соединение или нет––уметь передавать данные между вкладками
  45. 45. localStorageбез события onstorage––нужно получать изменения––как можно скорее––все (ничего не потерять)––производительно––и не хранить лишнего
  46. 46. saveToLS(‘xd-message’, {message: ‘alerta’})xd-message-wrap: “22=1min“id-wrap-22: {message: ‘alerta’}
  47. 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. 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. 49. Одно постоянноесоединение––Мгновенные уведомления — это хорошо––Одно соединение — тоже хорошо––Реализация для сирых (IE) — субдомены––comet/localStorage/onstorage — сегодня––comet/shared WebWorker — завтра
  50. 50. Вопросы Глеб Арестов, glebarestov@mamba.ru

×