Dahulu kala, di galaksi yang jauh, sebuah tugas muncul untuk menyinkronkan tab peramban untuk pemain web, seperti VK: penting untuk mengatur pertukaran data di antara tab, melacak nomor mereka dan memberikan tugas kepada sebagian dari mereka. Seluruh implementasi harus dilakukan pada klien. Banyak informasi dikumpulkan, dan diketik ke dalam seluruh artikel.
Di bawah ini saya akan menjelaskan berbagai cara untuk menyelesaikan masalah tersebut.
Pertimbangkan cara paling populer untuk menyinkronkan tab peramban dalam rangka meningkatkan kompleksitas.
Penyimpanan lokal
localStorage - penyimpanan lokal, properti dari objek jendela, memungkinkan Anda untuk mengakses objek
Penyimpanan lokal. Itu dapat menyimpan data di antara sesi pengguna. Ada properti serupa -
sessionStorage , tetapi hanya menyimpan data selama sesi halaman.
Data ditambahkan ke penyimpanan menggunakan metode
setItem .
localStorage.setItem('key', 'value');
Acara penyimpanan sangat ideal untuk menyinkronkan data di antara tab, itu dihasilkan ketika nilai localStorage atau elemen sessionStorage berubah.
window.addEventListener('storage', function(event) { console.log(event.key); });
Acara tidak berfungsi pada tab, yang membuat perubahan, tetapi mengaktifkan tab yang tersisa dari domain di browser.
Pembuatan acara penyimpananBrowser memiliki tingkat penyimpanan yang berbeda untuk Penyimpanan lokal dan sessionStorage:
- Chrome, FireFox, dan Opera ~ 5 MB.
- IE ~ 4,8 MB.
- iOS Safari, OS X Safari ~ 2.5 MB.
- Android ~ 5 MB.
Di antara kekurangannya, orang dapat mencatat - jumlah penyimpanan browser, dan ketika penuh, objek baru tidak akan direkam.
Metode ini bekerja di semua browser kecuali
Opera mini .
Kirim pesan
postMessage adalah metode yang memungkinkan Anda mengirim permintaan lintas-domain dengan aman, yaitu berkomunikasi satu sama lain ke windows dan iframe dari berbagai domain.
Sangat nyaman untuk interaksi widget eksternal dan layanan yang terhubung melalui iframe dari halaman utama.
Transmisi pesan:
const win = window.frames.target; win.postMessage('send message', 'http://javascript.ru');
Data yang dikirim dapat berupa objek apa pun yang mendukung
kloning (string, objek, array, Peta, Tanggal ...). Tetapi IE hanya mendukung string.
Url menunjukkan bahwa hanya windows dari sumber ini yang dapat menerima pesan.
Untuk menerima pesan, jendela harus berlangganan acara onmessage.
window.addEventListener('message', function(event) { if (event.origin != 'http://javascript.ru') { return; } console.log(event.data); });
Jendela apa pun dapat mengakses metode ini untuk mengirim pesan kepadanya, terlepas dari lokasi dokumen di jendela itu. Karena itu, pastikan untuk memeriksa asal.
Di IE, antarmuka
postMessage hanya berfungsi dengan iframe dan tidak berfungsi di antara tab dan windows.
API Saluran Siaran
API Saluran Siaran menyediakan tautan sederhana antara konteks penayangan (jendela, tab). Objek
BroadcastChannel membuat saluran umum yang memungkinkan Anda menerima pesan apa pun yang dikirim kepadanya. Tab, jendela, iframe dapat berlangganan saluran dan membuat koneksi dengannya.
const bc = new BroadcastChannel('test_channel');
Metode postMessage memposting pesan ke saluran. Argumen adalah tipe yang mendukung
kloning .
bc.postMessage('This is a test message.');
Ketika pesan dipublikasikan, acara pesan akan dikirim ke setiap objek yang terhubung ke saluran ini.
bc.addEventListener('message', function (e) { console.log(e); })
Publikasikan pesan ke saluran untuk konteks yang berbeda.API ini cukup sederhana, dapat dianggap sebagai bus pesan sederhana. Tetapi metode ini memiliki kelemahan serius: tidak ada dukungan untuk
Safari dan IE .
Pada pandangan pertama, Anda dapat menemukan beberapa metode transfer data yang serupa (misalnya MessageChannel, WebSocket), tetapi masing-masing dari mereka memiliki tujuan tertentu -
perbandingannya .
Pekerja web
Ini adalah mekanisme yang memungkinkan skrip dijalankan di utas latar belakang yang terpisah dari utas utama aplikasi web. Ini diimplementasikan menggunakan file js, yang termasuk dalam halaman menggunakan permintaan HTTP asinkron.
Pekerja sangat bagus untuk melakukan operasi komputasi berat tanpa memperlambat antarmuka pengguna.
Tetapi dengan sinkronisasi, hanya dua jenis pekerja yang dapat membantu.
Ini adalah jenis pekerja khusus yang dapat diakses dari beberapa konteks browser. Mari kita menulis file js bersama untuk tab, misalnya shared-worker.js.
const worker = new SharedWorker('shared-worker.js');
Setiap tab dapat berkomunikasi dengan pekerja melalui pekerja.port. Script pekerja juga memiliki akses ke port-portnya. Setiap kali tab terhubung ke pekerja, acara terhubung dipecat dalam skrip.
Metode postMessage dibuat untuk mengirim data tab ke pekerja bersama.
worker.port.postMessage('test message');
Anda dapat mengambil data pekerja menggunakan acara pesan.
worker.port.onmessage = function (e) { console.log(e.data); };
Ada acara hubungkan di API SharedWorker, tetapi tidak ada acara putuskan, dan oleh karena itu data tidak akan dapat dibersihkan sendiri di tab tertutup - mereka akan terus dianggap terbuka. Ini tidak akan menyebabkan kesalahan, tetapi dapat dianggap sebagai cacat atau API fitur.
Hanya berfungsi di
Chrome dan FF .
Ini adalah pekerja yang dikendalikan oleh peristiwa yang dapat memantau, mencegat, dan memodifikasi permintaan jaringan dan menyimpannya.
Registrasi pekerja:
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js') .then(function() { return navigator.serviceWorker.ready; }) .catch(function(error) { console.error('registration error : ', error); }); }
Menggunakan peristiwa pesan, tab dapat menerima data dari file pekerja js, dan fungsi syncTabState digunakan untuk memproses pesan.
self.addEventListener('message', function(e){ const data = e.data; const tabId = e.source.id self.syncTabState(data, tabId); });
Fungsi sendTabState dirancang untuk mengirim pesan ke tab.
self.sendTabState = function(client, data){ client.postMessage(data); }
Penggunaan terperinci dan banyak contoh di
sini .
Semua pekerja web tidak memiliki akses ke jendela dan objek dokumen.
Pekerja layanan tidak bekerja di
IE dan Opera mini .
Perpustakaan sinkronisasi
Ini adalah cara bagi mereka yang tidak ingin bersepeda dan siap mempertimbangkan solusi yang ada.
Kerugiannya adalah sebagian besar perpustakaan bersifat universal, sehingga tidak selalu cocok untuk solusi yang sempit.
Ringkasan
Untuk meringkas, mari kita bandingkan metode dukungan browser secara visual.
Gunakan LocalStorage, BroadcastChannel, dan PostMessage untuk kasus-kasus sederhana ketika Anda perlu mengirim pesan ke beberapa jendela / tab atau iframe.
Pekerja Bersama dan Pekerja Layanan adalah solusi yang paling cocok untuk mengelola kunci negara bersama dan file bersama.
Dan untuk tugas dengan pemutar web, LocalStorage dipilih, karena ada dukungan untuk IE.
Saya harap artikel ini membantu Anda memilih metode sinkronisasi yang tepat.
Saya berterima kasih kepada tim
poster atas bantuan dan dukungan mereka!
Artikel bekas: