Pernahkah Anda perlu menjalankan kode di browser yang membutuhkan waktu lama untuk menjalankan aplikasi Anda menjadi tidak responsif untuk sementara waktu? Dengan pekerja web HTML5, Anda tidak perlu mengalaminya lagi.
Pekerja web memungkinkan Anda untuk memisahkan kode yang berjalan lama dan menjalankannya secara independen dari kode lain yang berjalan di halaman. Ini membuat UI Anda tetap responsif, bahkan selama operasi yang kompleks.
Apa itu Pekerja Web?
Secara tradisional, JavaScript adalah bahasa utas tunggal. Itu berarti tidak ada lagi yang bisa dijalankan saat satu bagian kode sedang berjalan. Misalnya, jika Anda memiliki kode yang mencoba menganimasikan elemen DOM, kode yang mencoba mengubah variabel harus menunggu hingga animasi berakhir sebelum dapat dijalankan.
Pekerja web adalah file JavaScript yang dijalankan di utas terpisah tanpa akses langsung ke DOM.
Salah satu cara untuk memikirkan pekerja web adalah bahwa mereka adalah potongan kode yang membutuhkan banyak waktu untuk dijalankan, jadi Anda memberikannya ke browser untuk dijalankan di latar belakang. Karena kode itu sekarang berjalan di latar belakang, itu tidak mempengaruhi JavaScript yang bertanggung jawab untuk halaman web Anda.
Sebagai efek samping, ia tidak dapat lagi berinteraksi secara langsung dengan sisa kode Anda, sehingga pekerja web tidak memiliki akses ke DOM. Namun, banyak API browser lain yang masih tersedia, termasuk WebSocket dan Fetch API.
Pekerja web tidak sepenuhnya terisolasi dari utas utama. Ketika seorang pekerja perlu berkomunikasi dengan utas utama, ia dapat mengirim pesan dan utas utama dapat mengirim pesannya sendiri sebagai tanggapan.
Mengapa Pekerja Web?
Sebelum pekerja web, satu-satunya cara untuk menjalankan JavaScript yang membutuhkan banyak waktu di browser adalah:
- Terimalah bahwa halaman tersebut tidak akan merespons untuk sementara waktu.
- Pecahkan kode itu menjadi potongan asinkron.
Karena halaman yang tidak responsif biasanya merupakan pengalaman pengguna yang buruk, Anda dapat memilih opsi asinkron. Menulis kode dengan cara ini berarti membaginya menjadi bagian-bagian kecil yang dapat dijalankan browser saat tidak menangani antarmuka pengguna. Potongan harus cukup kecil sehingga jika UI perlu diperbarui, browser dapat menyelesaikan eksekusi potongan saat ini dan memperhatikan antarmuka pengguna.
Pekerja web ditambahkan ke HTML5 untuk menawarkan solusi yang lebih baik untuk masalah ini. Alih-alih memaksa Anda untuk berkreasi dengan kode asinkron, mereka membiarkan Anda memisahkan fungsi dengan rapi untuk dijalankan di utasnya sendiri yang terisolasi.
Ini memudahkan pengembang untuk menulis kode tersebut dan juga meningkatkan pengalaman pengguna.
Gunakan Kasus untuk Pekerja Web
Aplikasi apa pun yang membutuhkan banyak komputasi di sisi klien dapat mengambil manfaat dari pekerja web.
Katakanlah, misalnya, aplikasi Anda ingin membuat laporan penggunaan, dan menyimpan semua data pada klien dari masalah privasi.
Untuk menghasilkan laporan itu, aplikasi web Anda harus mengambil data, menjalankan perhitungan di dalamnya, mengatur hasilnya, dan menyajikannya kepada pengguna.
Jika Anda mencoba melakukannya di utas utama, pengguna tidak akan dapat sepenuhnya menggunakan aplikasi saat aplikasi memproses data. Sebagai gantinya, Anda dapat memindahkan sebagian atau semua kode itu ke pekerja web. Ini memungkinkan pengguna untuk terus menggunakan aplikasi saat perhitungan sedang dilakukan.
Cara Menggunakan Pekerja Web di JavaScript
Itu API Pekerja Web mendefinisikan cara menggunakan pekerja web. Menggunakan API ini melibatkan pembuatan objek Worker dengan konstruktor Worker seperti ini:
biarkan pekerja baru = Pekerja('pekerja.js');Itu Pekerja konstruktor menerima nama file JavaScript sebagai parameternya dan menjalankan file di utas baru. Ini mengembalikan objek Pekerja untuk memungkinkan utas utama berinteraksi dengan utas pekerja.
Pekerja berinteraksi dengan utas utama dengan mengirim pesan bolak-balik. Anda menggunakan postingPesan berfungsi untuk mengirim acara antara pekerja dan utas utama. Menggunakan pesan pendengar acara untuk mendengarkan pesan dari pihak lain.
Berikut adalah contoh kode. Pertama, utas utama mungkin terlihat seperti ini:
membiarkan pekerja = baru Pekerja('pekerja.js')
pekerja.postMessage('Hai!')
pekerja.onmessage = fungsi(e) {
konsol.log('Utas pekerja mengatakan', e.data)
}
Utas utama ini membuat objek pekerja dari pekerja.js, lalu mengirim pesan ke sana dengan pekerja.postMessage. Ini kemudian mendefinisikan pendengar acara, mirip dengan konsep a pendengar acara DOM. Sebuah event akan diaktifkan setiap kali pekerja mengirim pesan kembali ke utas utama, dan pawang mencatat pesan pekerja ke konsol.
Kode di dalam pekerja (worker.js) memiliki satu pekerjaan:
pesan = fungsi(e) {
membiarkan pesan = e.data;
konsol.log('Utas utama mengatakan', pesan);
pesan pos('Hai!')
}Itu mendengarkan pesan apa pun yang dikirim dari utas utama, mencatat pesan ke konsol, dan mengirim kembali pesan kembali ke utas utama.
Pesan dalam contoh ini semuanya berupa string, tetapi itu bukan persyaratan: Anda dapat mengirim hampir semua jenis data sebagai pesan.
Jenis pekerja yang Anda lihat sejauh ini disebut pekerja berdedikasi. Anda hanya dapat mengaksesnya dari file yang Anda buat (mereka didedikasikan untuk itu). Pekerja bersama adalah kebalikannya: mereka dapat menerima pesan dari, dan mengirim pesan ke, banyak file. Pekerja bersama secara konseptual sama dengan pekerja berdedikasi, tetapi Anda harus menggunakannya sedikit berbeda.
Mari kita lihat sebuah contoh. Alih-alih menggunakan konstruktor Pekerja, setiap file yang ingin menggunakan pekerja bersama harus membuat objek pekerja menggunakan Pekerja Bersama():
membiarkan pekerja bersama = baru SharedWorker('pekerja.js')Perbedaan tidak berhenti di situ. Agar file dapat mengirim atau menerima pesan dari pekerja bersama, file harus melakukannya dengan mengakses a Pelabuhan objek, alih-alih melakukannya secara langsung. Berikut tampilannya:
sharedWorker.port.postMessage('Hai, yang di sana!')
sharedWorker.port.onMessage = fungsi(e) {
konsol.log('Pekerja bersama mengirim', e.data);
}
Anda harus menggunakan objek port di dalam pekerja juga:
terhubung = fungsi(e) {
konstan port = e.port[0];
port.onmessage = fungsi(e) {
konsol.log('Pesan diterima', e.data)
port.postMessage('Halo!');
}
}
Itu terhubung pendengar menyala setiap kali koneksi ke port terjadi (ketika pesan pendengar acara diatur di utas utama).
Ketika itu terjadi, kode mendapatkan port yang baru saja terhubung dari event connect dan menyimpannya dalam sebuah variabel. Selanjutnya, kode mendaftarkan pesan pendengar pada objek port. Kode kemudian mencatat pesan ke konsol, dan menggunakan port untuk mengirim pesan kembali ke utas utama.
Pekerja Web Meningkatkan Pengalaman Pengguna
Pekerja web adalah utas JavaScript yang memungkinkan Anda menjalankan potongan kode yang kompleks dan berjalan lama di latar belakang. Kode ini kemudian akan menghindari pemblokiran antarmuka pengguna. Menggunakan pekerja web membuat penulisan kode semacam ini menjadi lebih mudah, dan meningkatkan pengalaman bagi pengguna aplikasi. Anda dapat membuat pekerja web, dan berinteraksi dengan mereka, menggunakan API pekerja web.
