Web Sockets, Web worker, Service worker… đây là những thuật ngữ bạn có thể đã đọc hoặc nghe thấy. Có thể không phải tất cả chúng, nhưng có thể ít nhất một trong số chúng. Và ngay cả khi bạn có khả năng phát triển giao diện người dùng tốt, thì vẫn có khả năng bạn cần phải tra cứu ý nghĩa của chúng. Hoặc có thể bạn giống tôi và thỉnh thoảng trộn chúng lại với nhau. Tất cả các thuật ngữ đều trông giống nhau đến kinh khủng và thực sự rất dễ khiến chúng bị nhầm lẫn.
Vì vậy, chúng ta hãy chia nhỏ chúng lại với nhau và phân biệt Web socket, Web worker và Service worker. Không phải theo nghĩa thực tế mà chúng tôi tìm hiểu sâu và có được kinh nghiệm thực tế với từng cái - giống như một người trợ giúp nhỏ để đánh dấu vào lần sau I bạn cần bồi dưỡng.
Tham khảo nhanh
Chúng tôi sẽ bắt đầu với tổng quan cấp cao để so sánh và đối chiếu nhanh.
| Đặc tính | Nó là gì |
|---|---|
| Ổ cắm web | Thiết lập kết nối hai chiều mở và liên tục giữa trình duyệt và máy chủ để gửi và nhận tin nhắn qua một kết nối duy nhất được kích hoạt bởi các sự kiện. |
| Nhân viên web | Cho phép các tập lệnh chạy ở chế độ nền trong các chuỗi riêng biệt để ngăn các tập lệnh chặn nhau trên chuỗi chính. |
| Dịch vụ lao động | Một loại Web Worker tạo ra một dịch vụ nền hoạt động phần mềm trung gian để xử lý các yêu cầu mạng giữa trình duyệt và máy chủ, ngay cả trong các tình huống ngoại tuyến. |
Ổ cắm web
Web Socket là một giao thức truyền thông hai chiều. Hãy coi điều này giống như một cuộc gọi đang diễn ra giữa bạn và bạn của bạn sẽ không kết thúc trừ khi một trong hai người quyết định gác máy. Sự khác biệt duy nhất là bạn là trình duyệt và bạn của bạn là máy chủ. Máy khách gửi một yêu cầu đến máy chủ và máy chủ phản hồi bằng cách xử lý yêu cầu của máy khách và ngược lại.
Giao tiếp dựa trên các sự kiện. Một WebSocket đối tượng được thiết lập và kết nối với máy chủ và các thông báo giữa các sự kiện kích hoạt máy chủ gửi và nhận chúng.
Điều này có nghĩa là khi kết nối ban đầu được thực hiện, chúng tôi có giao tiếp máy khách-máy chủ nơi kết nối được khởi tạo và duy trì hoạt động cho đến khi máy khách hoặc máy chủ chọn chấm dứt nó bằng cách gửi CloseEvent. Điều đó làm cho Web Sockets trở nên lý tưởng cho các ứng dụng yêu cầu giao tiếp liên tục và trực tiếp giữa máy khách và máy chủ. Hầu hết các định nghĩa mà tôi đã thấy đều gọi các ứng dụng trò chuyện như một trường hợp sử dụng phổ biến - bạn nhập tin nhắn, gửi đến máy chủ, kích hoạt một sự kiện và máy chủ phản hồi bằng dữ liệu mà không cần phải ping lại máy chủ.
Hãy xem xét kịch bản này: Bạn đang trên đường ra đi và bạn quyết định bật Google Maps. Có thể bạn đã biết Google Maps hoạt động như thế nào, nhưng nếu bạn chưa biết, nó sẽ tự động tìm vị trí của bạn sau khi bạn kết nối với ứng dụng và theo dõi vị trí của bạn mọi lúc mọi nơi. Nó sử dụng truyền dữ liệu thời gian thực để theo dõi vị trí của bạn miễn là kết nối này còn hoạt động. Đó là Web Socket thiết lập một cuộc trò chuyện hai chiều liên tục giữa trình duyệt và máy chủ để giữ cho dữ liệu đó được cập nhật. Một ứng dụng thể thao với điểm số thời gian thực cũng có thể sử dụng Web Sockets theo cách này.
Sự khác biệt lớn giữa Web Sockets và Web worker (và mở rộng như chúng ta sẽ thấy, Service worker) là họ có quyền truy cập trực tiếp vào DOM. Trong khi Web Worker (và Service worker) chạy trên các luồng riêng biệt, thì Web Sockets là một phần của luồng chính cung cấp cho họ khả năng thao tác với DOM.
Có các công cụ và dịch vụ để giúp thiết lập và duy trì kết nối Web Socket, bao gồm: Cụm ổ cắm, API không đồng bộ, cao bồi, WebỔ Cắm Vua, Các kênhvà Ổ cắm web Gorilla. MDN có một đang chạy danh sách bao gồm các dịch vụ khác.
Thông tin thêm về ổ cắm web
Nhân viên web
Hãy xem xét một tình huống mà bạn cần thực hiện một loạt các phép tính phức tạp đồng thời thực hiện các thay đổi đối với DOM. JavaScript là một ứng dụng đơn luồng và việc chạy nhiều hơn một tập lệnh có thể làm gián đoạn giao diện người dùng mà bạn đang cố gắng thực hiện thay đổi cũng như tính toán phức tạp đang được thực hiện.
Đây là lúc Công nhân web phát huy tác dụng.
Web Worker cho phép các tập lệnh chạy ở chế độ nền trong các luồng riêng biệt để ngăn các tập lệnh chặn lẫn nhau trên luồng chính. Điều đó làm cho chúng trở nên tuyệt vời để nâng cao hiệu suất của các ứng dụng yêu cầu hoạt động chuyên sâu vì các hoạt động đó có thể được thực hiện ở chế độ nền trên các luồng riêng biệt mà không ảnh hưởng đến giao diện người dùng từ việc hiển thị. Nhưng chúng không quá xuất sắc trong việc truy cập DOM bởi vì, không giống như Web Sockets, một web worker chạy bên ngoài chuỗi chính trong chuỗi của chính nó.
Web Worker là một đối tượng thực thi một tệp script bằng cách sử dụng Worker đối tượng để thực hiện các nhiệm vụ. Và khi chúng ta nói về người lao động, họ có xu hướng rơi vào một trong ba loại:
- Công nhân tận tâm: Một nhân viên chuyên dụng chỉ trong tầm tay của tập lệnh gọi nó. Nó vẫn thực thi các tác vụ của một web worker điển hình, chẳng hạn như các tập lệnh đa luồng của nó.
- Công nhân được chia sẻ: Một công nhân chia sẻ trái ngược với một công nhân tận tâm. Nó có thể được truy cập bởi nhiều tập lệnh và trên thực tế có thể thực hiện bất kỳ tác vụ nào mà web worker thực hiện miễn là chúng tồn tại trong cùng một miền với worker.
- Nhân viên dịch vụ: Service worker hoạt động như một proxy mạng giữa ứng dụng, trình duyệt và máy chủ, cho phép các tập lệnh chạy ngay cả trong trường hợp mạng ngoại tuyến. Chúng ta sẽ đi đến vấn đề này trong phần tiếp theo.
Thông tin thêm về nhân viên web
Công nhân dịch vụ
Với tư cách là nhà phát triển, chúng tôi không kiểm soát được một số thứ và một trong những thứ đó là kết nối mạng của người dùng. Bất kỳ mạng nào mà người dùng kết nối là nó là gì. Chúng tôi chỉ có thể cố gắng hết sức để tối ưu hóa ứng dụng của mình để chúng hoạt động tốt nhất có thể trên bất kỳ kết nối nào được sử dụng.
Nhân viên dịch vụ là một trong những việc chúng tôi có thể làm để từng bước nâng cao hiệu suất của ứng dụng. Một nhân viên dịch vụ nằm giữa ứng dụng, trình duyệt và máy chủ, cung cấp một kết nối an toàn chạy ở chế độ nền trên một chuỗi riêng biệt, nhờ - bạn đoán nó - Nhân viên web. Như chúng ta đã tìm hiểu trong phần trước, Service worker là một trong ba loại Web worker.
Vì vậy, tại sao bạn lại cần một nhân viên dịch vụ ngồi giữa ứng dụng của bạn và trình duyệt của người dùng? Một lần nữa, chúng tôi không kiểm soát được kết nối mạng của người dùng. Giả sử kết nối phát ra vì một số lý do không xác định. Điều đó sẽ phá vỡ giao tiếp giữa trình duyệt và máy chủ, ngăn không cho dữ liệu được truyền qua lại. Service worker duy trì kết nối, hoạt động như một proxy không đồng bộ có khả năng chặn các yêu cầu và thực thi các tác vụ - ngay cả sau khi kết nối mạng bị mất.
Đây là động lực chính của những gì thường được gọi là Phát triển "ngoại tuyến đầu tiên". Chúng tôi có thể lưu trữ nội dung trong bộ nhớ cache cục bộ thay vì mạng, cung cấp thông tin quan trọng nếu người dùng ngoại tuyến, tìm nạp trước mọi thứ để chúng sẵn sàng khi người dùng cần và cung cấp dự phòng khi xảy ra lỗi mạng. Chúng hoàn toàn không đồng bộ nhưng, không giống như Web Sockets, chúng không có quyền truy cập vào DOM vì chúng chạy trên các chuỗi của riêng chúng.
Điều quan trọng khác cần biết về Nhân viên dịch vụ là họ chặn mọi yêu cầu và phản hồi từ ứng dụng của bạn. Do đó, chúng có một số tác động bảo mật, đáng chú ý nhất là chúng tuân theo một chính sách có cùng nguồn gốc. Vì vậy, điều đó có nghĩa là không chạy service worker từ CDN hoặc dịch vụ của bên thứ ba. Chúng cũng yêu cầu kết nối HTTPS an toàn, có nghĩa là bạn sẽ cần chứng chỉ SSL để chúng chạy.
Thông tin thêm về Nhân viên dịch vụ
Kết thúc
Đó là lời giải thích siêu cấp cao về sự khác biệt (và những điểm tương đồng) giữa Web Sockets, Web worker và Service worker. Một lần nữa, thuật ngữ và khái niệm tương tự nhau đủ để trộn lẫn chúng với nhau, nhưng hy vọng, điều này giúp bạn có ý tưởng tốt hơn về cách phân biệt chúng.
Chúng tôi bắt đầu mọi thứ bằng một bảng tham chiếu nhanh. Đây là điều tương tự, nhưng được mở rộng một chút để vẽ các so sánh dày hơn.
| Đặc tính | Nó là gì | Đa luồng? | HTTPS? | Truy cập DOM? |
|---|---|---|---|---|
| Ổ cắm web | Thiết lập kết nối hai chiều mở và liên tục giữa trình duyệt và máy chủ để gửi và nhận tin nhắn qua một kết nối duy nhất được kích hoạt bởi các sự kiện. | Chạy trên chuỗi chính | Không yêu cầu | Có |
| Nhân viên web | Cho phép các tập lệnh chạy ở chế độ nền trong các chuỗi riêng biệt để ngăn các tập lệnh chặn nhau trên chuỗi chính. | Chạy trên một chuỗi riêng biệt | Yêu cầu | Không |
| Dịch vụ lao động | Một loại Web Worker tạo ra một dịch vụ nền hoạt động phần mềm trung gian để xử lý các yêu cầu mạng giữa trình duyệt và máy chủ, ngay cả trong các tình huống ngoại tuyến. | Chạy trên một chuỗi riêng biệt | Yêu cầu | Không |
