为什么网络工作者不工作？

Question

So, I'm trying to use a web worker in my project to run a long-running process that is currently tying up the UI. I've been to I don't know how many sites trying to get a worker to work, but to no avail.

All of my javascript is kept in separate files and referenced in the HTML file. As a test to get my feet wet, I created a test.js file and put the following code in it:

self.addEventListener('message', function(e) { 
self.postMessage('return');},false);

Then, in the UI page's javascript file I placed this code in a function triggered by a button click event:

var w = new Worker('test.js');
w.addEventListener('message',function(e){
alert(e.data);},false);
w.postMessage('hi');

The code is derived from:

html5rocks.com/en/tutorials/workers/basics

Other websites I visited provided similar instructions on how to set up a worker.

For the life of me, I cannot get this to work. When I execute it does absolutely nothing and I seemingly get no errors. Stepping through the code, it appears to create the worker, but I don't see any evidence of the event listener being created and the 'postMessage' event doesn't do anything. I've tried IE11 and Chrome with the same results.

In my research, I came across a part of Chrome's developer tools that revealed the test.js file couldn't be found. Yet, the file is in the same folder as the page's js file. So, I tried adding in the relative directory information as I do in the page's HTML section. That didn't work either.

I then found claims that for security reasons you couldn't have one js file reference another js in the code. It's unclear whether this is a Chrome-only feature or part of some spec.

So, now I'm in a quandary. The worker requires a reference to a separate js file for the code to be executed, yet, the browser isn't allowed to reference another file? How is the worker supposed to work if you aren't allowed to do what it requires to work?

To now, I've successfully pissed away two days trying to get this one seemingly simple function to work. To say I'm mildly frustrated would be an understatement. Being a fairly novice programmer and not understanding every last little nuance about web programming I'm clearly missing a key part of this whole thing.

How the heck is one supposed to make web workers work?

Answer 1

Turns out browsers won't allow local files to be fetched via javascript. Because that means a website can read your personal files! So you need to develop and test your project using a web server. The easiest way to do this for me was to install:

docker-compose

and make sure it works. Then create a file named:

docker-compose.yml

inside root folder of my project with index.html file. Then put this inside the docker-compose.yml file:

version: '3'
services:

  nginx:
    image: nginx:alpine
    volumes:
      - .:/usr/share/nginx/html
    ports:
      - "80:80"

Then inside the root folder of my project run:

docker-compose up

And then in the browser go to: http://localhost/ And it worked!

Answer 2

I appear to have found a solution, though it escapes me why.

If I use:

 var w = new Worker('js\test.js');

the worker doesn't work.

But, if I use:

var w = new Worker('js/test.js');

the worker does work.

I characteristically use the back slash throughout the project to delineate paths without issue. Why the forward slash must be used to set the worker's file location is a mystery. I have seen nothing in any documentation that even remotely addresses that tiny, yet seemingly critical detail.

Thank you, Mr. Starke, for your help!