Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

rxjs
subject

What are RxJS Subject classes?

Usman Younas

An RxJS Subject is a special type of Observable thru which values can be multicasted to many Observers at a time. As plain Observables are unicasteach subscribed Observer owns an independent execution of the Observable, Subjects are multicast.

RxJS have different classes of Subjects for different use cases, like:

  1. Behavior Subjects
  2. Async Subjects
  3. Replay Subjects

Each Subject class covers a specific use case. We will build a project for each case.

Behavior subject

Behavior Subject buffers the latest emitted value and pushes that value to every new Observer that subscribes to it.

To better understand the usage of Behavior Subject, we will discuss a scenario where Behavior Subject is being used and then implement that scenario in RxJS.

Scenario

In a group chat room, every new user can be greeted with a default Welcome message. After some chit-chat between the initial users, someone who is late to the party always decides to join. However, the chat only allows one previously sent message to be seen by the newly joined users. So, how do we implement his scenario using RxJS?

Behavior Subject will help us to buffer the latest message and push that message to every new user who joins the party.

foo
main.js
<html>
	<head>
		<script src="/main.js"></script>
	</head>
</html>

Notice how John and Mike both receive the default chat room welcome message when they join. Meanwhile, Tim, who is late, receives the last message sent by either John or Mike, so he can get a glimpse of what they were discussing.

We can configure the chat room to store some of the previously exchanged messages for the newly joining user to be able to catch up on the conversation by using Replay Subject.

Replay Subject

Replay Subject can send some previous values to the new Observers. To do this, the replay Subject must store a certain amount of emitted values in an internal buffer and constantly update that buffer as new values are pushed to the Subject.

Let’s implement the above scenario using ReplaySubject by enabling the chat room to keep track of the last ten messages that were exchanged.

foo
main.js
const { ReplaySubject } = require("rxjs")

const defaultWelcomeMessage = "Welcome to the chat room";
const chatRoomSubject = new ReplaySubject(10);

const sendMessage = (userFrom, userMessage) => {
    chatRoomSubject.next(userFrom + ":" + userMessage);
}

const john = chatRoomSubject.subscribe(val => {
    console.log('----John Room----');
    console.log(val);
    console.log('------------------');
})

const mike = chatRoomSubject.subscribe(val => {
    console.log('----Mike Room----');
    console.log(val);
    console.log('------------------');
})
setTimeout(() => sendMessage('john', 'Hello, its John here'), 2000);
setTimeout(() => sendMessage('mike', 'Hi everyone, I am Mike'), 300);
setTimeout(() => sendMessage('mike', 'Hi John, how are you doing?'), 2500);

setTimeout(() => {

    const tim = chatRoomSubject.subscribe(val => {
        console.log('----Tim Room----');
        console.log(val);
        console.log('------------------');
    })

}, 3000);

Async Subject

Async Subject works based on a simple principle: Every subscriber to an AsyncSubject receives the last emitted value only when the execution completes.

Let’s demonstrate this with a quick example:

foo
main.js
const { AsyncSubject } = require("rxjs")

const asyncSubject = new AsyncSubject();

asyncSubject.subscribe(val => {
    console.log("value received: " + val)
})

asyncSubject.next('first value');
asyncSubject.next('second value');
console.log('2 Values were sent to the subject')
asyncSubject.complete();

As you can see in the code given above, two values were sent to the AsyncSubject and there is only one subscriber. Therefore, after the complete execution, the subscriber will receive the last emitted value, the second value.

Regardless of the number of subscribers to an AsyncSubject, every subscriber will only receive the last value when the Subject completes.

RELATED TAGS

rxjs
subject

CONTRIBUTOR

Usman Younas
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring