Можно ли подписаться на наблюдаемое в другом браузере вкладок с помощью rxjs angular 5
У меня есть приложение angular, и есть две страницы, и я открываю их на каждой вкладке браузера, если я использую какой-либо метод на странице 1, я хочу, чтобы страница 2 подписывала изменение данных с помощью rxjs и обновляла данные на странице 2, как приложение в реальном времени, это есть ли способ сделать это без веб-сокета? Я пробовал его с помощью метода подписки, но только страница 1 слушает, что подписывается. это страница 1, называемая методом обновления для обновления логического значения
this.service.doRefresh();
страница 2 прослушать
this.service.$refresh.subscribe(x=>{//boolean value changed by page 1(tab1)
if (x) {
console.info(x);
this.service.stopRefresh();
}
});
Итак, что я могу сделать, чтобы просто обновить данные без веб-сокета?
Один из способов - обновить базу данных Firebase в реальном времени с вкладки 1, тогда вкладка 2 будет перенесена в обновление автоматически.
Считается, что можно использовать без запроса серверной части, чтобы использовать BroadcastChannel
Есть rx-postmessenger
@JEY К сожалению, поддержка BroadcastChannel в браузере пока не очень хороша: caniuse.com/#feat=broadcastchannel
@RichardMatsen Эта библиотека использует window.postMessage, который требует ссылки на окно, с которым вы общаетесь. С отдельными вкладками он не сможет этого сделать. Я считаю, что он был предназначен для общения с фреймами на странице или всплывающими окнами, порожденными из нее.
@bygrace решение состоит в том, чтобы прослушивать событие в хранилище, как предложил YourGoodFriend.
@JEY Вы правы, он мой хороший друг;) Я знал, что он уже решил эту проблему в своем приложении, и предложил ему дать здесь ответ. Но меня заинтересовали другие предложения, и я хотел для полноты картины затронуть обнаруженные мною недостатки.
@bygrace - Действительно, отсутствие поддержки браузера - убийца для BroadcastChannel.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Фактически вы можете добавить прослушиватели событий в localStorage, чтобы вы могли использовать localStorage для «передачи сообщений» между вкладками.
localStorage.setItem('yourKeyName', true)
window.addEventListener('storage', (event) => {
if (event.key == 'yourKeyName'){
//update data
}
});
Поэтому, когда вы меняете значение чего-либо в localStorage на одной странице, другая страница может подписаться на событие изменения.
Поддержка браузера и дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage#Browser_compatibility
Хорошо, я попробую и пришлю вам, ребята, обновление после попытки кода выше
@Mamen у тебя была возможность попробовать? Дайте мне знать, если у вас возникнут вопросы по этому поводу
да, вы правы, мы можем подписаться на локальное хранилище, это пакет npm, который я использовал для своего проекта ngx-webstorage, он поможет вам, ребята, легко понять. Спасибо
Очень красивое и простое решение! Спасибо !
не у каждой вкладки есть собственный экземпляр приложения.