Cross tab communication на javascript

Разрабатывая функционал плеера на Pixound, мне нужно было реализовать следующий сценарий: когда пользователь начинает проигрывать трек на одной вкладке, то проигрывающийся трек на другой вкладке должен ставиться на паузу. Как решаются подобные задачи я расскажу в этой заметке.

Суть межвкладочного взаимодействия (cross tab communication) заключается в передаче различных сообщений между вкладками одного браузера. До появления HTML5 красиво реализовать подобный функционал было невозможно. В голову приходить только вариант с "куками", когда данные сохраняются в нее, а где-то есть слушатель, который постоянно проверяет эти данные.

Спасибо HTML5, а точнее Local Storage, за то, что теперь мы можем легко и просто научить вкладки общаться. Кстати, многие программисты до сих пор думают, что реализовать это практически невозможно. В любом случае, большинство из них не знает о "волшебных" возможностях Local Storage, а используют его именно как хранилище ключ-значение.

Дело в том, что у Local Storage есть одно замечательное событие, которое называется Storage. Срабатывает оно в тот момент, когда в хранилище кладутся данные. Так как хранилище работает в рамках сайта, то отловить событие можно из любой вкладки, в рамках одного сайта, конечно же. Да, вот так просто и красиво :)

Готовое решение

В целом вся задача сводится к тому, чтобы правильно написать код, который будет уведомлять о событии и генерировать их. Я нашел простую и маленькую javascript-библиотеку intercom.js в которой все это уже было реализовано. Простой пример использования этой библиотеки:

var intercom = Intercom.getInstance();
intercom.on('notice', function(data) {
   alert(data.message);
});

intercom.emit('notice', {message: 'Hello World!'});
}

Здесь мы просто подписываемся на событие, а потом fire-им его. Если запустить этот код в нескольких вкладках браузера, обработчик сработает на каждой вкладке.

Еще один вариант применения

Взаимодействие между вкладками браузера может помочь для снижения нагрузки на сервер при использовании Long polling. То есть чтобы не держать соединение с сервером на каждую вкладку, можно выбрать одну, которая будет взаимодействовать с сервером, а всю информацию передавать соседним вкладкам. Когда вкладка, которая держала соединение, закрывается, оставшиеся вкладки определяют кто будет держать новое соединение. Таким образом, если взять 20 активных пользователей, у которых будет открыто по 5 вкладок, нужно будет держать 20 подключений, вместо 100. С ростом числа пользователей такая оптимизация на порядок снизит нагрузку на сервера.