인터넷 종사자 입문

안녕하세요, 오늘은 인터넷 종사자를 보러 왔습니다.전체적인 사고방식은 메인 index.js과 작업 worker.js 사이에서 메시지 한 통만 왔다 갔다 하는 아주 작은 모듈을 실현하고 싶다는 것이다.나는 내가 어떻게 아무것도 모르는 것들을 탐색했는지 너희들에게 보여줄 수 있기를 바란다.우리가 아주 작은 용례를 실현한 후에 우리는'진실'의 용례를 더욱 연구할 것이다.
HTML 파일 하나, 자바스크립트 파일 하나, CSS 파일 하나만 같은 방식으로 많은 항목을 시작했습니다.이 프로젝트에 대해 우리는 심지어 CSS 파일을 필요로 하지 않는다.
내 루트 디렉터리에는 몇 개의 폴더가 있는데, 개인 자료는 '프로젝트' 라는 폴더에 놓여 있다.터미널을 열 때, 나는 자주 명령을 실행한다.
간결하게 보기 위해서, 그것들은 여기에서 직렬로 연결되어 있다.

cd projects/tmp && mkdir webworkers && cd webworkers && touch index.html index.js && echo "console.log('hello');" > index.js

그것은 나를 임시 디렉터리로 만들었다. 그곳에서 나는 아직 프로젝트를 구축하지 않은 작은 것들을 많이 저장해서 언제든지 삭제할 수 있다.이 tmp 폴더에 프로젝트가 있을 때 언제든지 주목할 필요가 없습니다.만약 내가 이 항목에 관심을 가지기 시작한다면, 나는 그것을 목록으로 옮길 것이다.
이 명령들은 웹워크스라는 폴더를 만들고 두 개의 파일을 추가합니다. index.html과 index.js.파일 index.js은 console.log('hello');으로 시작합니다. 이렇게 하면 처음 열 때 모든 연결이 가능한지 확인할 수 있습니다.
나는 VSCode을 편집자로 사용한다.VScode는 Emmet 도구 꾸러미를 첨부하고 있습니다. html:5을 입력하고tab을 클릭하면 샘플 html 문서를 출력합니다.
본문 표시를 끝내기 전에 수동으로 입력하십시오:

<script src="index.js"></script>

지금 나는 매우 기본적인 정적 사이트를 하나 가지고 있다.

단순 네트워크 서버
디렉터리에서 정적 웹 서버를 실행하려면python 모듈을 사용합니다.터미널에서python 2가 실행된 경우

python -m SimpleHTTPServer 8000

python 3을 사용하는 경우 다음을 수행합니다.

python -m http.server 8000

만약 네가 매우 게으르고 자주 이렇게 한다면, 너도 너의 메일박스에 별명을 추가할 수 있다.bash profile 또는 shell을 로드할 때 수행되는 모든 파일입니다.

alias pserve="python -m http.server 8000"

웹 서버를 시작한 후 브라우저를 열고 localhost:8000으로 이동하여 컨트롤러를 엽니다.만약 네가 모든 것을 잘했다면, 너는 반드시 '안녕' 이 너를 기다리고 있는 것을 보게 될 것이다.

인터넷 종사자!
네, documentation을 좀 읽겠습니다.단독 파일에서 워크맨을 만들고 싶은 것 같습니다. 이 워크맨은 백엔드 라인에서 실행될 것입니다.쿨, 우리 서류 만들자.

touch worker.js

이것은 onmessage이라는 이벤트 처리 프로그램이 있기 때문에 현재 모든 파일을 이 처리 프로그램으로 설정할 수 있습니다.
노동자js:

onmessage = function(e) {
  console.log(e);
};

나는 내가 여기서 무엇을 하는지 설명해야 한다.우리는 이곳에서 onmessage을 직접 사용할 수 있다. 왜냐하면 일꾼의 상하문에서 self과 this은 모두 전체 일꾼의 범위를 가리키기 때문이다.역할 영역은 주 라인에서 fetch 또는 console 같은 것을 직접 사용하는 것과 매우 유사하다. 비록 이것은 창의 대상에 있지만, 주 라인의 전역 역할 영역은 창이기 때문이다.
만약 당신이 지루하다고 생각한다면 다음과 같은 내용을 쓸 수 있다.

self.addEventListener("message", function(e) {
  self.console.log(e);
});

addEventListener을 사용하는 장점은 사건의 기존 탐지기를 덮어쓰지 않는다는 것이다.내연 onmessage을 사용하면 한 번에 하나의 사건 탐지기만 얻을 수 있고, 새로운 onmessage 처리 프로그램을 설명하면 첫 번째를 덮어씁니다.addEventListener을 사용하면 임의의 탐지기를 추가할 수 있지만, 탐지기를 처리한 후에 버릴까 봐 걱정해야 합니다.이것은 주의해야 할 작은 균형이다.
전체적으로 addEventListener과 일치하는 것이 좋을 것 같다.만약 내가 addEventListener을 사용한다면, 이것은 내가 나중에 탐지기를 삭제할 필요가 없도록 진정으로 나의 함수를 분리해야 한다는 것을 의미한다.내가 이렇게 할 때 큰 소리로 말했다. "너무 일찍 최적화하는 것은 만악의 근원이지만 좋은 습관을 기르는 것은 아니다."

function handleMessage(e) {
  console.log(e);
}
addEventListener("message", handleMessage);

좋아, 그게 우리 일꾼이야.js, 그것을 만들고 메시지를 보냅니다.
색인js:

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

worker.postMessage("Hello");

콘솔에서 무슨 일이 일어났는지 페이지를 저장하고 새로 고칩니다.
>MessageEvent {isTrusted:true, 데이터: "안녕하세요",.....}
괜찮았어!이 MessageEvent 객체에는 여러 속성이 있습니다.data을 자세히 봅시다. 왜냐하면 그 안에'안녕하세요'가 있는 것을 보았기 때문입니다. 이것은 data이 우리가 보낸 것을 의미합니다.
대상을 발표해 봅시다!HTML 사양은 attribute any data을 나타내므로 단순히 문자열이 아닙니다.
색인js:

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

worker.postMessage({ your: "face", is: "cool" });

로그인 중인 내용을 변경합니다.js는 이벤트의 data 속성에 불과합니다.

function handleMessage(e) {
  console.log(e.data);
}
addEventListener("message", handleMessage);

● 당신의 "얼굴"은: "쿨"}
이게 내가 보고 싶은 거야.이제 우리는 데이터를 노동자에게 어떻게 발표하는지 알게 되었다. 그러면 데이터를 받아서 가져오는 것이 어떻겠는가?index.js으로 돌아가서 우리 스태프들에게

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

worker.postMessage({ your: "face", is: "cool" });

function handleMessage(e) {
  console.log(e.data);
}

worker.addEventListener("message", handleMessage);

그리고 우리 일꾼들.js가 메시지를 받을 때 메시지를 보냅니다.

function handleMessage(e) {
  if (e.data.is === "cool") {
    postMessage("yes");
  } else {
    postMessage("how dare you?");
  }
}
addEventListener("message", handleMessage);

저장 및 새로 고침:
> 쌍
걸출했어
모든 데이터를 평가할 수 있도록 index.js을 다시 변경합니다.

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

worker.postMessage({ your: "face", is: "not cool" });

function handleMessage(e) {
  console.log(e.data);
}

worker.addEventListener("message", handleMessage);

저장, 다시 실행:
>어떻게 감히?
여기서, 우리는 데이터를 포함하는 메시지를 색인에서 작업자에게 왔다 갔다 보낼 수 있다.

긁어모으다
주 라인의worker 대상과worker 라인의 전역 역할 영역에서 이벤트 탐지기를 삭제할 수 있습니다.
메인 라인:

worker.removeEventListener("message", handleMessage);

작업 스레드:

self.removeEventListener("message", handleMessage);

이것은 관심을 필요로 하는 중요한 일이다.2014년 MacBook Pro보다 더 저렴한 하드웨어에서 코드가 실행될 수도 있습니다. 새로운 나쁜 키보드를 원하지 않기 때문에 코드를 보존하고 있습니다.
또한 작업 라인을 완성할 때 죽이기를 원할 수도 있습니다.다 한 후에 남겨 두어도 소용없다.이것도 주 라인이나 작업 라인에서 완성할 수 있다.
주 스레드에서는 다음과 같습니다.

worker.terminate();

Worker 스레드에서는 다음과 같이 표시됩니다.

self.close();

브라우저 검사
네, 마지막 한 가지.거의 browsers support Web Workers이지만 Opera Mini는 여전히 존재하고 사람들은 여전히 어떤 이유로든 IE6를 사용한다.간단한 검사를 통해 코드를 실행하려는 브라우저가 웹 워크러스를 지원하는지 확인할 수 있습니다.

if (window.Worker) {
  ...
}

용례
상상력이 관건이다.이것은 브라우저에서 실제 다중 루틴 기능을 얻을 수 있습니다.JavaScript 기능이 아닙니다. JavaScript는 단일 스레드입니다.HTML 특성입니다.
만약 응용 프로그램 상태 관리를 백엔드 작업 프로그램에 넣는다면?백그라운드에서 모든 비싼 상태 계산을 실행하고 주 스레드에서 모든 UI 작업을 수행할 수 있습니다.다행이네요.
모든 데이터를 워크맨에 넣으면?서버의 응답을 기다릴 때, 메인 라인은 어떤 내용도 막을 필요가 없습니다.
만약 데이터 집약형 응용 프로그램을 구축하고 있다면, 사람들이 CSV를 업로드해서 응용 프로그램에 데이터를 해석하고 서버에 보내지 않기를 원한다면 어떻게 될까요?인터넷 종사자가 정말로 너를 도와 파일 처리를 주 라인에서 떼어낼 수 있다.

결론
나는 이것이 우리가 할 수 있는 가장 간단한 노동자라고 생각한다.사실은 우리가 이 일을 끝낸 후에, 그것은 단지 더 많은 자바스크립트를 작성하고 있을 뿐이라는 것을 증명한다.
모든 작업자는 전역 컨텍스트가 있지만 DOM, 창 또는 문서에 액세스할 수 없습니다.access a few things을 일반 창 컨텍스트 또는 작업자 컨텍스트로 볼 수 있습니다.
이곳에는 아직 탐색해야 할 곳이 많다.나는 아주 작은 예를 세웠는데, 단지 하나의 개념 증명일 뿐이다. 위에 '네, 이 물건은 매우 효과적입니다.' 라고 쓰여 있다.다음에 해야 할 일은 서버에 보내지 않고 CSV 파일을 분석하는 등 평범하지 않은 것들을 구축하는 것이다.
나는 exploring things you don't understand이 정말 중요하다고 생각한다.이 예에서 나는 인터넷 종사자의 설치와 사용이 얼마나 쉬운지 이해했다.언제든지 이런 작은 것을 배울 때, 그것은 당신이 앞으로 물건을 구축할 때 정확한 결정을 내리는 능력에 영향을 줄 것이다.
나는 네가 이 박문에서 매우 멋진 것들을 찾을 수 있기를 바란다.만약 네가 생산 중에 인터넷 종사자를 사용한다면, 나는 네가 그들의 목적을 사용하는 것을 매우 듣고 싶다.