Czy istnieją biblioteki JavaScript typu open source, adresujące wiele kart przeglądarki i stan klienta dla nowszych przeglądarek? [Zamknięte]


11

Istnieje kilka nowych funkcji HTML5, które wprowadziły go do najnowszych przeglądarek, które umożliwiają udostępnianie stanu między kartami, oknami przeglądarki, oknami tej samej domeny itp. Więc prawdopodobnie łatwiej było napisać aplikację internetową, która utrzymuje dużo stanu na klient, a także inteligentnie zarządza stanem między kartami i / lub oknami.

Obecnie istnieją biblioteki takie jak Backbone.js, które mogą pomóc zarządzać stanem w pojedynczej zakładce lub pojedynczym oknie. Czy jest jeszcze coś, co pomaga w wielu kartach (lub oknach) zarządzających stanem globalnym, stanem specyficznym dla kart i zdarzeniami między kartami bez polegania na serwerze, aby zsynchronizować je wszystkie?


2
Niektóre aplikacje internetowe (np. Trello) omijają to, po prostu używając WebSockets do synchronizacji wszystkich klientów, czy to w tej samej przeglądarce, czy nie. Ale to może być przydatne. Gdybym pisał taką bibliotekę, zrobiłbym cienką warstwę na polypełniaczu dla SharedWorkers, ponieważ SharedWorkers robi wiele tego, czego potrzebujesz, ale nie jest jeszcze dobrze obsługiwany. Hack, aby to zadziałało, to zdarzenia localStorage, które uruchamiane są nawet wtedy, gdy karty zostały otwarte niezależnie.
mahemoff

1
Nauczył mnie tego mój nauczyciel akademicki HTTP is great (and beutiful) because it is stateless. Odkąd dołączyłem do przemysłu, szukam tego, ale nie mogę go znaleźć. Wszyscy mówią tylko o zachowaniu stanów, które widzisz!
Dipan Mehta

@DipanMehta: jeśli spojrzysz na RFC2616, nie jestem pewien, czy zgodziłbyś się ze swoim nauczycielem na temat „urody” :) Chociaż chciałbym ci powiedzieć, że pomysł „czysto bezpaństwowy” jest naprawdę świetny i uważam, że jest problematyczny że
zarzynamy

Bezstanowy i aplikacja internetowa nie idą tak dobrze razem. Małe rzeczy, takie jak zalogowanie w stanie przenoszenia. Świetnie, jeśli wydajesz tylko małe pliki każdemu, kto o nie poprosi.
psr

Napisałem małą bibliotekę do komunikacji między wszystkimi otwartymi kartami twojej witryny za pomocą sztuczki HTML5.
katamfetamina

Odpowiedzi:


3

Krótka odpowiedź:

Nie można naprawdę przekazywać informacji o stanie z jednej karty do drugiej ...

Długa odpowiedź:

Nie można naprawdę przekazywać informacji o stanie z jednej karty do drugiej, ponieważ byłoby to bardzo poważne naruszenie piaskownicy i bezpieczeństwa.

Możesz jednak pośrednio przekazać stan między dwiema zakładkami poprzez:

Inną opcją byłoby po prostu komunikowanie się za pomocą plików cookie w celu przekazywania informacji między dwiema kartami, ale najprawdopodobniej spowodowałoby to problemy, byłoby wysoce zależne od przeglądarki i wymagało ponownego załadowania strony (i szczerze mówiąc, nigdy tego nie próbowałem i tylko o tym myślałem, ale inni zrobić go ) .

Ponieważ rozszerzenia przeglądarki są oczywiście dość ograniczającą ścieżką, należy podążać drogą komunikacji klient-serwer i opracować system umożliwiający klientom publikowanie zdarzeń na serwerze, które następnie wysyłają je ponownie (lub jakikolwiek inny rodzaj transmisji) innym klientom za pośrednictwem wybranego protokołu komunikacyjnego.


Aktualizacja 1: Jak ktoś wspomniał w komentarzu przed jego usunięciem (nie może wyrazić uznania, ponieważ nie pojawia się w skrzynce odbiorczej, przepraszam)

HTML5 wprowadza window.postMessageAPI.

Przykładem może być post na blogu Johna Resiga na temat przesyłania wiadomości między oknami . I bardzo ciekawe, jeśli spojrzysz na komentarze do tego postu, zauważysz, że ktoś o imieniu Malte wspomina o bibliotece, którą napisali do użycia window.postMessagew nowoczesnych przeglądarkach lub wersji opartej na plikach cookie w starszych przeglądarkach.

Przeczytaj je, aby uzyskać więcej informacji i przykładów:

Aktualizacja 2:

Należy pamiętać, że ponieważ 2012-03-04 specyfikacja HTML5 jest nadal wersją roboczą, więc niektóre funkcje można usunąć . Więc używaj ostrożnie ...


Najwyraźniej się mylę, ponieważ HTML5 rzeczywiście wprowadza interfejs API window.postMessage.
haylem

Ponadto, jeśli przeczytasz blog Johna Resiga na temat Cross-Window Messaging i komentarze, zauważysz, że ktoś o imieniu Malte wspomina o [bibliotece] [3], którą napisali, aby używać go w nowoczesnych przeglądarkach lub wersji opartej na plikach cookie dla starsze przeglądarki, więc moje ciasteczko nie było takie szalone.
haylem

3

Niedawno odkryłem Intercom , który wykorzystuje lokalną pamięć masową do implementacji przesyłania komunikatów między oknami. Pamięć lokalna uruchamia zdarzenie ( onstorage) po zmianie danych, więc odpytywanie nie jest konieczne. Domofon umożliwia komunikację wszystkim stronom w domenie, niezależnie od tego, jak zostały otwarte.


1

Jeśli twoje okna (strony) pochodzą z tej samej domeny (pochodzenia), localStoragemożna ich używać do udostępniania danych i rozgłaszania wiadomości. Należy wziąć pod uwagę, że każde okno (strona) przeglądarki działa w osobnym wątku. Jeśli więc mówimy o komunikacji między oknami, mówimy również o wielowątkowości.

Powinieneś również wziąć pod uwagę niektóre localStorageproblemy z IE:

  • Przeprowadziłem kilka testów dla localStorage w IE8. Po kilku tysiącach zmian w localStorage, okna z tego samego źródła przestają odbierać zdarzenia „przechowywania”. Co więcej, następnie spróbuj odczytać z tego samego elementu localStorage, wartości mogą się różnić w różnych oknach. Powiedziałbym, że IE8 nie obsługuje localStorage

  • IE9 i IE10 wywołują moduł obsługi zdarzeń „storage”, nawet jeśli localStorage zostanie zmienione z tego okna ( jest to niezgodne ze specyfikacją ).

  • Znane są również problemy z IE11 .

Niedawno opublikowałem bibliotekę komunikacji między oknami (wszystkie funkcje opisano w pliku readme). Zapewnia bezpieczne dla wątków udostępnianie danych, transmisję zdarzeń. Rozwiązuje również niektóre problemy z IE (IE8 zdecydowanie nie jest obsługiwany, błąd IE11 z ramką iframe wewnątrz rodzica innego pochodzenia może być rozwiązany tylko przez naprawę IE - czekając na aktualizację IE11).

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.