Tartalomjegyzék

JavaScript - RxJS

JavaScript - RxJS

Szerző: Sallai András
Copyright © Sallai András, 2023
Licenc: CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

A megfigyelhetők

A megfigyelhetők angolul Observables.

Az Observables, egy új primitív típus, ami lehetővé teszi, folyamok kezelését, amelyekre előfizethetünk, reagálhatunk új értékekre stb.

A folyamokat kombinálhatjuk, amelyekből újabb folyamok készíthetők.

A kérdés az ECMAScript szabványba bekerül-e az Observables? Amíg nincs benne az olyan könyvtárakat használhatjuk mint a RxJS.

Az RxJS a Reactive Extensions for JavaScript szavakból alkotott betűszó, és egy olyan könyvtár, amit Observables-t biztosít JavaScript nyelven.

A megfigyelők lusták. Addig nem termelnek adatokat, amíg fel nem iratkozunk azokra.

subscribe() - Feliratkozás az adatfolyamra.
unsubcribe() - Leiratkozás az adatfolyamról.

NodeJS projektben

npm init -y
npm install rxjs

npm install --save-dev lite-server

Készítsünk egy bs-config.json fájlt, a lite-server számára, így használhatjuk a node_modules/rxjs/dist/bundles/ könyvtár állományait, úgy mintha egy könyvtárban lennének az src könyvtár állományaival:

bs-config.json

{
    "server": [
        "src",
        "node_modules/rxjs/dist/bundles"
    ]
}

A HTML fájlban a rxjs.umd.min.js fájlt csatoljuk:

src/index.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <title>RxJS példa</title>
</head>
<body>
 
    <h1>Valami</h1>
 
    <script src="rxjs.umd.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

JavaScriptből, így elérhető az rxjs objektum, amelyből most az interval() függvényt használjuk:

src/app.js

const { interval } = rxjs;
 
const numbers = interval(5000);
 
numbers.subscribe({
    next: res => {
        console.log(res);
    }
})

Az Angular projektekben TypeScriptet használunk, így másként kell az importálást végrehajtani.

Take operátor

src/app.js

const { interval } = rxjs;
const { take, map } = rxjs.operators;
 
const numbers = interval(1000);
const fif = numbers.pipe(
    take(5),
    map( res => Date.now())
)
 
fif.subscribe({
    next: res => {
        console.log(res);
    }
})

Eredmény:

Map

src/app.js

const { interval } = rxjs;
const { take, map } = rxjs.operators;
 
const numbers = interval(1000);
const fif = numbers.pipe(
    take(5),
    map( res => Date.now())
)
 
fif.subscribe({
    next: res => {
        console.log(res);
    }
})

1681415031971
1681415032970
1681415033970
1681415034970
1681415035970

From

A from() metódus segítségével egy többől megfigyelhető objektumot készítünk:

src/app.js

const { from } = rxjs;
const { map } = rxjs.operators;
 
from([4, 8, 6, 2, 7])
    .pipe(map(res => res * 2))
    .subscribe({
        next: res => {
            console.log(res);
        }
    })

A from() függvény létrehoz egy Observable objektumot.
A map() függvény minden értéket felszoroz 2-vel.
A subscribe() függvénnyel feliratkozunk az eredményre.

Az Observable metódusai

Ha feliratkozunk egy Observable objektum értékeire, három metódust kapunk vissza.

Metódusok:

next
error
complete

A három metódus leírása:

A next() akkor hajtódik végre, amikor megérkezik a következő adat.
A error() hiba esetén.
A complete() ha befejeződött az adatfolyam.

src/app.js

const { from } = rxjs;
 
from([1, 2, 3, 4, 5])    
    .subscribe({
        next: res => {
            console.log(res);
        },
        error: err => {
            console.log(err);
        },
        complete: res => {
            console.log('kész')
        }
    })

Kimenet

1
2
3
4
5
kész

fromEvent

Feliratkozás eseményre.

src/app.js

const { fromEvent } = rxjs;
 
const goButton = document.querySelector('#goButton');
 
 
const observer = {
    next: res => {
        console.log(res);
    },
    error: err => {
        console.log(err);
    },
    complete: res => {
        console.log('kész')
    }
}
 
const observable = fromEvent(goButton, 'click');
observable.subscribe(observer);

Leirtkozás

const observable = fromEvent(goButton, 'click');
 
//Valamikor később, leiratkozhatunk az eseményről.
const subscription = observable.subscribe(observer);
subscription.unsubscribe();

A Subject

A Subject egy speciális megfigyelő típus. Lehetővé teszi egyszerre több érték küldését.

A következő példában két Observer van egy Subject-hez kapcsolva.

src/app.js

const  Subject  = rxjs.Subject;
 
sub = new Subject();
sub.subscribe({
    next: res => console.log('A', res)
})
sub.subscribe({
    next: res => console.log('B', res)
})
 
sub.next(1);
sub.next(2);

A Promise és az Observable

Ha az Promise-on keresztül benyújtunk egy kérelmet, akkor biztosak lehetünk abban, hogy ugyanarra a kérésre nem érkezik több válasz. A Promise a feloldó függvénynek elsőnek átadott értékkel véget ért, figyelmen kívül hagyja a további hívásokat.

Ezzel szemben az Observable lehetővé teszi több érték feloldását mindaddig, amíg meg nem hívjuk az observable.complete() függvényt.

A Promise objektumok tervezésüknél fogva buzgók. Az Promise konstruktor meghívása után azonnal elkezdi végrehajtani a megadott feladatot.

Ezzel szemben az Observable addig nem hajtódik végre, amíg valaki fel nem iratkozik rá.

A Promise kérés lemondását az ES6 még nem támogatja. Ha ilyet szeretnénk, a bluebird vagy az axios programozói könyvtárakat használhatjuk.

Az Observable esetén eltárolhatjuk a feliratkozást egy Subscription objektumban, amin keresztül leiratkozhatunk az unsubscribe() függvénnyel.

szit

Felhasználói eszközök

Eszközök a webhelyen

Tartalomjegyzék

JavaScript - RxJS

A megfigyelhetők

NodeJS projektben

Take operátor

Map

From

Az Observable metódusai

fromEvent

A Subject

A Promise és az Observable

Linkek

Eszközök az oldalon