aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/api/sharedworker
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
commit074785cea106179cb3305637055ab0a009ca74f2 (patch)
treee6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/api/sharedworker
parentda78a9e329e272dedb2400b79a3bdeebff387d47 (diff)
downloadtranslated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz
translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2
translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip
initial commit
Diffstat (limited to 'files/ru/web/api/sharedworker')
-rw-r--r--files/ru/web/api/sharedworker/index.html220
1 files changed, 220 insertions, 0 deletions
diff --git a/files/ru/web/api/sharedworker/index.html b/files/ru/web/api/sharedworker/index.html
new file mode 100644
index 0000000000..e19a8c7181
--- /dev/null
+++ b/files/ru/web/api/sharedworker/index.html
@@ -0,0 +1,220 @@
+---
+title: SharedWorker
+slug: Web/API/SharedWorker
+translation_of: Web/API/SharedWorker
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Интерфейс </span></font><strong>SharedWorker </strong>(разделяемый воркер)</code> является особым видом воркеров к которому можно получить доступ из нескольких контекстов браузера, например, из нескольких окон, iframe, или других воркеров. Этот интерфейс реализован иначе, чем dedicated воркеры и имеют иной глобальный контекст, {{domxref("SharedWorkerGlobalScope")}}.</p>
+
+<div class="note">
+<p><strong>Замечание:</strong> Если SharedWorker может быть доступен из нескольких контекстов браузера, все они должны разделять одинаковое расположение (идентичные протокол, хост и порт).</p>
+</div>
+
+<div class="note">
+<p><strong>Замечание</strong>: В Firefox, разделяемые воркеры не могут взаимодействовать между private (например, просматриваемыми в приватном режиме) и non-private документами (см. {{bug(1177621)}}.)</p>
+</div>
+
+<h2 id="Свойства">Свойства</h2>
+
+<p><em>Наследует свойства родителя, {{domxref("EventTarget")}}, и реализует свойства {{domxref("AbstractWorker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>{{domxref("EventListener")}} который вызывается всегда, когда {{domxref("ErrorEvent")}} типа <code>error</code> всплывает через воркер.</dd>
+ <dt>{{domxref("SharedWorker.port")}} {{readonlyInline}}</dt>
+ <dd>Возвращает объект {{domxref("MessagePort")}}, используемый для коммуникации и контроля разделяемого воркера.</dd>
+</dl>
+
+<h2 id="Constructors">Constructors</h2>
+
+<dl>
+ <dt>{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}</dt>
+ <dd>Создает разделяемый веб воркер, который выполняет скрипт по указанному URL.</dd>
+</dl>
+
+<h2 id="Методы">Методы</h2>
+
+<p><em>Наследует методы родительского класса, {{domxref("EventTarget")}}, и реализует свойства {{domxref("AbstractWorker")}}.</em></p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В нашем <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Базовом примере разделяемого воркера</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">запустить</a>), имеются две HTML страницы, каждая из которых использует JavaScript для простых вычислений. Разные скрипты используют один и тот же воркер, чтобы выполнить умножение двух чисел - они оба имеют доступ к нему, даже если их страницы запущены в разных окнах.</p>
+
+<p>Следующий пример кода демонстрирует создание объекта <code>SharedWorker</code> с использованием конструктора {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Оба скрипта содержат:</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker("worker.js");
+</pre>
+
+<p>далее скрипты получают доступ к воркеру через объект {{domxref("MessagePort")}}, находящийся в свойстве {{domxref("SharedWorker.port")}}. Если устанавливается хэндлер события onmessage, port самостоятельно начинает работу, вызывая собственный метод <code>start(), </code>если же принимать события с помощью слушателя события  "message" через addEventListener, необходимо вызвать метод <code>start()</code> самостоятельно:</p>
+
+<pre class="brush: js">myWorker.port.start();</pre>
+
+<p>После того, как порт запущен, оба скрипта отправляют сообщения воркеру и принимают их от него, используя <code>port.postMessage()</code> и <code>port.onmessage</code>, соответственно:</p>
+
+<pre class="brush: js">first.onchange = function() {
+ myWorker.port.postMessage([first.value,second.value]);
+ console.log('Message posted to worker');
+ }
+
+ second.onchange = function() {
+ myWorker.port.postMessage([first.value,second.value]);
+ console.log('Message posted to worker');
+ }
+
+ myWorker.port.onmessage = function(e) {
+ result1.textContent = e.data;
+ console.log('Message received from worker');
+ }</pre>
+
+<p>Внутри воркера используется хэндлер {{domxref("SharedWorkerGlobalScope.onconnect")}} для соединения к тому же порту, как обсуждалось ранее. Порты, связанные с данным воркером доступны в свойстве ports события {{event("connect")}}. Далее вызывается метод {{domxref("MessagePort")}} <code>start()</code> для запуска порта, и устанавливается хэндлер <code>onmessage</code> для обработки сообщений, присылаемых от обоих потоков.</p>
+
+<pre class="brush: js">onconnect = function(e) {
+ var port = e.ports[0];
+ // or port = e.source
+
+ port.addEventListener('message', function(e) {
+ var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+ port.postMessage(workerResult);
+ });
+
+ port.start(); // обязательно при использовании addEventListener. Иначе вызывается неявно после установки хэндлера onmessage.
+}</pre>
+
+<h3 id="Пример_с_несколькими_страницами">Пример с несколькими страницами</h3>
+
+<h4 id="sect1"> </h4>
+
+<pre><strong>test.js
+</strong>
+let connected = false;
+self.addEventListener("connect", e =&gt; {
+ e.source.addEventListener("message", ev =&gt; {
+ if (ev.data === "start") {
+ if (connected === false) {
+ e.source.postMessage('worker init');
+ connected = true;
+ } else {
+ e.source.postMessage('worker already inited');
+ }
+ }
+ }, false);
+ e.source.start();
+}, false);
+
+
+<strong>На странице 1 получаем сообщение '</strong>worker init<strong>' в консоли.
+
+index1.html
+...</strong>
+&lt;script&gt;
+ let worker = new SharedWorker('test.js');
+ worker.port.addEventListener("message", e =&gt; {
+ console.log(e.data);
+ }, false);
+ worker.port.start();
+ worker.port.postMessage("start");
+&lt;/script&gt;
+<strong>...
+
+На странице 2 в консоль выводится 'worker already inited', так как страница 1 уже запустила наш воркер;
+
+</strong>index2.html
+...
+&lt;script&gt;
+ let worker = new SharedWorker('test.js');
+ worker.port.addEventListener("message", e =&gt; {
+ console.log(e.data);
+ }, false);
+ worker.port.start();
+ worker.port.postMessage("start");
+&lt;/script&gt;
+...</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="sect2"> </h2>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>No change from {{SpecName("Web Workers")}}.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>Поддержка</td>
+ <td>{{CompatChrome(4)}}</td>
+ <td>{{CompatGeckoDesktop(29.0)}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatOpera(10.60)}}</td>
+ <td>5<br>
+ {{CompatNo}} 6.1</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Chrome for Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>Firefox OS (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Поддержка</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoMobile("33.0")}}</td>
+ <td>2.1</td>
+ <td>{{CompatNo}}</td>
+ <td>11.5</td>
+ <td>5.1<br>
+ {{CompatNo}} 7.1</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Worker")}}</li>
+ <li><a class="internal" href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Использование веб воркеров</a></li>
+</ul>