Connectivity

Detects a slow Meteor connection.

Quick use

Step 1. Add the Connectivity package to your meteor app

meteor add useful:connectivity

Step 2. Use the monitor method in your client code:

Connectivity.monitor({
  'onSlowConnection': function () {
    console.warn('This connection is slow!');
  }
});

API

Connectivity.monitor([config])

Starts monitoring the connection.

• config an optional configuration object containing custom callback methods and options.
  • onError error handler callback.
  • onSlow callback method to be executed when a slow connection is detected.
  • maxLatency an integer representing the maximum accepted latency value (in miliseconds) before considering a connection "slow". Defaults to 2000.
  • retryInterval an integer representing how much time (in miliseconds) should pass between pings. Defaults to 5000.

Example:

Connectivity.monitor({
  onError: function (error) {
    console.warn('Error: ' + error);
  }
  , onSlow: function () {
    console.log('This connection is slow!');
  }
  , retryInterval: 700
  , maxLatency: 150
});

---

Connectivity.isSlow()

Reactively shows if the connection is slow. Example:

someTemplate.js:

Connectivity.monitor();

Template.SomeTemplate.helpers({
  isSlow: function () {
    return Connectivity.isSlow();
  }
});

someTemplate.html:

...
{{#if isSlow}}
  The connection is slow!
{{else}}
  All systems go!
{{/if}}
...

---

Connectivity.latency()

Reactively returns the most recent latency value. Example:

someTemplate.js

Connectivity.monitor();

Template.SomeTemplate.helpers({
  latency: function () {
    return Connectivity.latency();
  }
});

someTemplate.html:

...
<p>The current latency is {{latency}}</p>
...

---

Connectivity.strength()

Reactively returns the connection strength.

• 0 - no connection
• 1 - slow connection
• 2 - good connection

Example - use Connectivity.strength() to create a simple phone-style signal indicator:

signal.js:

Connectivity.monitor({
    maxLatency: 1000
});

Template.Signal.helpers({
  bars: function () {
    var bars = []
      , minHeight = 1
      , heightMultiplier = 10
      , maxStrength = 2; // maximum value for Connectivity.strength()
    for (var i = 0; i <= maxStrength; i++) {
      var height = (i > Connectivity.strength()) ? minHeight : minHeight + i * heightMultiplier;
      bars.push({
        height: height
        , marginTop: maxStrength * heightMultiplier + minHeight - height
      });
    }
    return bars;
  }
});

signal.html:

<template name="Signal">
  {{#each bars}}
    <div class="bar" style="height:{{height}}px; margin-top:{{marginTop}}px"></div>
  {{/each}}
</template>

signal.css:

.bar {
  background-color: #888;
  float: left;
  margin: 1px;
  width: 18px;
}

---