Observing network events with Ionic 2, RxJS5, and the Cordova network plugin

Question

Observing network events with Ionic 2, RxJS5, and the Cordova network plugin

Is it possible to create an RxJS observable using the fromEvent method based on the Cordova network connection plugin?

I am attempting this with Ionic 2.

I have noticed that the Cordova network connection plugin offers two events (online/offline). How can I subscribe to these events using RxJS?

Here is an example of what I am trying to achieve:

const offline$ = Observable.fromEvent(CORDOVA_OFFLINE_EVENT);
offline$.subscribe(
    function (connectionType) {
        console.log("connectionType", JSON.stringify(connectionType));
    },
    function (err) {
        console.log('Error: ' + err);
    },
    function () {
        console.log('Completed');
    }
);

typescript angular ionic2 rxjs5

Answer 1

Answer №1

To achieve this, simply follow the instructions provided in the documentation (

document.addEventListener("offline", onOffline, false);

). In the event handler, you have the option to emit with an EventEmitter or, if preferable, use observables by dispatching a custom event to the document and creating

Observable.fromEvent(document, 'nameofevent')

.

For instance:

window.addEventListener('offline', this.onOffline);
onOffline(e) {
        var event = new CustomEvent('onoffline');
        event['offlineTimestamp'] = new Date()
        document.dispatchEvent(event);
    }

Then, simply do

this.networkObservable = Observable.fromEvent(document, 'onoffline');

Alternatively, instead of using CustomEvent, you can utilize an EventEmitter that emits within the handlers:

networkEmitter = new EventEmitter();
window.addEventListener('offline', onOffline);
    onOffline(e) {
            this.networkEmitter.emit('wentOffline');
        }

You can then subscribe to the EventEmitter or Observable for further functionality :)

Answer 2

To achieve this, simply follow the instructions provided in the documentation (

document.addEventListener("offline", onOffline, false);

). In the event handler, you have the option to emit with an EventEmitter or, if preferable, use observables by dispatching a custom event to the document and creating

Observable.fromEvent(document, 'nameofevent')

.

For instance:

window.addEventListener('offline', this.onOffline);
onOffline(e) {
        var event = new CustomEvent('onoffline');
        event['offlineTimestamp'] = new Date()
        document.dispatchEvent(event);
    }

Then, simply do

this.networkObservable = Observable.fromEvent(document, 'onoffline');

Alternatively, instead of using CustomEvent, you can utilize an EventEmitter that emits within the handlers:

networkEmitter = new EventEmitter();
window.addEventListener('offline', onOffline);
    onOffline(e) {
            this.networkEmitter.emit('wentOffline');
        }

You can then subscribe to the EventEmitter or Observable for further functionality :)

Observing network events with Ionic 2, RxJS5, and the Cordova network plugin

Answer №1

Similar questions

In Angular, what is the best way to update the quantity of an item in a Firestore database?

Issue with Dialogue in React Native - The property 'children' is not found in the types 'intrinsicAttributes' and '

Tips for identifying and handling errors in Playwright

When using react-hook-form within a .map() function, it encounters an issue causing it to fail - specifically, a TypeError message stating "Cannot read properties of undefined (reading '

Checking for duplicate entries in an array created with the Angular form builder

The type 'Node' does not have the required attributes

Angular Ant Design Pagination

Tips for creating a custom observable that reacts to multiple data subscriptions

Step-by-step guide on converting a file upload to a JavaScript object in Angular 11

TypeScript: Unforeseen reserved term

Having trouble with the Typescript validator in my Angular IDE Eclipse Plugin - it doesn't seem

Can someone please provide guidance on how I can access the current view of a Kendo Scheduler when switching between views, such as day view or week

Prevent Angular Router from Initiating NavigationStart

"Enhance your user experience with dual notifications using the Angular2-to

Typescript: Subscribed information mysteriously disappeared

I am unable to npm install on a cloned ngx-datatable repository

MaterialUI Divider is designed to dynamically adjust based on the screen size. It appears horizontally on small screens and vertically on

What is the best way to change the number 123456789 to look like 123***789 using either typescript or

Retrieve ag grid from TypeScript file

Leveraging a returned value from a function in Typescript within a React component