Apakah ada pustaka JavaScript sumber terbuka yang membahas banyak tab peramban dan status klien untuk peramban yang lebih baru? [Tutup]

Ada beberapa fitur HTML5 baru yang telah membuatnya menjadi browser terbaru yang memungkinkan negara berbagi di antara tab, jendela browser, jendela domain yang sama, dll. Jadi mungkin akan sedikit lebih mudah untuk menulis aplikasi web yang membuat banyak status pada klien dan juga mengelola negara secara cerdas antara tab dan / atau windows.

Saat ini ada perpustakaan seperti Backbone.js yang dapat membantu mengelola status dalam satu tab atau satu jendela. Apakah ada sesuatu di luar sana yang membantu dengan banyak tab (atau windows) yang mengelola keadaan global, keadaan spesifik tab, dan acara lintas-tab tanpa mengandalkan server untuk menyinkronkan semuanya?

— psr
sumber

Beberapa aplikasi web (misalnya Trello) melewati ini dengan hanya menggunakan WebSockets untuk menyinkronkan semua klien, baik di browser yang sama atau tidak. Tapi itu bisa bermanfaat. Jika saya menulis perpustakaan seperti ini, saya akan membuat lapisan tipis di atas polyfill untuk SharedWorkers, karena SharedWorkers melakukan banyak hal yang Anda butuhkan di sini, tetapi belum didukung dengan baik. Peretasan untuk mengaktifkan ini adalah peristiwa Penyimpanan lokal, yang aktif walaupun tab dibuka secara mandiri.

— mahemoff

Guru kuliah saya mengajari saya itu HTTP is great (and beutiful) because it is stateless. Sejak saya bergabung dengan industri, saya mencari beuty itu tetapi tidak bisa menemukannya. Semua orang hanya berbicara tentang mempertahankan status yang Anda lihat!

— Dipan Mehta

@DipanMehta: jika Anda melihat RFC2616, saya tidak yakin Anda akan setuju dengan guru Anda tentang bagian "kecantikan" :) Meskipun saya akan memberi Anda bahwa gagasan "murni tanpa kewarganegaraan" memang hebat dan saya merasa bermasalah bahwa kita membantai itu ...

— haylem

Stateless dan aplikasi web tidak berjalan bersama dengan baik. Hal-hal kecil seperti sedang log in carry state. Hebat jika Anda hanya menyajikan file yang cukup kecil untuk siapa saja yang memintanya, kurasa.

— psr

Saya menulis perpustakaan kecil untuk berkomunikasi antara semua tab yang terbuka di situs web Anda menggunakan trik HTML5.

— catamphetamine

Jawaban:

Jawaban singkat:

Anda tidak dapat benar - benar menyampaikan informasi status dari satu tab ke tab lainnya ...

Jawaban panjang:

Anda tidak dapat benar - benar menyampaikan informasi status dari satu tab ke tab lainnya, karena ini akan menjadi pelanggaran yang sangat parah pada sandboxing dan keamanan.

Anda dapat, bagaimanapun, secara tidak langsung melewati dua tab dengan cara:

komunikasi client-server (WebSockets, panggilan AJAX, ...),
ekstensi browser (mereka dapat diizinkan untuk memotong, dan beberapa browser menawarkan API untuk menerapkan sistem penyampaian pesan untuk berkomunikasi antara halaman latar belakang, tab dan skrip konten ),

Pilihan lain adalah dengan hanya berkomunikasi melalui cookie untuk menyampaikan informasi antara 2 tab, tetapi ini kemungkinan besar akan menyebabkan masalah, sangat tergantung pada browser dan memerlukan pemuatan ulang halaman (dan sejujurnya saya belum pernah mencobanya dan hanya memikirkannya, tetapi yang lain telah dilakukan itu ) .

Jadi, karena ekstensi peramban jelas merupakan jalur yang cukup membatasi, Anda harus mengikuti komunikasi klien-server dan mengembangkan sistem untuk memungkinkan klien mempublikasikan acara ke server, yang kemudian mengirimkannya kembali (atau jenis siaran lainnya) ke klien lain melalui protokol komunikasi pilihan Anda.

Pembaruan 1: Seperti seseorang yang disebutkan dalam komentar sebelum menghapusnya (tidak dapat memberikan kredit karena tidak ditampilkan di kotak masuk, maaf)

HTML5 memperkenalkan window.postMessageAPI.

Untuk contoh yang berfungsi, lihat posting blog John Resig di Cross-Window Messaging . Dan sangat menarik, jika Anda melihat komentar di posting ini Anda akan melihat seseorang bernama Malte yang menyebutkan perpustakaan yang mereka gunakan untuk menggunakan window.postMessagebrowser modern, atau versi berbasis cookie pada browser lama.

Baca ini untuk detail dan contoh lebih lanjut:

MDC 's window.postMessagehalaman,
Posting blog David Walsh di (demo rusak) ,window.postMessage
yang rancangan HTML5 Web Messaging dokumen,
penulisan Ajaxian ini window.postMessagedengan tautan tambahan.

Pembaruan 2:

Perlu diingat bahwa, seperti 2012-03-04, spesifikasi HTML5 masih berupa konsep, sehingga beberapa fitur dapat dihapus . Jadi gunakan dengan hati-hati ...

— haylem
sumber

Saya tampaknya salah, karena HTML5 memperkenalkan window.postMessage API, memang.

— haylem

Juga, jika Anda membaca posting blog John Resig di Cross-Window Messaging dan komentarnya, Anda akan melihat seseorang bernama Malte yang menyebut [pustaka] [3] yang mereka tulis untuk menggunakannya di browser modern, atau versi berbasis cookie untuk browser lama, jadi cookie saya tidak terlalu gila.

— haylem

Baru-baru ini saya menemukan Intercom , yang menggunakan penyimpanan lokal untuk mengimplementasikan pesan siaran antar windows. Penyimpanan lokal mengaktifkan suatu peristiwa ( onstorage) ketika data berubah, jadi tidak diperlukan polling. Interkom memungkinkan semua halaman pada suatu domain untuk berkomunikasi, terlepas dari bagaimana mereka dibuka.

— josh3736
sumber

Jika windows (halaman) Anda berasal dari domain yang sama (asal), localStoragedapat digunakan untuk berbagi data dan untuk menyiarkan pesan. Satu hal yang harus Anda pertimbangkan adalah bahwa setiap jendela browser (halaman) berfungsi di utas terpisah. Jadi, jika kita berbicara tentang komunikasi lintas jendela, kita juga berbicara tentang multithreading.

Anda juga harus mempertimbangkan beberapa localStoragemasalah dengan IE:

Saya telah melakukan beberapa tes untuk localStorage di IE8. Setelah beberapa ribu perubahan ke penyimpanan lokal, jendela dari asal yang sama berhenti menerima acara 'penyimpanan'. Terlebih lagi, maka Anda mencoba membaca dari item Penyimpanan lokal yang sama, nilai mungkin berbeda di jendela yang berbeda. Jadi, saya akan mengatakan bahwa IE8 tidak mendukung localStorage
IE9 dan IE10 memanggil event handler 'storage' bahkan jika localStorage diubah dari jendela ini ( ini bertentangan dengan spesifikasi ).
Ada juga masalah yang diketahui dengan IE11 .

Saya baru-baru ini menerbitkan perpustakaan komunikasi interwindow (semua fitur dijelaskan dalam readme). Ini menyediakan berbagi data yang aman, siaran acara. Ini juga memecahkan beberapa masalah IE (IE8 jelas tidak didukung, IE11 bug dengan iframe di dalam induk asal yang berbeda dapat diselesaikan hanya dengan memperbaiki IE - menunggu pembaruan IE11).

— Eugene Khudoy
sumber