Web Worker使用

2022-05-13 本文已影响0人绝尘kinoko

最近对Web Worker进行了系统学习，主要看了阮大的教程和MDN。
详细信息不做介绍，worker的作用是为js提供多线程能力，但是比较耗费资源，所以应当用完即销毁。

基本使用

主要是主线程和worker线程的通信
主线程

var worker = new Worker('work1.js');
worker.postMessage('Hello World');
worker.postMessage({ method: 'echo', args: ['Work'] });

worker.onmessage = function (event) {
    console.log('Received message ' + event.data);
    doSomething();
};

function doSomething() {
    worker.terminate();
}

work1.js

self.addEventListener(
    'message',
    function (e) {
        let msg = typeof e.data === 'string' ? e.data : e.data.method + '--' + e.data.args;
        self.postMessage('You said: ' + msg);
    },
    false
);

self.close();

主线程通知worker：worker.postMessage
worker接收消息：self.addEventListener('message', cb) 消息体为回调参数的data值
worker通知主线程：self.postMessage
主线程接收消息：worker.onmessage 消息体同上
所有通信机制基本都是一样的，本质上都是EventEmitter。
PS：如果使用vscode的插件打开index.html（主线程）会报错，因为worker有同源限制，需要用http-server或者别的方式启个本地服务，别的方式路径要改一下。

同页面的Worker，使用BlobUrl作为Worker构造入参

同页面可能不太重要，现在都是SPA，使用BlobUrl作为构造体还是有用的

<script id="worker" type="app/worker">
    addEventListener('message', function () {
      postMessage('some message');
    }, false);
</script>
<script>
    var blob = new Blob([document.querySelector('#worker').textContent]);
    var url = window.URL.createObjectURL(blob);
    var worker = new Worker(url);
    worker.onmessage = function (e) {
        console.log(e.data);
    };
    worker.postMessage('conn');
</script>

上面的是worker，下面的是主线程。
worker的type不能被浏览器识别，可以当作只需要函数的字符串格式。
主线程的最后一行在阮大的博文中没有，看了半天没log，才发现是主线程没发通知。

worker轮询

本身只是教程中的一个例子，不过从中学到了一些别的东西
原例子

function createWorker(f) {
  var blob = new Blob(['(' + f.toString() +')()']);
  var url = window.URL.createObjectURL(blob);
  var worker = new Worker(url);
  return worker;
}

var pollingWorker = createWorker(function (e) {
  var cache;

  function compare(new, old) { ... };

  setInterval(function () {
    fetch('/my-api-endpoint').then(function (res) {
      var data = res.json();

      if (!compare(data, cache)) {
        cache = data;
        self.postMessage(data);
      }
    })
  }, 1000)
});

pollingWorker.onmessage = function () {
  // render data
}

pollingWorker.postMessage('init');

一开始没看明白worker和主线程在哪，总想着要用js文件初始化Worker。其实这段代码比较像上面的例子，拿到createWorker的函数体转换为BlobUrl构造Worker。
另一个问题是fetch，这个不太熟，简单补下：
fetch(url, option?).then(res => res.json() || res.text()).then(data => ...)
上例这种不加http前缀的，baseUrl默认是Location.origin
返回结果要用json或text方法转换，再在下个then中使用。

为了fetch接口，首先要启个本地服务。起初启了个express服务，route代码如下

app.get('/rolling', (req, res) => {
    res.send('rolling...')
});

暂时不考虑轮询一段时间后改变返回值，在请求时发生跨域问题。
之前一直是客户端，基本设置个header就可以了，这回也去找fetch的option配置，MDN说是里面有个mode，设置为cors即可跨域，设置完了并没有生效（默认为cors）。然后就进行了一系列的试错。

用http-server启动主线程，端口和express服务端口一致，想着这样就不跨域了。结果证明我想多了，启同端口，后面启的会覆盖前面的，所以fetch并没有通，然后当我停掉主线程服务后，fetch就通了（此时是express服务生效），误打误撞，倒也能验证worker的功能。
将location.origin传进worker中，避免将BlobUrl作为baseUrl。此法行不通，一是这种行为跟fetch(baseUrl+'/rolling')没差，二是不解决跨域问题
最后是反应过来，需要在服务端进行跨域设置，主要代码为

res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'content-type');
res.header('Access-Control-Allow-Methods', 'GET');

本来是写在rolling路由的中间件里，后来觉得这种允许跨域的请求类似白名单，可以单独写个中间件，其中用白名单过滤请求路径允许跨域，再全局应用该中间件，后面如果有跨域需求，在白名单里加即可，泛用性要好一些。

const WHITELIST = ['/rolling'];

let whiteList = function (req, res, next) {
    if (WHITELIST.includes(req._parsedUrl.pathname)) {
        res.header('Access-Control-Allow-Origin', '*');
        res.header('Access-Control-Allow-Headers', 'content-type');
        res.header('Access-Control-Allow-Methods', 'GET');
    }
    next();
};

module.exports = whiteList;

或者用cors插件，未验证。
解决完跨域问题后，需要mock轮询的数据变化，想法是在服务端定义一个计数器，超过阈值后改变返回值。
但在服务端做这个有点小问题，用nodemon热更新是不会重置全局变量的，只有重启才行，所以应该在客户端mock

var pollingWorker = createWorker(function (e) {
    var cache;
    var count = 0;

    function compare(cur, old) {
      return cur == old;
    }

    setInterval(function () {
      count++;
      fetch('http://127.0.0.1:4000/rolling?count=' + count)
        .then(function (res) {
          return res.text();
        })
        .then((data) => {
          if (!compare(data, cache)) {
            cache && self.postMessage(data);
            cache = data;
          }
        });
    }, 1000);
});

pollingWorker.onmessage = function () {
    console.log('diff');
};

app.get('/rolling', (req, res) => {
    let count = req.query.count;
    if (count < 5) {
        res.send('rolling1...');
    } else {
        res.send('rolling2...');
    }
});

result

worker新建worker

主线程

var worker = new Worker('worker.js');
worker.onmessage = function (event) {
    document.getElementById('result').innerHTML = event.data;
};

worker.js

var num_workers = 10;
var items_per_worker = 10;

var result = '';
var pending_workers = num_workers;
for (var i = 0; i < num_workers; i += 1) {
    var worker = new Worker('core.js');
    worker.postMessage(i * items_per_worker);
    worker.postMessage((i + 1) * items_per_worker);
    worker.onmessage = storeResult;
}

function storeResult(event) {
    result += event.data;
    pending_workers -= 1;
    if (pending_workers <= 0) postMessage(result);
}

core.js

var start;
onmessage = getStart;
function getStart(event) {
    start = event.data;
    onmessage = getEnd;
}

var end;
function getEnd(event) {
    end = event.data;
    onmessage = null;
    work();
}

function work() {
    let res = '';
    for (var i = start; i < end; i += 1) {
        // 具体工作
        res += `cur: ${i}<br />`;
    }
    postMessage(res);
    close();
}

整个流程就是主线程新建worker.js的worker，worker.js又根据core.js新建worker，数量在worker.js前两行定义了——10个worker.js，每个worker.js含10个core.js。
core.js接收范围的临界值，在work函数的循环里进行具体操作。在命名时，我将这组记作递归，现在看看更像是回溯。整体比较简单，core中onmessage的替换挺有意思，另一个有意思的点是输出结果：

result

每次刷新得到的结果都不一样，每个worker都是独立的，即便都是同样的操作，也有可能先创建，后完成。

总结

总体来说，worker的使用比较有局限性，必须挂到服务端，不然就只能用同页面的worker函数体，SPA的话可能只能写到index.html里。好处是能处理一些计算密集型或高延迟的任务，目前还没遇到过，有场景可以试试。

Web Worker使用

基本使用

同页面的Worker，使用BlobUrl作为Worker构造入参

worker轮询

worker新建worker

总结

猜你喜欢

热点阅读