[Html 5] SharedWorker: примеры использования

В Html 5 уже развели целый зоопарк «фич», и, думаю, уже осталось мало людей, которые знают весь «Html 5» полностью. Думаю, меньше процента из вас слышали про некие «SharedWorker»-ы.

Что это?

Это своего рода сессия, только на клиенте. И вдобавок, не просто сессия как хранилище, а сессия как живой процесс.

Зачем это может понадобиться?

Можно использовать их для общения между вкладками одного сайта.

Также, я полагаю, сейчас вебсайт может считаться современным только если на нём имеется так называемый «push»: проталкивание обновлений с сервера прямо в обозреватель клиенту. Для того, чтобы реализовать такой push, требуется установить на странице WebSocket'овое соединение. При этом каждая вкладка вашего сайта будет создавать своё соединение по WebSocket'у.

Это повышает нагрузку на сервер, а также само соединение требует некоторого времени (у меня в Хроме — около пары секунд на Node.js на localhost'е). Мы можем попробовать снизить нагрузку, сделав так, чтобы все вкладки в обозревателе клиента использовали одно общее WebSocket'овое соединение. И в этом нам не сможет помочь никто кроме этих SharedWorker'ов.

Как это работает?

Я сам на днях кое-как разобрался с тем, как это всё работает (что осложняется тем, что «дебаг» такой штуки не сделаешь простым alert'ом: она может запросто не запуститься, если ей что-то не понравится, и даже не ругнётся). Для упрощения работы с этой штукой я написал библиотеку — shared worker.js ^[1].

Рядом с ней вы можете увидеть простой пример реализации общения между вкладками (папка example) и пример реализации push'а (папка websocket example). В Хроме все примеры запускаются только из-под вебсервера; просто открыть их с жёсткого диска не получится (такая недоработка в Хроме; аякс на локальные файлы в Хроме тоже не пройдёт). Пример с вебсокетами требует выполнения команд npm install ws и node server.js.

Где это работает?

Работает в Хроме и Опере. Не работает в FireFox'е. Подробнее ^[2].

Чё так мало?

Когда я попробовал загуглить эту тему, ничего не нашлось. Никаких нормальных примеров я тоже не нашёл (тот единственный ^[3], который нашёлся ^[4], мягко говоря грязноват, и в нём нет ни слова про «инклуд», без которого реальное приложение не напишешь — только академический пример). Теперь ищущие может быть найдут это в гугле.

Автор: kuchumovn