웹 소켓, 웹 작업자 및 서비스 작업자의 차이점

Web Sockets, Web Workers, Service Workers... 이것들은 당신이 읽거나 들은 용어들입니다. 모두는 아니지만 적어도 하나는 가능할 것입니다. 그리고 프론트엔드 개발에 대해 잘 알고 있더라도 그 의미를 찾아볼 필요가 있습니다. 아니면 당신이 나와 같을 수도 있고 때때로 그것들을 섞을 수도 있습니다. 용어는 모두 모양과 소리가 매우 유사하여 혼동하기 쉽습니다.

따라서 이들을 함께 분해하고 웹 소켓, 웹 작업자 및 서비스 작업자를 구분해 보겠습니다. 우리가 심층 분석을 수행하고 각각에 대한 실습 경험을 얻는 핵심적인 의미가 아니라 다음 번에 북마크할 작은 도우미와 같습니다. I 재충전이 필요합니다.

빠른 참조

빠른 비교와 대조를 위해 높은 수준의 개요부터 시작하겠습니다.

웹 소켓

웹 소켓은 양방향 통신 프로토콜입니다. 이것을 당신과 당신의 친구 사이에 누군가가 끊기로 결정하지 않는 한 끝나지 않을 지속적인 통화라고 생각하십시오. 유일한 차이점은 당신은 브라우저이고 당신의 친구는 서버라는 것입니다. 클라이언트는 서버에 요청을 보내고 서버는 클라이언트의 요청을 처리하여 응답하며 그 반대의 경우도 마찬가지입니다.

통신은 이벤트를 기반으로 합니다. ㅏ WebSocket 개체가 설정되어 서버에 연결되고 서버 간의 메시지는 이를 보내고 받는 이벤트를 트리거합니다.

즉, 초기 연결이 이루어지면 연결이 시작되고 클라이언트 또는 서버가 CloseEvent. 따라서 웹 소켓은 클라이언트와 서버 간의 지속적이고 직접적인 통신이 필요한 응용 프로그램에 이상적입니다. 내가 본 대부분의 정의는 일반적인 사용 사례로 채팅 앱을 호출합니다. 메시지를 입력하고 서버로 보내고 이벤트를 트리거하면 서버는 서버에 반복해서 ping을 하지 않고도 데이터로 응답합니다.

이 시나리오를 고려하십시오: 나가는 길에 Google 지도를 켜기로 결정했습니다. Google 지도의 작동 방식을 이미 알고 계실 수도 있지만 그렇지 않은 경우 앱에 연결하면 자동으로 위치를 찾아 어디를 가든지 추적합니다. 이 연결이 살아있는 한 실시간 데이터 전송을 사용하여 위치를 추적합니다. 이는 해당 데이터를 최신 상태로 유지하기 위해 브라우저와 서버 간에 지속적인 양방향 대화를 설정하는 웹 소켓입니다. 실시간 점수가 있는 스포츠 앱도 이러한 방식으로 웹 소켓을 사용할 수 있습니다.

웹 소켓과 웹 작업자(그리고 앞으로 보게 될 서비스 작업자)의 가장 큰 차이점은 DOM에 직접 액세스할 수 있다는 것입니다. 웹 작업자(및 서비스 작업자)는 별도의 스레드에서 실행되는 반면 웹 소켓은 DOM을 조작할 수 있는 기능을 제공하는 기본 스레드의 일부입니다.

다음을 포함하여 웹 소켓 연결을 설정하고 유지하는 데 도움이 되는 도구 및 서비스가 있습니다. 소켓 클러스터, 비동기 API, 카우보이, 웹소켓 킹, 채널및 고릴라 웹소켓. MDN에는 다른 서비스를 포함하는 실행 목록.

더 많은 웹 소켓 정보

웹 워커

복잡한 계산을 수행하는 동시에 DOM을 변경해야 하는 시나리오를 생각해 보십시오. JavaScript는 단일 스레드 응용 프로그램이며 둘 이상의 스크립트를 실행하면 변경하려는 사용자 인터페이스와 수행 중인 복잡한 계산이 중단될 수 있습니다.

여기에서 웹 작업자가 역할을 합니다.

웹 작업자는 스크립트가 별도의 스레드에서 백그라운드로 실행되도록 하여 스크립트가 기본 스레드에서 서로를 차단하지 않도록 합니다. 이러한 작업은 렌더링에서 사용자 인터페이스에 영향을 주지 않고 별도의 스레드에서 백그라운드에서 수행할 수 있으므로 집약적인 작업이 필요한 응용 프로그램의 성능을 향상시키는 데 유용합니다. 그러나 웹 소켓과 달리 웹 작업자는 자체 스레드에서 기본 스레드 외부에서 실행되기 때문에 DOM에 액세스하는 데 그다지 능숙하지 않습니다.

Web Worker는 다음을 사용하여 스크립트 파일을 실행하는 개체입니다. Worker 작업을 수행하는 데 반대합니다. 근로자에 대해 이야기할 때 근로자는 다음 세 가지 유형 중 하나로 분류되는 경향이 있습니다.

• 헌신적인 노동자: 전용 작업자는 이를 호출하는 스크립트에서만 도달할 수 있습니다. 여전히 멀티 스레딩 스크립트와 같은 일반적인 웹 작업자의 작업을 실행합니다.
• 공유 작업자: 공유 작업자는 전용 작업자의 반대입니다. 여러 스크립트에서 액세스할 수 있으며 작업자와 동일한 도메인에 존재하는 한 웹 작업자가 실행하는 모든 작업을 실질적으로 수행할 수 있습니다.
• 서비스 근로자: 서비스 작업자는 앱, 브라우저 및 서버 사이에서 네트워크 프록시 역할을 하여 네트워크가 오프라인 상태가 되는 경우에도 스크립트를 실행할 수 있습니다. 다음 섹션에서 이에 대해 알아보겠습니다.

더 많은 웹 작업자 정보

봉사 노동자

개발자로서 제어할 수 없는 것이 몇 가지 있으며 그 중 하나는 사용자의 네트워크 연결입니다. 사용자가 연결하는 네트워크가 무엇이든 상관없습니다. 사용되는 모든 연결에서 최상의 성능을 발휘하도록 앱을 최적화하기 위해 최선을 다할 수 있습니다.

서비스 워커는 앱의 성능을 점진적으로 향상시키기 위해 우리가 할 수 있는 일 중 하나입니다. 서비스 작업자는 웹 작업자 덕분에 앱, 브라우저 및 서버 사이에 위치하며 별도의 스레드에서 백그라운드로 실행되는 보안 연결을 제공합니다. 지난 섹션에서 배운 것처럼 서비스 워커는 웹 워커의 세 가지 유형 중 하나입니다.

그렇다면 왜 앱과 사용자 브라우저 사이에 서비스 워커가 있어야 할까요? 다시 말하지만 우리는 사용자의 네트워크 연결을 제어할 수 없습니다. 알 수 없는 이유로 연결이 끊어졌다고 가정합니다. 그러면 브라우저와 서버 간의 통신이 끊어져 데이터가 앞뒤로 전달되지 않습니다. 서비스 작업자는 네트워크 연결이 끊어진 후에도 요청을 가로채고 작업을 실행할 수 있는 비동기 프록시 역할을 하면서 연결을 유지합니다.

이것이 흔히 언급되는 것의 주요 동인입니다. "오프라인 우선" 개발. 네트워크 대신 로컬 캐시에 자산을 저장하고, 사용자가 오프라인 상태가 되면 중요한 정보를 제공하고, 사용자가 필요할 때 준비할 수 있도록 항목을 미리 가져오고, 네트워크 오류에 대한 응답으로 폴백을 제공할 수 있습니다. 완전히 비동기식이지만 웹 소켓과 달리 자체 스레드에서 실행되기 때문에 DOM에 액세스할 수 없습니다.

서비스 워커에 대해 알아야 할 또 다른 중요한 점은 서비스 워커가 앱의 모든 요청과 응답을 가로챈다는 것입니다. 따라서 일부 보안 관련 사항이 있으며 특히 동일 출처 정책을 따릅니다. 따라서 CDN 또는 타사 서비스에서 서비스 작업자를 실행하지 않는다는 의미입니다. 또한 보안 HTTPS 연결이 필요합니다. 즉, 실행하려면 SSL 인증서가 필요합니다.

더 많은 서비스 작업자 정보

최대 포장

이것은 웹 소켓, 웹 작업자 및 서비스 작업자 간의 차이점(및 유사점)에 대한 매우 높은 수준의 설명입니다. 다시 말하지만, 용어와 개념은 서로 섞일 수 있을 정도로 유사하지만 이를 구분하는 방법에 대한 더 나은 아이디어를 얻을 수 있기를 바랍니다.

우리는 빠른 참조 테이블로 작업을 시작했습니다. 여기에 같은 것이 있지만 더 두꺼운 비교를 위해 약간 확장되었습니다.