Pull to refresh

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

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



Что это?



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

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



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

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

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

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



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

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

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


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

Чё так мало?



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

Ещё про ссылки



Навигацию на сайте в таком случае нужно будет написать на ajax'е (например, как это сделано Вконтакте), потому что если вы, например, откроете вкладку с сайтом, и в ней просто перейдёте на другую страницу этого же сайта по обычной ссылке, то текущий SharedWorker уничтожится, и создастся новый. Это логично: при переходе на новый Url, пусть даже на том же самом сайте, сначала уничтожается страница, с которой вы переходите, а уже потом создаётся страница, на которую вы переходите.

Недостатки Api



В текущем Api SharedWorker'ов есть событие «connect», но нет события «disconnect», и поэтому массив «peers» в библиотеке «shared worker.js» не может самоочищаться от закрытых вкладок — он будет продолжать считать их открытыми. Это не приведёт ни к каким ошибкам, это просто недоработка текущего Api SharedWorker'ов.
Tags:
Hubs:
+5
Comments13

Articles

Change theme settings