Labs zu RxJS
Aufgaben zu Observales und RxJS.
Aufgaben
Aufgabe 1
Im folgenden Code befindet sich eine Funktion für das Erhalten einer zufälligen Zahl zwischen dem min und max. Zudem befindet sich bereits ein Observable im Code, welches in zufälligen Intervallen einen Wert zurückgeben soll.
Die Aufgabe ist nun das Observable so anzupassen, dass in der Subscription jeweils in zufälligen Abständen ein Wert zurückgegeben wird.
1
2
3
4
5
6
7
8
9
10
11
12
13
| import { Observable } from "rxjs";
function getRandomInterval(min: number, max: number): number {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Observable
const intervalObservable = new Observable<number>();
// subcription
intervalObservable.subscribe((interval) => {
console.log(`Interval: ${interval}ms`);
});
|
Aufgabe 2
Auch bei dieser Aufgabe ist bereits ein wenig Code schon gegeben. Und zwar erneut eine Funktion zum Erhalten einer zufälligen Zahl für die Celsiusgrade.
Auch das Observable ist hier bereits gegeben, dieses emitted alle zwei Sekunden eine neue Random Celsiusgrad Zahl.
Die Aufgabe ist nun beim subscriben auf das Observable, die kommende Celsius Zahl in Fahreinheiten umzuwandeln und dann beide zu loggen.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import { Observable } from "rxjs";
function getRandomDegree(min: number, max: number): number {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const temperatureInC = new Observable<number>((subscriber) => {
setInterval(() => {
subscriber.next(getRandomDegree(0, 45));
}, 2000);
});
temperatureInC.subscribe((celsius) => {
console.log(`Celsius: ${celsius}`);
});
|
Aufgabe 3
In den Docs wurden dir verschiedene Versionen von Subjects vorgestellt. Jede davon hat ihre speziellen Eigenschaften.
Diese sollst du in dieser Aufgabe vertiefen. In der nachfolgenden Vorlage befindet sich ein grober Aufbau, den du erweitern sollt.
Du sollst anhand dieser Vorlage eine Art Chat erstellen, der eine Nachricht an ein Subject schickt. Jede Nachricht soll ausserdem einen Zeitstempel haben.
Ziel ist es, dass du alle bekannten Subjects verwendest. Schlussendlich soll jeweils die Ausgabe der Subjects im <div class="output"> zu sehen sein.
Schreibe dazu die benötigten Funktionen submit, addSubscriptions und complete.
Vorlage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Subject Lab</title>
<script src="https://unpkg.com/rxjs@6.2.0/bundles/rxjs.umd.min.js"></script>
<script>
function submit() {
// TODO: Nachricht zu Subject senden
}
function addSubscriptions() {
// TODO: Subscription starten
}
function complete() {
// TODO: Subject complete
}
</script>
</head>
<body>
<div class="wrapper">
<div class="actions">
<input id="chat" type="text" placeholder="Please enter your message">
<button id="submit">Send</button>
<button id="add-subscriptions">Subscriptions</button>
<button id="complete">Complete</button>
</div>
<div class="output">
<!-- TODO: Für jeden Typ von Subject einen separaten Output-->
</div>
</div>
</body>
</html>
|