Для того чтобы посмотреть, как рабочие процессы и главный код обмениваются друг с другом сообщениями, создадим простой шаблон. Мы будем отправлять рабочему процессу сообщение, содержащее имя из поля ввода, и выводить на экран ответ.
Даже для самого простого примера использования рабочих процессов требуются как минимум три файла: главный документ, файл с главным JavaScript-кодом и файл с кодом рабочего процесса. В листинге 14.1 представлен наш HTML-документ.
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Рабочие процессы</title>
<link rel="stylesheet" href="webworkers. css">
<script src="webworkers. js"></script>
</head>
<body>
<section id="formbox"> form name="form">
<p>Имя:<br><input type="text" name="name" id="name"></p> <p><input type="button" name="button" id="button" value="Отправить"></p>
</form>
</section>
<section id="databox"></section>
</body>
</html>
К этому шаблону мы добавим CSS-файл под названием webworkers. css со следующими правилами (листинг 14.2).
Листинг 14.2. Стилизация полей
#formbox{ float: left; padding: 20px; border: 1px solid #999999;
}
#databox{ float: left; width: 500px; margin-left: 20px; padding: 20px; border: 1px solid #999999;
}
Код JavaScript для главного документа должен уметь отправлять рабочему процессу информацию, которую тот будет обрабатывать. Кроме того, требуется прослушивание ответа.
Function initiate(){
Databox=document. getElementById(‘databox’); var button=document. getElementById(‘button’); button. addEventListener(‘click’, send, false);
Worker=new Worker(‘worker. js’);
Worker. addEventListener(‘message’, received, false);
}
Function send(){
Var name=document. getElementById(‘name’).value; worker. postMessage(name);
}
Function received(e){
Databox. innerHTML=e. data;
}
Window. addEventListener(‘load’, initiate, false);
В листинге 14.3 содержится код нашего документа (который должен быть сохранен в файле webworkers. js). В функции initiate() мы сначала создаем необходимые ссылки для поля databox и кнопки отправки сообщения, а затем объект Worker. Конструктор Worker() принимает файл с кодом рабочего процесса worker. js и возвращает объект Worker, содержащий ссылку на этот файл. Любое взаимодействие с данным объектом, по сути, означает взаимодействие с кодом в файле, на который он указывает.
После того как мы получим нужный объект, необходимо добавить про-слушиватель события message, для того чтобы отлавливать поступающие от рабочего процесса сообщения. При получении очередного сообщения происходит вызов функции received() и на экране отображается значение свойства data (само сообщение).
Вторая часть коммуникационного процесса описана в функции send(). Когда пользователь щелкает на кнопке Отправить, функция извлекает значение поля ввода name и, используя postMessage(), отправляет содержащее его сообщение рабочему процессу.
Создав функции received() и send() для обработки коммуникационного процесса, мы теперь готовы отправлять сообщения рабочему процессу и обрабатывать его ответы. Давайте подготовим сам рабочий процесс.
Листинг 14.4. Код рабочего процесса (worker. js) addEventListener(‘message’, received, false);
Function received(e){
Var answer=’Ваше имя — ‘+e. data; postMessage(answer); }
Так же, как код из листинга 14.3, код рабочего процесса должен непрерывно слушать эфир, дожидаясь сообщений от главного кода, — для этого используется обработчик события message. В первой строке листинга 14.4 мы добавляем в рабочий процесс прослушиватель данного события. При каждом срабатывании события (получении сообщения) он будет вызывать функцию received(). В этой функции значение свойства data присоединяется к неизменяемой строке и отправляется обратно главному коду в методе postMessage().
Сравните фрагменты кода в листингах 14.3 и 14.4 (главный код и код рабочего процесса). Обратите внимание на то, как происходит процесс коммуникации: в обоих примерах для этого используются одни и те же метод и событие. Создайте файлы с фрагментами кода из листингов 14.1-14.4, загрузите их на свой сервер и откройте HTML-документ в браузере.
Для создания ссылки на рабочий процесс можно использовать self или this (например, self. postMessage()) или просто объявить методы так, как сделано в листинге 14.4.
Разумеется, это чрезвычайно простой рабочий процесс. В действительности он даже ничего не обрабатывает — всего лишь создает строку на основе полученного сообщения и сразу же отправляет обратно ответ. Однако этот пример помогает понять, как между собой общаются разные сценарии и как использовать данный API в целом.
Несмотря на простоту рабочих процессов, прежде чем приступать к их созданию, необходимо задуматься о нескольких важных моментах. Единственный способ прямого обмена данными с рабочими процессами — это пересылка сообщений. Сообщения должны создаваться на базе строк или JSON-объектов, так как рабочие процессы не поддерживают получение
Данных других типов. Кроме того, они не могут обращаться к документу и манипулировать объектами HTML, функциями JavaScript и переменными в главном коде. Рабочие процессы — это «вещи в себе», которые умеют только обрабатывать информацию, полученную в сообщениях, и отправлять результат обратно с использованием того же механизма.
Добавить комментарий