Отправка и получение сообщений

Отправка и получение сообщений.

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

Даже для самого простого примера использования рабочих процессов требуются как минимум три файла: главный документ, файл с главным 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 и переменными в главном коде. Рабочие процессы — это «вещи в себе», которые умеют только обрабатывать информацию, полученную в сообщениях, и отправлять результат обратно с использованием того же механизма.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *