igenex
1/31/2018 - 1:22 PM

Simple WebWorker Example

Simple WebWorker Example

manager.js
content_copyfile_download
window.onload = function() {
	/*var worker = new Worker("worker.js");

	worker.postMessage("ping");

	worker.onmessage = function(event) {
		var message = "Worker говорит: " + event.data;
		document.getElementById("output").innerHTML = message;
	}*/

	var numWorkers = 3;
	var workers = [];
	for (var i = 0; i < numWorkers; i++) {

		var worker = new Worker("worker.js");

		worker.onmessage = function(event) {
			alert(event.target + " сказал : " + event.data);
		}

		workers.push(worker);
	}

	for (var i = 0; i < workers.length; i++) {
			workers[i].postMessage("ping");
		}
}
Worker.js
content_copyfile_download
onmessage = pingPong;

function pingPong(event) {
	if(event.data == "ping") {
		postMessage("pong");
	}
}
WebWorker.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>

<div class="container">
    <!-- форма для отправки сообщений -->
    <form name="publish">
        <input class="form-control" name="message">
        <input class="form-control" type="submit" value="Отправить">
    </form>

    <!-- здесь будут появляться входящие сообщения -->
    <div id="subscribe"></div>
</div>
<script>

    const workerS = new Worker('worker.js');

    // отправить сообщение из формы publish
    document.forms.publish.onsubmit = function() {
        let outgoingMessage = this.message.value;

        worker.postMessage(outgoingMessage);
        return false;
    };

    workerS.addEventListener('message', e => {
        let messageElem = document.createElement('div');
        messageElem.appendChild(document.createTextNode(message));
        document.getElementById('subscribe').appendChild(messageElem);
    });

</script>
</body>
</html>