Статьи

Как использовать JavaScript веб-работников в HTML5

Недавно мы обсуждали веб-работников JavaScript со ссылкой на «выделенное» разнообразие. Если вы еще не читали это, я предлагаю вам сделать это в первую очередь — эта статья основана на тех же концепциях.

Веб-работники в двух словах

Веб-работник — это отдельный файл JavaScript, который загружается и выполняется в фоновом режиме в отдельном потоке. Выделенные веб-работники связаны с их создателем (сценарий, который загрузил работника). Совместно используемые веб-работники позволяют любому количеству сценариев взаимодействовать с одним работником.

Совместно используемые веб-работники придерживаются тех же правил, что и их выделенные коллеги: нет доступа к DOM, документам или сценариям страниц и ограничено разрешение только на чтение для большинства свойств окна. Кроме того, скрипты страниц могут взаимодействовать только с совместно используемыми веб-работниками из одного источника / домена (somesite.com).

В настоящее время совместные веб-работники поддерживаются в Chrome, Safari и Opera. Поддержка Firefox 4 и IE9 может появиться, но не стоит делать ставку. Совместно используемые работники могут экономить ресурсы, но они добавляют дополнительный уровень сложности. Ожидайте несколько вопросов, например,

  • Обработчики событий DOM2 (addEventListener) представляются наиболее надежной реализацией.
  • Вы почти наверняка столкнетесь с особенностями браузера, и отладка будет затруднена. Следующий код работает в последней версии Chrome, но не думайте, что он будет работать в Safari или Opera.

Создание общего веб-работника

Чтобы создать общего веб-работника, вы передаете имя файла JavaScript новому экземпляру объекта SharedWorker:

var worker = new SharedWorker("jsworker.js"); 

Общение с Shared Web Worker

Любой из ваших скриптов страницы может общаться с общим веб-работником. В отличие от выделенных веб-работников, вы должны общаться через объект ‘port’ и прикреплять обработчик событий сообщения. Кроме того, вы должны вызвать метод start() порта перед использованием первого postMessage() :

pagescript.js:

 var worker = new SharedWorker("jsworker.js"); worker.port.addEventListener("message", function(e) { alert(e.data); }, false); worker.port.start(); // post a message to the shared web worker worker.port.postMessage("Alyssa"); 

Когда сценарий веб-работника получает первое сообщение от сценария, он должен подключить обработчик событий к активному порту. В большинстве случаев обработчик запускает собственный метод postMessage() чтобы вернуть сообщение вызывающему коду. Наконец, метод start() порта также должен быть выполнен для включения обмена сообщениями:

jsworker.js:

 var connections = 0; // count active connections self.addEventListener("connect", function (e) { var port = e.ports[0]; connections++; port.addEventListener("message", function (e) { port.postMessage("Hello " + e.data + " (port #" + connections + ")"); }, false); port.start(); }, false); 

Как и их преданные братья и сестры, работники сети могут:

  • загрузить дальнейшие скрипты с помощью importScripts()
  • прикрепить обработчики ошибок и
  • запустите метод port.close() чтобы предотвратить дальнейшую связь по определенному порту.

Совместно используемые веб-работники, вероятно, не будут жизнеспособной технологией в течение пары лет, но они открывают захватывающие возможности для будущего развития JavaScript. Будем надеяться, что поставщики браузеров могут предоставить несколько приличных инструментов трассировки и отладки!