[JS] Communicatie tussen tab bladen in browser

[Verwijderd]

Devvers,

ik zit met het volgende; ik heb een website waarin men vaak werkt op meerdere schermen. Wel word dezelfde browser gebruikt. Nu wil ik graag het volgende;
- Pagina 1 op beeldscherm 1 doet een AJAX request, hierbij komt er een stukje data terug.
- Pagina 2 op beeldscherm 2 word op de hoogte gebracht van dit stukje data, en doet hier vervolgens iets mee.

Het hoe/waarom/waar lijkt me verder overbodig om te posten, dit is simpel uitgelegd mijn 'probleem'.
Ik had zelf al enkele oplossingen in gedachten:
- Sla de data op in een Cookie, en lees deze uit met javascript in Pagina 2.
Grote nadeel hierbij is, cookies worden verstuurd bij elk request, dit zal dus onnodig dataverkeer veroorzaken.
- Gebruik HTML5 / LocalStorage.
In Chrome heb ik dit werkend gekregen, op pagina 1 doe ik een localStorage.setItem en op pagina 2 een localStorage.getitem en dit werkt. Maar niet in IE11 (of ik doe iets verkeerd?).

De data die opgeslagen word hoeft niet bewaard te worden als de browser gesloten word. Er is verder (behalve het domein waarop het gehost word) geen link tussen de paginas, het is dus niet zo dat pagina 2 geopend is door pagina 1.

[Avalaxy]

Websockets. Met welke tech stack werk je? Ik zou vanaf tab A een request doen naar de server, de server pusht vervolgens via het websocket naar de client op tab B. Aangezien dat één connectie is kun je voor beide tabs dezelfde connectie gebruiken.

[Ramon]

Als je dat stukje data naar tab 1 stuurt kan je het toch net zo makkelijk naar tab 2 sturen?

[krvabo]

Mbt tot je IE11-probleem:
http://blogs.msdn.com/b/i...age-and-localstorage.aspx

3. Changes to localStorage values are not reflected across active tabs/processes

In contrast to sessionStorage, localStorage is meant to be shared across all browser instances, much like a persistent cookie. However, Internet Explorer's new session command does not properly interact with localStorage, so new browser sessions do not properly share localStorage information with other instances.

[Verwijderd]

Avalaxy schreef op maandag 13 april 2015 @ 23:34:
Websockets. Met welke tech stack werk je? Ik zou vanaf tab A een request doen naar de server, de server pusht vervolgens via het websocket naar de client op tab B. Aangezien dat één connectie is kun je voor beide tabs dezelfde connectie gebruiken.

Websockets, tech stack ... op dat moment gebeurt er bij mij
Geen idee waar je op doelt haha. Ik gebruik jQuery voor mn ajax requests en thats it.

Ramon schreef op maandag 13 april 2015 @ 23:35:
Als je dat stukje data naar tab 1 stuurt kan je het toch net zo makkelijk naar tab 2 sturen?

Dat wil ik juist niet, want het aantal tabs kunnen er ook gerust meer zijn. Dat is geen constante.

krvabo schreef op maandag 13 april 2015 @ 23:35:
Mbt tot je IE11-probleem:
http://blogs.msdn.com/b/i...age-and-localstorage.aspx

[...]

Gelezen, lijkt dus een IE11 probleem, en niet een interpretatie fout van mijn kant. Het gaat hier niet om kritieke systemen, dus zo nog in wat meer browsers testen op de machines die gebruikt worden en dan ga ik denk ik toch voor de localStorage oplossing genoemd in de startpost. Mits het wel werkt op de rest natuurlijk.

[Merethil]

Verwijderd schreef op maandag 13 april 2015 @ 23:44:
[...]

Websockets, tech stack ... op dat moment gebeurt er bij mij
Geen idee waar je op doelt haha. Ik gebruik jQuery voor mn ajax requests en thats it.

[...]

Dat wil ik juist niet, want het aantal tabs kunnen er ook gerust meer zijn. Dat is geen constante.

[...]

Gelezen, lijkt dus een IE11 probleem, en niet een interpretatie fout van mijn kant. Het gaat hier niet om kritieke systemen, dus zo nog in wat meer browsers testen op de machines die gebruikt worden en dan ga ik denk ik toch voor de localStorage oplossing genoemd in de startpost. Mits het wel werkt op de rest natuurlijk.

Met websockets maak je een soort van consumer/producer-keten aan waarbij je persoon die op je website komt "inlogt" op een "hub" (of queue, of socket, of hoe je het wilt noemen) en de server berichten kan sturen op die socket die de client (persoon op je website) weer aansporen iets uit te voeren (zoals bijvoorbeeld het aanpassen van data, of het toevoegen/verwijderen van data).

Kijk bijvoorbeeld voor ASP.NET (C# / VBA) naar Signalr (http://signalr.net/) en bij iets als Java naar het Atmosphere framework (http://async-io.org/). Andere talen hebben ook dit soort implementaties, gewoon zoeken naar websockets (eventueel frameworks ervoor) voor jouw specifieke programmeertaal.
Daarnaast: Websockets worden vziw beter ondersteund dan localstorage, en het is "realtime"(-ish )

[Verwijderd]

Ah ok, alles is nu in PHP. Zal er eens naar kijken. Thnx voor de tip! Maar dan nog wil ik sommige data maar 1x naar een client verzenden, en in 2 schermen kunnen tonen

[Merethil]

Verwijderd schreef op maandag 13 april 2015 @ 23:50:
Ah ok, alles is nu in PHP. Zal er eens naar kijken. Thnx voor de tip! Maar dan nog wil ik sommige data maar 1x naar een client verzenden, en in 2 schermen kunnen tonen

Ook voor PHP bestaan er vast wel frameworks of kant-en-klare oplossingen voor websockets. Neemt niet weg dat dit inderdaad een broadcast-all-systeem is in de beginne, valt natuurlijk een hoop in te tweaken, maar als je liever localstorage gebruikt... Niemand die je tegenhoudt

[Ramon]

Verwijderd schreef op maandag 13 april 2015 @ 23:44:

Dat wil ik juist niet, want het aantal tabs kunnen er ook gerust meer zijn. Dat is geen constante.

Dat maakt toch niet uit? Als je een server hebt kunnen er 1, 2 of 100 tabs via ajax data van ophalen.

Met LocalStorage, ga jij de gebruiker vertellen dat hij tab 1 niet mag sluiten omdat dan de data in de andere tabs veroudert is? En hoe krijg je dat weer terug naar de server?

Iets meer context over het daadwerkelijke doel en probleem zou wel handig zijn, want nu lijkt het erop dat je gewoon naar de oplossing toe stuurt die je zelf wil.

[ Voor 24% gewijzigd door Ramon op 14-04-2015 08:40 ]

[Verwijderd]

Binnen de schermen kunnen notificaties worden getoond, deze ophalen van de server is echter best een 'zware' query.
Als er 100 tabs open staan, en al deze tabs gaan dit elke x seconde proberen, is het zwaar onnodig.
Wat ik dus wil is dit cachen op de cliënt, en de tijd van de laatste synchronisatie bijhouden. Zodat ongeacht het aantal windows/tabs dat open staat, dit slechts 1x per x seconde daadwerkelijk via een ajax request word opgehaald. Het resultaat vervolgens opslaan in de localStorage.

Het tonen van de notificaties gaat dan als volgt;
1) Is tijd laatste synchronisatie meer dan x seconde?
ja: Ververs data in localstorage

2) Toon notificaties gevonden in localstorage.

Snap je het idee?

Daarnaast wil ik zo min mogelijk dataverkeer verbruiken. De app word ook gebruikt via wifi hotspots (mobiel) in het buitenland. Elk onnodig request is er dan 1 teveel gezien bijv bij T-mobile het datalimiet voor Europa van 500mb.

[ Voor 14% gewijzigd door Verwijderd op 16-04-2015 16:37 ]

[Avalaxy]

Als ik je post lees dan is websockets echt 100% wat je wilt. Je pusht vanaf je server eenmalig naar alle verbonden clients waardoor iedereen up-to-date is, en het is ook nog eens erg efficiënt qua datagebruikt.