Обмен сообщениями между вкладками с помощью Local Storage Bridge
JavaScript

Обмен сообщениями между вкладками с помощью Local Storage Bridge

В одной из прошлых статей мы рассматривали обмен сообщениями между вкладками браузера с помощью localStorage. При этом использовалась возможность навесить обработчик на событие storage глобального объекта window.

Красимир Цонев (Krasimir Tsonev) создал библиотеку под названием lsbridge или Local Storage Bridge, которая также позволяет отправлять сообщения между вкладками с помощью Local Storage в качестве канала связи, но немного другим способом.

Рассмотрим подробнее эту библиотеку.

API билиотеки предоставляет методы lsbridge.send() и lsbridge.subscribe() для отправки и получения сообщений, а также метод lsbridge.isLSAvailable(), который позволяет проверить, доступен ли localStorage.

Пример использования библиотеки:


lsbridge.send('my-namespace', { message: 'Hello world!' });

lsbridge.subscribe('my-namespace', function(data) {  
  console.log(data); // { message: 'Hello world!' }
});

console.log(lsbridge.isLSAvailable); // "true" or "false"

Внутри библиотека работает следующим образом. Метод subscribe(namespace, callback) добавляет функцию callback во внутренний объект listeners по ключу namespace.

Метод send(namespace, data) записывает в localStorage по ключу namespace либо сериализованный объект data (если передан объект), либо результат выволнения функции data(), если передана функция.

Внутри же с помощью setTimeout с интервалом 100ms для всех ключей namespace в объекте listeners проверяется, не появилось ли в localStorage новое необработанное ранее сообщение. Если появилось — выполняются все коллбэки с ключом namespace.

Еще с интервалом 1000ms обработанные сообщения удаляются из localStorage.

Использование бесконечных циклов с помощью setTimeout кажется сомнительным решением, при том, что глобальный объект window может отслежить событие storage и вызывать обработку именно по событию.

Подробнее об идее Красимира можно прочесть в его блоге .

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться