웹 소켓, 웹 작업자 및 서비스 작업자의 차이점-CSS 튜토리얼-php.cn

WebSockets, 웹 직원, 서비스 직원 ...이 용어는 읽거나 듣는 데 발생했을 수 있습니다. 어쩌면 전부는 아니지만 적어도 그들 중 하나입니다. 프론트 엔드 개발에 익숙하더라도 그들이 의미하는 바를 찾아야 할 가능성이 높습니다. 아니면 당신은 나와 같을 수도 있고 때로는 혼란 스러울 수도 있습니다. 이 용어는 매우 비슷하고 건전하게 보이며 쉽게 혼란 스럽습니다.

Websockets, 웹 직원 및 서비스 직원을 구별하기 위해 함께 분해합시다. 세부 사항을 깊이 들어가는 대신, 심층적 인 연구를 수행하고 각자 자신을 위해 각각을 경험하는 대신 다음에 검토해야 할 때 수집 할 수 있습니다. 빠른 참조 우리는 빠른 비교와 비교를위한 고급 개요로 시작합니다.

websockets WebSocket은 양방향 통신 프로토콜입니다. 파티 중 하나가 끊기로 결정하지 않으면 끝나지 않는 친구와 친구 사이의 끊임없는 전화로 생각하십시오. 유일한 차이점은 당신이 브라우저이고 친구는 서버라는 것입니다. 클라이언트는 요청을 서버로 보내고 서버는 클라이언트의 요청을 처리하여 응답하고 그 반대도 마찬가지입니다. 커뮤니케이션은 이벤트를 기반으로합니다. WebSocket 객체를 작성하고 서버에 연결하고 서버 간 메시지를 보내고 수신 할 수 있습니다.

이는 초기 연결이 설정되면 연결이 시작된 클라이언트-서버 통신이 있고 클라이언트 또는 서버가 CloseEvent를 보내서 종료하기로 선택할 때까지 활성화되어 있음을 의미합니다. 이로 인해 Websockets는 클라이언트와 서버간에 지속적이고 직접 통신이 필요한 응용 프로그램에 이상적입니다. 내가 보았던 많은 정의는 채팅 애플리케이션을 일반적인 사용 사례로 목록 - 메시지를 입력하고, 서버로 보내고, 이벤트를 트리거하고, 서버가 서버를 반복적으로 핑하지 않고 데이터로 응답합니다. 다음 시나리오를 고려하십시오. 당신은 나가서 Google지도를 열기로 결정합니다. Google지도의 작동 방식을 이미 알고 있을지 모르지만 그렇지 않은 경우 앱에 연결하면 자동으로 위치를 찾아 어디를 가든 추적합니다. 실시간 데이터 전송을 사용 하여이 연결이 활성화되는 한 위치를 추적합니다. 이것은 데이터를 최신 상태로 유지하기 위해 브라우저와 서버간에 지속적인 양방향 대화를 설정하는 WebSocket입니다. 실시간 점수가있는 스포츠 애플리케이션은 이러한 방식으로 WebSockets를 사용할 수도 있습니다. Websockets와 웹 작업자 (및 나중에 볼 수있는 서비스 직원)의 가장 큰 차이점은 DOM에 직접 액세스 할 수 있다는 것입니다. 웹 작업자 (및 서비스 작업자)는 별도의 스레드에서 실행되는 동안 WebSockets는 기본 스레드의 일부로 DOM을 작동 할 수 있습니다.

SocketCluster, Asyncapi, Cowboy, Websocket King, 채널 및 Gorilla Websocket을 포함하여 WebSocket 연결을 설정하고 유지하는 데 도움이되는 도구와 서비스가 있습니다. MDN에는 다른 서비스가 포함 된 실행 목록이 있습니다. 더 많은 웹 소켓 정보 websockets 소개 - 웹에 소켓을 가져 오기 (web.dev) 전력 사용 및 웹 사이트에 대한 생각 (Chris Coyier) WebSocket API (MDN DOCS) 최신 브라우저 지원 (Caniuse) 웹 작업자 DOM을 변경하면서 많은 복잡한 계산을 수행 해야하는 상황을 고려하십시오. JavaScript는 여러 스크립트를 실행하고 변경하려는 사용자 인터페이스와 수행중인 복잡한 계산을 파괴 할 수있는 단일 스레드 응용 프로그램입니다. 이것은 웹 작업자가 작용하는 곳입니다. 웹 작업자를 사용하면 스크립트가 백그라운드에서 별도의 스레드로 실행하여 스크립트가 기본 스레드에서 서로를 차단하지 못하게 할 수 있습니다. 따라서 이러한 작업은 사용자 인터페이스의 렌더링에 영향을 미치지 않고 백그라운드의 별도 스레드에서 수행 할 수 있기 때문에 많은 작업이 필요한 응용 프로그램의 성능을 향상시키는 데 이상적입니다. 그러나 WebSockets와 달리 웹 워커는 자체 스레드의 메인 스레드 밖으로 실행되기 때문에 DOM에 액세스하는 데 능숙하지 않습니다. 웹 워커는 작업자 객체를 사용하여 작업을 수행하기 위해 스크립트 파일을 실행하는 객체입니다. 우리가 노동자에 대해 이야기 할 때, 그들은 세 가지 유형 중 하나에 속하는 경향이 있습니다 : 특별 작업자 : 특별 작업자는이를 호출하는 스크립트에서만 액세스 할 수 있습니다. 여전히 멀티 스레드 스크립트와 같은 일반적인 웹 워커의 작업을 수행합니다. 공유 근로자 : 공유 근로자는 전담 근로자와 반대입니다. 여러 스크립트에 의해 액세스 할 수 있으며 실제로 작업자와 동일한 도메인에 존재하는 한 웹 작업자가 수행 한 모든 작업을 수행 할 수 있습니다. 서비스 작업자 : 서비스 작업자는 애플리케이션, 브라우저 및 서버 간의 네트워크 프록시 역할을하므로 네트워크가 오프라인 상태 일 때도 스크립트를 실행할 수 있습니다. 다음 섹션에서이를 다룰 것입니다. 더 많은 웹 작업자 정보 "메인 스레드"(Chris Coyier) 2021 년 웹 워커의 상태 (Chris Coyier) 웹 작업자 (Zapier)에 대한 소개 웹 작업자 API (MDN DOCS) 최신 브라우저 지원 (Caniuse)

서비스 근로자 개발자로서 우리가 제어 할 수없는 몇 가지가 있으며 그 중 하나는 사용자의 네트워크 연결입니다. 사용자가 연결하는 네트워크는 자체입니다. 우리는 응용 프로그램이 사용되는 모든 연결에서 최상의 성능을 얻도록 애플리케이션을 최적화하기 위해 최선을 다할 수 있습니다. 서비스 근로자는 응용 프로그램의 성능을 점차적으로 향상시키기 위해 할 수있는 일 중 하나입니다. 서비스 작업자는 애플리케이션, 브라우저 및 서버 사이에 위치하고 있으며, 웹 워커 덕분에 백그라운드에서 실행할 수있는 안전한 별도의 나사 연결을 제공합니다. 이전 섹션에서 배운 것처럼 서비스 작업자는 세 가지 유형의 웹 작업자 중 하나입니다.

그래서 응용 프로그램과 사용자의 브라우저 사이에있는 서비스 작업자가 필요한 이유는 무엇입니까? 마찬가지로 사용자의 네트워크 연결을 제어 할 수 없습니다. 알려지지 않은 이유 때문에 연결이 중단된다고 가정하십시오. 이로 인해 브라우저와 서버 간의 통신이 중단되어 데이터가 전달되는 것을 방지합니다. 서비스 작업자는 연결 상태를 유지하고 네트워크 연결이 손실 된 후에도 요청을 가로 채고 작업을 수행하는 비동기 프록시 역할을합니다. 이것은 일반적으로 "오프라인 우선"개발이라고 불리는 주요 원동력입니다. 우리는 네트워크 대신 로컬 캐시에 자산을 저장하고, 사용자가 오프라인 상태 인 경우 중요한 정보를 제공하고, 필요할 때 사용할 수 있도록 컨텐츠를 프리 페치하고, 네트워크 오류에 대한 폴백을 제공 할 수 있습니다. 그것들은 완전히 비동기식이지만 Websockets와 달리 자신의 스레드에서 실행되므로 DOM에 액세스 할 수 없습니다.

서비스 근로자에 대한 또 다른 중요한 점은 응용 프로그램의 모든 요청과 응답을 가로 채는 것입니다. 따라서 그들은 몇 가지 안전 위험이 있으며, 특히 상동 전략을 따릅니다. 따라서 이는 서비스 작업자가 CDN 또는 타사 서비스에서 실행할 수 없음을 의미합니다. 또한 안전한 HTTPS 연결이 필요하므로 실행하려면 SSL 인증서가 필요합니다. 더 많은 서비스 근로자 정보

사이트에 서비스 작업자를 추가하십시오 (Chris Ferdinadi) 서비스 작업자 개요 (Chrome Developers) 서비스 근로자 (Philip Walton)가있는 작은 HTML 페이로드 서비스 작업자 요리 책 (Mozilla) 서비스 작업자 API (MDN DOCS) 최신 브라우저 지원 (Caniuse)

요약 이것은 웹 소켓, 웹 작업자 및 서비스 직원 간의 차이점 (및 유사점)에 대한 초 조정 된 설명입니다. 다시 말하지만, 용어와 개념은 하나가 다른 것과 혼동 될 수있을 정도로 유사하지만,이를 통해 차별화하는 방법에 대한 이해를 더 잘 이해할 수 있기를 바랍니다. 우리는 빠른 참조 테이블로 시작합니다. 이것은 동일하지만 더 자세한 비교를 위해 약간 확장됩니다. (양식은 여기에 삽입되어야하며 원래 의도를 유지하기 위해 원래 양식 컨텐츠에 따라 양식의 내용을 다시 작성해야합니다) .

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

다음 시나리오를 고려하십시오.

서비스 작업자는 애플리케이션, 브라우저 및 서버 간의 네트워크 프록시 역할을하므로 네트워크가 오프라인 상태 일 때도 스크립트를 실행할 수 있습니다. 다음 섹션에서이를 다룰 것입니다.

관련 기사