J'étudie Angular, et actuellement je travaille sur le sujet des Observables. Je comprends maintenant ce que sont les observables, y compris Subject, BehaviorSubject, ReplaySubject. Mais j'ai besoin d'un exemple concret où ceux-ci peuvent être pratiquement implémentés avec des différences afin que je puisse comprendre quand utiliser quelle méthode.
Par exemple, toute application dans laquelle je peux voir / comparer l'implémentation des méthodes ci-dessus.
3 Réponses :
J'ai utilisé un sujet de comportement pour envoyer un message entre le composant parent et enfant et entre le composant frère.
Ceci est un exemple de sujet de comportement, cela peut vous aider https://stackblitz.com/edit/behavior-subject-2019
Merci, mais je souhaite voir un exemple d'application en temps réel, par exemple, un site Web où les utilisateurs peuvent diffuser en direct le score ou tout autre exemple. À partir de cet exemple Live, je pense que je peux mieux comprendre les concepts.
Vous utilisez BehaviorSubject au lieu de Subject lorsque vous voulez avoir une valeur initiale (par défaut) du flux.
Supposons que vous vouliez vérifier si l'utilisateur connecté:
avec Subject
isLoggedIn$ = new BehaviorSubject<boolean>(false); // <---- You give 'false' as an initial value ......... isLoggedIn$.subscribe(res => console.log(res))
Cet abonnement sera ne pas déclencher tant que isLoggedIn $ .next (someValue) n'est pas appelé.
Mais avec BehaviorSubject
isLoggedIn$ = new Subject<boolean>(); ......... isLoggedIn$.subscribe(res => console.log(res))
Cet abonnement se déclenchera immédiatement car il contient false comme valeur dans le flux.
Donc, si vous voulez une valeur initiale (par défaut), vous devez utiliser BehaviorSubject.
https://medium.com/@luukgruijs/understanding-rxjs-behaviorsubject-replaysubject-and-asfyncsubject1
Voici un exemple pratique et une petite explication. disons que vous avez une application avec de nombreux composants par exemple: panier, vous avez une barre de navigation affichant les articles ajoutés au panier. vous avez une page de produits, une grille d'articles avec de nombreux bouton Ajouter au panier. page de détail du produit où vous avez un bouton Ajouter au panier pour ce produit. et enfin la page de récapitulatif de la commande (c'est-à-dire la page du panier où vous avez des boutons pour chaque produit de la liste pour ajouter + ou supprimer -.
Dans le scénario ci-dessus, vous pouvez utiliser Subjects ou BehaviorSubject sur le cartService. et tous les autres composants y souscrivant via l'injection de dépendances de service. Le bouton Ajouter au panier invoquera la fonction next () du service.
Si vous souhaitez que le panier soit pré-rempli à partir du stockage local du navigateur (ou d'un autre mécanisme) lorsque l'utilisateur a quitté la session en sélectionnant simplement les articles dans le panier mais n'a pas terminé le processus de transaction. Vous pouvez utiliser BehaviorSubject pour effectuer ce chargement initial dans le panier.
Pour étendre ce que @Harun Yilmaz a écrit, le statut de l'utilisateur connecté devait être vérifié à partir d'une partie différente de l'application d'une seule page dans ce cas, vous peut utiliser en conséquence, pour vérifier si le statut de connexion de l'utilisateur est toujours valide.
Ne vous méprenez pas avec le streaming Web et le streaming de messages. la diffusion de messages fonctionne en conjonction avec des flux d'événements. Veuillez ne pas vous tromper. par exemple: le web streaming est l'endroit où vous par exemple: socket où vous établissez d'abord une connexion, puis échangez des paquets de données comme le streaming.
En angular aussi, cela fonctionne de la même manière que vous établissez une connexion en vous abonnant au asObservable () . échanger des données comme des flux de messages. Un BehaviorSubject vous envoie un message de bienvenue tandis que le sujet n'envoie aucun message jusqu'à ce que next () soit appelé
Vous allez au restaurant et le serveur vous salue vous BehaviorSubject serveur de manière proactive vous salue (comment puis-je vous aider) lorsque vous appelez Subject tous les serveurs de l'étage fournissent le service souscrit par le restaurant propriétaire.
J'espère que cela vous aidera à comprendre
MISE À JOUR le 22/06/2020
Les sujets mentionnés ci-dessus sont liés à la programmation réactive . ce qui signifie que le carénage de l'application réagit à un événement. les événements peuvent par défaut les événements du navigateur comme click mouesevent ou tout événement personnalisé qui peut être émis. par exemple. lorsque l'utilisateur ajoute au panier, passe la commande. Il est appelé réactif car les événements sont incertains et nous ne savons pas quand cela va se produire. par exemple. vous vous abonnez à une chaîne youtube parce que vous ne savez pas quand le créateur publiera une nouvelle vidéo, vous définissez donc une sorte d'observateur d'événements. qui cherchera constamment que cet événement se produise.
donc si je crée un exemple d'application youtube d'une seule page sans serveur impliqué. Vous aurez un creatorcomponent , viewercomponent , publishService .
lorsque le créateur publie une vidéo ou la publie, il appelle le publishService et envoie un message 'new_video_published' qui s'abonne à ce créateur recevra la notification et viewerComponent apprend à le connaître.
maintenant si le publishService utilise un BehaviorSubject pour faire passer le message, le nouvel abonné (spectateur) recevra immédiatement la dernière vidéo publiée par ce créateur. Si punlishService utilise Subject , le nouvel abonné ne recevra aucun message immédiat mais tous les messages à venir.
publish.service.ts
this.publishService.newPublish('new video on Rxjs on 22/02/20')
viewer.component.ts
//injecting service
subscribedOn_21022020(){
this.publishService.subscribeMes$.subscribe(n=>{
this.newVideo =n
})
}
subscribedOn_23022020(){
this.publishService.subscribeMes$.subscribe(n=>{
this.newVideo = n
})
}
creator.component.ts
... other code ...
subscribeMes$ = new Subject<string>();
//OR
//subscribeMeb$ = new BehaviorSubject<string>('Welcome Message');
newPublish(srting) {
this._name.next(string);
}
dans l'exemple ci-dessus, nous voyons que lorsque l'application se charge pour la première fois le 21-02-2020 dans le navigateur car il n'y a pas de vidéo publiée (scénario d'événement hypothétique). le subscribedOn_21022020 () ne recevra aucun message de bienvenue lorsque le publish.service.ts utilise Subject. Dans le cas où BehaviorSubject a été utilisé, ils auraient reçu le Message de bienvenue . Le 22/02/2020 le créateur publie une vidéo pour que subscribedOn_21022020 () reçoive le nouveau message vidéo, (en cas de BehaviorSubject il aurait été son deuxième message). Désormais, le 23-02-2020, un deuxième utilisateur s'abonne subscribedOn_23022020 () aujourd'hui, il ne recevra aucun message immédiatement mais recevra à tout moment une nouvelle notification de publication vidéo car le service de publication utilise Subject. Dans le cas où BehaviorSubject était utilisé, le deuxième abonné aurait reçu le message 'new video on Rxjs on 22/02/20' immédiatement après l'abonnement. et continuez à regarder de futures vidéos.