Soket Web, Pekerja Web, Pekerja Layanan… ini adalah istilah yang mungkin pernah Anda baca atau dengar. Mungkin tidak semuanya, tapi kemungkinan besar setidaknya salah satunya. Dan bahkan jika Anda memiliki pegangan yang baik pada pengembangan front-end, ada kemungkinan besar Anda perlu mencari tahu apa artinya. Atau mungkin Anda seperti saya dan mencampuradukkannya dari waktu ke waktu. Semua istilah terlihat dan terdengar sangat mirip dan sangat mudah untuk membuat mereka bingung.
Jadi, mari kita uraikan bersama dan bedakan Soket Web, Pekerja Web, dan Pekerja Layanan. Tidak dalam arti seluk beluk di mana kami melakukan penyelaman yang dalam dan mendapatkan pengalaman langsung dengan masing-masing — lebih seperti pembantu kecil untuk menandai waktu berikutnya I kamu butuh penyegaran.
Referensi cepat
Kami akan mulai dengan ikhtisar tingkat tinggi untuk perbandingan dan kontras cepat.
| Fitur | Apa itu |
|---|---|
| Soket Web | Membuat koneksi dua arah yang terbuka dan persisten antara browser dan server untuk mengirim dan menerima pesan melalui satu koneksi yang dipicu oleh peristiwa. |
| Pekerja Web | Mengizinkan skrip berjalan di latar belakang di utas terpisah untuk mencegah skrip memblokir satu sama lain di utas utama. |
| Layanan Pekerja | Jenis Web Worker yang membuat layanan latar belakang yang bertindak sebagai middleware untuk menangani permintaan jaringan antara browser dan server, bahkan dalam situasi offline. |
Soket Web
Web Socket adalah protokol komunikasi dua arah. Anggap ini seperti panggilan terus-menerus antara Anda dan teman Anda yang tidak akan berakhir kecuali salah satu dari Anda memutuskan untuk menutup telepon. Satu-satunya perbedaan adalah bahwa Anda adalah browser dan teman Anda adalah server. Klien mengirimkan permintaan ke server dan server merespon dengan memproses permintaan klien dan sebaliknya.
Komunikasi didasarkan pada peristiwa. SEBUAH WebSocket objek dibuat dan terhubung ke server, dan pesan di antara server memicu peristiwa yang mengirim dan menerimanya.
Ini berarti bahwa ketika koneksi awal dibuat, kami memiliki komunikasi client-server di mana koneksi dimulai dan tetap hidup sampai klien atau server memilih untuk mengakhirinya dengan mengirimkan CloseEvent. Itu membuat Web Sockets ideal untuk aplikasi yang membutuhkan komunikasi terus menerus dan langsung antara klien dan server. Sebagian besar definisi yang saya lihat memanggil aplikasi obrolan sebagai kasus penggunaan umum — Anda mengetik pesan, mengirimkannya ke server, memicu suatu peristiwa, dan server merespons dengan data tanpa harus melakukan ping ke server berulang kali.
Pertimbangkan skenario ini: Anda sedang dalam perjalanan keluar dan memutuskan untuk mengaktifkan Google Maps. Anda mungkin sudah mengetahui cara kerja Google Maps, tetapi jika tidak, Google Maps akan menemukan lokasi Anda secara otomatis setelah Anda terhubung ke aplikasi dan melacaknya ke mana pun Anda pergi. Ini menggunakan transmisi data waktu nyata untuk melacak lokasi Anda selama koneksi ini hidup. Itu adalah Soket Web yang membangun percakapan dua arah yang terus-menerus antara browser dan server untuk menjaga agar data tetap terbaru. Aplikasi olahraga dengan skor waktu nyata juga dapat menggunakan Soket Web dengan cara ini.
Perbedaan besar antara Soket Web dan Pekerja Web (dan, dengan ekstensi seperti yang akan kita lihat, Pekerja Layanan) adalah bahwa mereka memiliki akses langsung ke DOM. Sementara Pekerja Web (dan Pekerja Layanan) berjalan di utas terpisah, Soket Web adalah bagian dari utas utama yang memberi mereka kemampuan untuk memanipulasi DOM.
Ada alat dan layanan untuk membantu membangun dan memelihara koneksi Web Socket, termasuk: SocketCluster, API asinkron, koboi, Raja WebSocket, Saluran, dan Gorila WebSocket. MDN memiliki menjalankan daftar yang mencakup layanan lain.
Lebih banyak informasi Soket Web
Pekerja Web
Pertimbangkan skenario di mana Anda perlu melakukan banyak perhitungan yang rumit sementara pada saat yang sama membuat perubahan pada DOM. JavaScript adalah aplikasi utas tunggal dan menjalankan lebih dari satu skrip dapat mengganggu antarmuka pengguna yang Anda coba ubah serta penghitungan rumit yang sedang dilakukan.
Di sinilah Pekerja Web ikut bermain.
Pekerja Web mengizinkan skrip untuk berjalan di latar belakang di utas terpisah untuk mencegah skrip memblokir satu sama lain di utas utama. Itu membuatnya hebat untuk meningkatkan kinerja aplikasi yang memerlukan operasi intensif karena operasi tersebut dapat dilakukan di latar belakang pada utas terpisah tanpa memengaruhi antarmuka pengguna dari rendering. Tetapi mereka tidak begitu hebat dalam mengakses DOM karena, tidak seperti Soket Web, pekerja web berjalan di luar utas utama di utasnya sendiri.
Web Worker adalah objek yang mengeksekusi file skrip dengan menggunakan a Worker objek untuk melaksanakan tugas. Dan ketika kita berbicara tentang pekerja, mereka cenderung jatuh ke dalam salah satu dari tiga jenis:
- Pekerja Berdedikasi: Pekerja yang berdedikasi hanya dapat dijangkau oleh skrip yang memanggilnya. Itu masih menjalankan tugas-tugas pekerja web biasa, seperti skrip multi-threading-nya.
- Pekerja Bersama: Pekerja bersama adalah kebalikan dari pekerja yang berdedikasi. Itu dapat diakses oleh banyak skrip dan secara praktis dapat melakukan tugas apa pun yang dijalankan oleh pekerja web selama mereka ada di domain yang sama dengan pekerja tersebut.
- Pekerja Layanan: Service worker bertindak sebagai proxy jaringan antara aplikasi, browser, dan server, memungkinkan skrip untuk berjalan bahkan saat jaringan offline. Kita akan membahas ini di bagian berikutnya.
Lebih banyak informasi Pekerja Web
Pekerja layanan
Ada beberapa hal yang tidak dapat kami kendalikan sebagai pengembang, dan salah satunya adalah koneksi jaringan pengguna. Jaringan apa pun yang terhubung dengan pengguna adalah apa adanya. Kami hanya dapat melakukan yang terbaik untuk mengoptimalkan aplikasi kami sehingga mereka melakukan yang terbaik yang mereka bisa pada koneksi apa pun yang kebetulan digunakan.
Service Worker adalah salah satu hal yang dapat kita lakukan untuk meningkatkan kinerja aplikasi secara progresif. Pekerja layanan berada di antara aplikasi, browser, dan server, menyediakan koneksi aman yang berjalan di latar belakang pada utas terpisah, berkat — Anda dapat menebaknya — Pekerja Web. Seperti yang kita pelajari di bagian terakhir, Service Worker adalah salah satu dari tiga jenis Web Worker.
Jadi, mengapa Anda membutuhkan pekerja layanan yang duduk di antara aplikasi Anda dan browser pengguna? Sekali lagi, kami tidak memiliki kendali atas koneksi jaringan pengguna. Katakanlah koneksi terputus karena alasan yang tidak diketahui. Itu akan memutus komunikasi antara browser dan server, mencegah data dari bolak-balik. Pekerja layanan mempertahankan koneksi, bertindak sebagai proxy asinkron yang mampu mencegat permintaan dan menjalankan tugas — bahkan setelah koneksi jaringan terputus.
Ini adalah pendorong utama dari apa yang sering disebut sebagai pengembangan "offline-first". Kami dapat menyimpan aset di cache lokal alih-alih jaringan, memberikan informasi penting jika pengguna offline, mengambil sesuatu terlebih dahulu sehingga siap saat pengguna membutuhkannya, dan memberikan fallback sebagai respons terhadap kesalahan jaringan. Mereka sepenuhnya asinkron tetapi, tidak seperti Soket Web, mereka tidak memiliki akses ke DOM karena mereka berjalan di utas mereka sendiri.
Hal besar lainnya yang perlu diketahui tentang Service Worker adalah mereka mencegat setiap permintaan dan respons dari aplikasi Anda. Dengan demikian, mereka memiliki beberapa implikasi keamanan, terutama bahwa mereka mengikuti kebijakan asal yang sama. Jadi, itu berarti tidak menjalankan service worker dari CDN atau layanan pihak ketiga. Mereka juga memerlukan koneksi HTTPS yang aman, yang berarti Anda memerlukan sertifikat SSL untuk menjalankannya.
Lebih banyak informasi Pekerja Layanan
Membungkus
Itulah penjelasan tingkat tinggi tentang perbedaan (dan persamaan) antara Soket Web, Pekerja Web, dan Pekerja Layanan. Sekali lagi, terminologi dan konsepnya cukup mirip untuk digabungkan satu sama lain, tetapi mudah-mudahan, ini memberi Anda ide yang lebih baik tentang bagaimana membedakannya.
Kami memulai dengan tabel referensi cepat. Ini hal yang sama, tetapi sedikit diperluas untuk menarik perbandingan yang lebih tebal.
| Fitur | Apa itu | Multithread? | HTTPS? | akses DOM? |
|---|---|---|---|---|
| Soket Web | Membuat koneksi dua arah yang terbuka dan persisten antara browser dan server untuk mengirim dan menerima pesan melalui satu koneksi yang dipicu oleh peristiwa. | Berjalan di utas utama | Tidak diperlukan | Yes |
| Pekerja Web | Mengizinkan skrip berjalan di latar belakang di utas terpisah untuk mencegah skrip memblokir satu sama lain di utas utama. | Berjalan di utas terpisah | Wajib | Tidak |
| Layanan Pekerja | Jenis Web Worker yang membuat layanan latar belakang yang bertindak sebagai middleware untuk menangani permintaan jaringan antara browser dan server, bahkan dalam situasi offline. | Berjalan di utas terpisah | Wajib | Tidak |
