things-you-can-do-in-a-web-worker

tldr; A list of available functionality and use cases for web workers. Have something to add? Submit a PR.

(List just started, Will grow soon) Web Workers give web developers the apility to run code in multiple threads. This is great, now, what can we do with these threads? This document is meant to help provide context and real world use cases for these little wonders.

Sweet Links

APIS

FileReader

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

The file reader api allows you to read uploaded files. You can now upload a file (say csv). send that to a web worker, read the file and parse it to json.

Web Notifications

https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API

Web Notifications allow you to send pop up style notifications to users even when they do not have your site open.

XMLHttpRequest

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Lets you make a network request.

Fetch

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

The Fetch API is a modern replacement for XMLHttpRequest and is closer to a lot of the libraries we are used to.

Web Sockets

https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

"WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply."

USE CASES

Filtering

Filter large data sets without blocking the UI thread and without making a full round trip to the server.

// filter-worker.js
self.onmessage = function () {
  self.postMessage(e.data.filter(function () {
    return e.flagged;
  }));
}

// app.js
var filterWorker = new Worker('filter-worker.js');

filterWorker.onmessage = function (e) {
  // Log filtered list
  console.log(e.data);
}

var hugeData = [ ... ];

filterWorker.postMessage(hugeData);

Polling

Yes yes yes polling is gross, but sometimes it can be necessary, offload the grossness to a new thread. NOTE: web workers will hold their state but NOT permenantly, so don't keep anything in them that you can't get some other way.

// polling-worker.js
self.onmessage = function (e) {
  var cache;
  
  function compare(newData, oldData) { ... };
  
  var myRequest = new Request('/my-api-endpoint');
  
  setInterval(function () {
    fetch(myRequest).then(function (res) {
      var data = res.json();
      
      if(!compare(data, cache)) {
        cache = data;
        
        self.postMessage(data);
      }
    })
  }, 1000)
});

// app.js
var pollingWorker = new Worker('polling-worker.js');

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

pollingWorker.postMessage('init');


things-you-can-do-in-a-web-worker

tldr网络工作者的可用功能和用例列表。有什么要添加的吗?提交PR。

(刚刚开始列出,即将成长) Web Workers为Web开发人员提供了在多线程中运行代码的能力。这很棒,现在我们可以用这些线程做什么?本文件旨在为这些奇点提供上下文和实际使用案例。

Sweet Links

APIS

FileReader

https://developer.mozilla.org/en-US/docs/Web/API / FileReader

文件读取器api允许您读取上传的文件。 您现在可以上传一个文件(比如csv)。发送给web worker,读取文件并将其解析为json。

网页通知

https://developer.mozilla.org/en-US/docs/Web / API / Notifications_API / Using_the_Notifications_API

网页通知允许您向用户发送弹出式样通知,即使他们没有打开您的网站。

XMLHttpRequest

https://developer.mozilla.org/en-US/docs/Web/API / XMLHttpRequest

允许您进行网络请求。

获取

https://developer.mozilla.org/en-US/docs/Web/API / Fetch_API

Fetch API是XMLHttpRequest的现代替代品,更接近我们习惯使用的很多库。

Web Sockets

https://developer.mozilla.org/en-US/docs/Web/API / WebSockets_API

WebSockets是一种先进的技术,可以在用户的​​浏览器和服务器之间打开交互式通信会话。通过这个API,您可以将消息发送到服务器并接收事件驱动的响应,而无需轮询服务器答复。

使用情况

过滤

过滤大型数据集而不阻止UI线程,并且不进行完整的往返服务器

// filter-worker.js
self.onmessage = function () {
  self.postMessage(e.data.filter(function () {
    return e.flagged;
  }));
}

// app.js var filterWorker = new Worker('filter-worker.js');

filterWorker.onmessage = function (e) { // Log filtered list console.log(e.data); }

var hugeData = [ ];

filterWorker.postMessage(hugeData);

轮询

是是是投票是粗体,但有时可能是必要的,将粗糙度卸载到新线程。 注意:网络工作者将持有自己的状态,但不会永久保留,所以不要保留任何内容,无法获得其他方式。

// polling-worker.js
self.onmessage = function (e) {
  var cache;

function compare(newData, oldData) { };

var myRequest = new Request('/my-api-endpoint');

setInterval(function () { fetch(myRequest).then(function (res) { var data = res.json();

  <span class="pl-k">if</span>(<span class="pl-k">!</span><span class="pl-en">compare</span>(data, cache)) {
    cache <span class="pl-k">=</span> data;

    <span class="pl-smi">self</span>.<span class="pl-c1">postMessage</span>(data);
  }
})

}, 1000) });

// app.js var pollingWorker = new Worker('polling-worker.js');

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

pollingWorker.postMessage('init');




相关问题推荐