Skip to content

Commit

Permalink
feat(core): update to RxJS 6
Browse files Browse the repository at this point in the history
  • Loading branch information
jiayihu committed Jun 17, 2018
1 parent 60cb1bf commit baa787c
Show file tree
Hide file tree
Showing 18 changed files with 8,294 additions and 5,473 deletions.
65 changes: 37 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

[![npm](https://img.shields.io/npm/v/rx-polling.svg)](https://www.npmjs.com/package/rx-polling) [![travis](https://travis-ci.org/jiayihu/rx-polling.svg?branch=master)](https://travis-ci.org/jiayihu/rx-polling)

**rx-polling** is a tiny (1KB gzipped) [RxJS5](http://github.com/ReactiveX/RxJS)-based library to run polling requests on intervals, with support for:
**rx-polling** is a tiny (1KB gzipped) [RxJS >= 5.5](http://github.com/ReactiveX/RxJS)-based library to run polling requests on intervals, with support for:

- pause and resume if the browser tab is inactive/active
- N retry attempts if the request errors
Expand All @@ -12,6 +12,8 @@
3. *consecutive*: it will wait a constant time amount between attempts.
- Observables: it accepts any Observable as input and **it returns an Observable**, which means it can be combined with other Observables as any other RxJS stream.

If you need to support rxjs of version <= 5.4 you must install v[0.2.3](https://github.com/jiayihu/rx-polling/releases/tag/v0.2.3) of rx-polling.

## Demo

A demo of the library is available at [jiayihu.github.io/rx-polling/demo](https://jiayihu.github.io/rx-polling/demo/).
Expand All @@ -27,26 +29,28 @@ npm install rx-polling --save
Fetch data from the endpoint every 5 seconds.

```javascript
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/dom/ajax';
import 'rxjs/add/operator/map';
import { map } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';

import polling from 'rx-polling';

// Example of an Observable which requests some JSON data
const request$ = Observable.ajax({
url: 'https://jsonplaceholder.typicode.com/comments/',
crossDomain: true
}).map(response => response.response || [])
.map(response => response.slice(0, 10)); // Take only first 10 comments

polling(request$, { interval: 5000 }).subscribe((comments) => {
console.log(comments);
}, (error) => {
// The Observable will throw if it's not able to recover after N attempts
// By default it will attempts 9 times with exponential delay between each other.
console.error(error);
});
const request$ = ajax({
url: 'https://jsonplaceholder.typicode.com/comments/',
crossDomain: true
}).pipe(
map(response => response.response || []),
map(response => response.slice(0, 10))
);

polling(request$, { interval: 5000 })
.subscribe((comments) => {
console.log(comments);
}, (error) => {
// The Observable will throw if it's not able to recover after N attempts
// By default it will attempts 9 times with exponential delay between each other.
console.error(error);
});
```

### Stop polling
Expand All @@ -55,15 +59,18 @@ Since `rx-polling` returns an Observable, you can just `.unsubscribe` from it to

```javascript
// As previous example but without imports
const request$ = Observable.ajax({
url: 'https://jsonplaceholder.typicode.com/comments/',
crossDomain: true
}).map(response => response.response || [])
.map(response => response.slice(0, 10)); // Take only first 10 comments
const request$ = ajax({
url: 'https://jsonplaceholder.typicode.com/comments/',
crossDomain: true
}).pipe(
map(response => response.response || []),
map(response => response.slice(0, 10))
);

let subscription = polling(request$, { interval: 5000 }).subscribe((comments) => {
console.log(comments);
});
let subscription = polling(request$, { interval: 5000 })
.subscribe((comments) => {
console.log(comments);
});

window.setTimeout(() => {
// Close the polling
Expand All @@ -76,12 +83,14 @@ window.setTimeout(() => {
You can use the returned `Observable` as with any other stream. The sky is the only limit.

```javascript
// `this.http.get` returns an Observable, like Angular Http class
// `this.http.get` returns an Observable, like Angular HttpClient class
const request$ = this.http.get('https://jsonplaceholder.typicode.com/comments/');

let subscription = polling(request$, { interval: 5000 })
// Accept only cool comments from the polling
.filter(comments => comments.filter(comment => comment.isCool))
.pipe(
// Accept only cool comments from the polling
filter(comments => comments.filter(comment => comment.isCool))
)
.subscribe((comments) => {
console.log(comments);
});
Expand Down
14 changes: 8 additions & 6 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,15 @@
<pre>
<code class="language-javascript">

const request$ = Observable.ajax({
url: 'https://jsonplaceholder.typicode.com/comments/',
crossDomain: true
}).map(response => response.response || [])
.map(response => response.slice(0, 10)); // Take only first 10 comments
const request$ = ajax({
url: 'https://jsonplaceholder.typicode.com/comments/',
crossDomain: true
}).pipe(
map(response => response.response || []),
map(response => response.slice(0, 10)) // Take only first 10 comments
);

let subscription = polling(request$, { interval: 1000 }).subscribe((comments) => {
let subscription = polling(request$, { interval: 3000 }).subscribe((comments) => {
console.log(comments);
});

Expand Down
19 changes: 10 additions & 9 deletions demo/index.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/dom/ajax';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';

import polling from '../lib/';

const request$ = Observable.ajax({
const request$ = ajax({
url: 'https://jsonplaceholder.typicode.com/comments/',
crossDomain: true,
})
.map(response => response.response || [])
.map(response => response.slice(0, 10)); // Take only first 10 comments
crossDomain: true
}).pipe(
map(response => response.response || []),
map(response => response.slice(0, 10)) // Take only first 10 comments
);

let subscription;

Expand All @@ -21,7 +22,7 @@ document.querySelector('.start').addEventListener('click', function() {
subscription = polling(request$, {
interval: 3000,
backoffStrategy: strategy,
attempts: 4,
attempts: 4
}).subscribe(
comments => {
console.group('Received data from polling');
Expand Down
2,598 changes: 2,440 additions & 158 deletions demo/js/main.js

Large diffs are not rendered by default.

Loading

0 comments on commit baa787c

Please sign in to comment.