Как вывести прогресс работы WebWorker-а?

Question

[Алексей Ярков]

Есть worker с тяжелой синхронной функцией:

const keypair = require('keypair');

onmessage = (e) => {
	let workerResult = keypair(e.data);
	postMessage(workerResult);
}

Использую так:

if (window.Worker) {
	let container = document.querySelector('#container');
	let myWorker = new Worker("worker.js");
	myWorker.onmessage = (e) => {
		container.innerHTML = e.data;
		console.log('Message received from worker');
	};
	myWorker.postMessage({"bits": 2048});
}
else {
	console.log('window.Worker Error');
}

Можно как-то отправлять из воркера или на странице считать кол-во прошедших секунд, за которые отработал воркер?

Comments

[OVK2015]

Так так же,- через worker.onmessage принимаем в основном, через postMessage отправляем из Worker`a

[Алексей Ярков]

OVK2015: я понимаю что так же. Но как именно? Например через while следить за workerResult и слать содержимое счетчика секунд. Но у меня не вышло.

[OVK2015]

Алексей Ярков: Могу свой прислать

[Алексей Ярков]

OVK2015: Буду признателен.

Вот что наговнокодил (не работает как надо):

const keypair = require('keypair');

let interval;
let workerResult;
let i = 0;

function check() {
	if (typeof workerResult !== 'object') {
		postMessage({time: i});
		i++;
	}
	else {
		clearInterval(interval);
		postMessage(workerResult);
	}
}

onmessage = (e) => {
	interval = setInterval(() => {
		check();
	}, 1000);
	workerResult = keypair(e.data);
}

[OVK2015]

Алексей Ярков:
Давно дело было. Для самого прогресс бара взял jquery-asProgress.min.js
Файлы, к сожалению, сюда не отправишь,- пообрезал.
Сейчас на это свое чудо посмотрел,- понял что postMessage из Worker`a нужно было отправлять по success`у внутри getFileChunk. Хотя, думаю, саму идею разберете

Это основной скрипт:

$(document).ready(function($)
{
	$('.progress').asProgress
	({
		"namespace": "progress" 
	});
	$("#DownloadIt").bind("click", DownloadIt);
});

function workerEventListener(event)
{
	$('.progress').asProgress("go", event.data.download + "%");
	$("#reportPlace").text(event.data.download + "%");	
}

function DownloadIt()	
{
	var workerArgs = 
	{
		"fileName": sourceFileURL,
		"destinationFileName": destinationFileName
	}
	
	worker = new Worker("js/downloadThread.js");
	worker.onmessage = workerEventListener;
	worker.postMessage(workerArgs);
}

Это Worker:

var fileName = "";
var fileSize = 0;
var chunkSize = 0;
var lastChunkSize = 0;

var xhr = new XMLHttpRequest(); 
var url = "curlDownload.php?";

var cmdGetFileSize = "getFileSize";
var cmdGetFileChunk = "downloadFileChunk";
var fileName = "";
var destinationFileName = "";

function getRequestFileSize()
{
	requestURL = url + "cmd=" + cmdGetFileSize + "&fileName=" + fileName;
	xhr.open("GET", requestURL, false);
	xhr.onreadystatechange = function (e) 
	{
		if (xhr.readyState === 4) 
		{
			if(xhr.status == 200)
			{
				fileSize = parseInt(xhr.responseText);				
			}
		}
	}
	xhr.send(null);
}

function getFileChunk(currentOffset, bufferSize)
{
	requestURL = url + 
		"cmd=" + cmdGetFileChunk + 
		"&sourceFileName=" + fileName + 
		"&destinationFileName=" + destinationFileName +
		"&offset=" + currentOffset +
		"&size=" + (currentOffset + bufferSize - 1);
	xhr.open("GET", requestURL, false);
	xhr.send(null);
}

function downloadSourceFile()
{
	bufferSize = chunkSize;
	persentage = 0;
	
	currentOffset = 0;
	
	for(var counter = 0; counter < 100; counter++)				
	{
		if(counter == 99)
		{
			bufferSize = lastChunkSize;
		}			
		
		getFileChunk(currentOffset, bufferSize),					
							
		persentage++;			
		currentOffset += bufferSize;
		
		var message = 
		{
			"download":  persentage
		};		
		postMessage(message);						
	}
}

onmessage = function(event) 
{
	fileName = event.data.fileName;	
	destinationFileName = event.data.destinationFileName;	
	getRequestFileSize();
	
	chunkSize = Math.ceil(fileSize / 100);
	lastChunkSize = fileSize - (chunkSize * 99);	
	downloadSourceFile();
}

Answer 1

[Ivanq]

Worker

const keypair = require('keypair');

onmessage = (e) => {
  let time = Date.now();
  let workerResult = keypair(e.data);
  postMessage({
    result: workerResult,
    time: Date.now() - time
  });
}

Client

if (window.Worker) {
  let container = document.querySelector('#container');
  let myWorker = new Worker("worker.js");
  myWorker.onmessage = (e) => {
    container.innerHTML = e.data.result + " in " + e.data.time + "ms";
    console.log('Message received from worker');
  };
  myWorker.postMessage({"bits": 2048});
}
else {
  console.log('window.Worker Error');
}

Comments

[Алексей Ярков]

Ну так я и сам могу )))) А мне надо прогресс работы

[Ivanq]

Алексей Ярков: Если keypair сам это не поддерживает, то никак.

[Алексей Ярков]

Ivanq: не поддерживает (((