https://github.com/syu93/network-latency

A very small library to check network latency and dispatch event when it cross a threshold.
https://github.com/syu93/network-latency

latency network webcomponent

Last synced: 1 day ago
JSON representation

A very small library to check network latency and dispatch event when it cross a threshold.

• Host: GitHub
• URL: https://github.com/syu93/network-latency
• Owner: syu93
• License: mit
• Created: 2021-08-08T02:01:30.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-08-09T20:56:12.000Z (over 3 years ago)
• Last Synced: 2024-09-23T21:21:36.149Z (about 2 months ago)
• Topics: latency, network, webcomponent
• Language: JavaScript
• Homepage:
• Size: 52.7 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# network-latency [![npm version](https://badgen.net/npm/v/network-latency)](https://www.npmjs.com/package/network-latency) [![bundle size](https://badgen.net/bundlephobia/minzip/network-latency)](https://bundlephobia.com/package/network-latency)

A very small library to check network latency and dispatch event when it cross a threshold.

## Install

```bash

$ npm i network-latency

```

## How it work

The `checkConnectivity` method, is a simple utility method that calculate the network latency by loading a small image multiple times, and compute an average response time. If this response time is above the threshold, it fire a *connection-changed* event.

## Usage

### Library

```js

import checkConnectivity from 'network-latency';

// Call the checkConnectivity method

checkConnectivity({

  url: 'https://www.google.com/images/phd/px.gif',

  timeToCount: 3,

  threshold: 2000,

  interval: 30000 

});

// Add an event listener to listen on the 'connection-changed' event

document.addEventListener('connection-changed', ({ detail }) => {

  // ...

});

```

### Custom Element

****

```html

  const networkLatency = document.querySelector('network-latency');

  networkLatency.addEventListener('online-mode', () => {

    // ...

  });

  networkLatency.addEventListener('offline-mode', () => {

    // ...

  });

```

### API

#### Properties

**url**		`String`	= 	'*https://www.google.com/images/phd/px.gif*'

*The **url** property can be used to define the ressource on wich to do ping calls*

**time-to-count**		`Number`	= 	'*3*'

*The **time-to-count** property can be used to define the number of time to do the request in order to compute an average response time*

**threshold**		`Number`	= 	'*2000*'

*The **threshold** property can be used to define the max average response time to consider online*

**interval**		`Number`	= 	'*2000*'

*The **interval** property can be used to define the interval between ping cycles*

### Events

**online-mode**

*The online-mode event is fired when the average ping response time is under the threshold*

**offline-mode**

*The offline-mode event is fired when the average ping response time is above the threshold*