Detecting Whether a User Is Online

Preface

How to determine if a user is online, rather than just whether the network is connected.

Online: connected to a network and able to access the internet.

Connected: connected to a network but unable to access the internet.

Detecting Online Status

As mentioned above, to determine if a user is online, you need to check whether the internet is accessible.

Node.js

In Node.js, you can ping some common domains to determine online status.

Here is a utility for this: https://code.insistime.com/#/qiao-ping

Usage:

// use
const res = await ping('insistime.com');

// res
{
  alive: true,
  avg: '3.177',
  host: 'insistime.com',
  inputHost: 'insistime.com',
  max: '3.177',
  min: '3.177',
  numeric_host: 'xx',
  output: '',
  packetLoss: '0.000',
  stddev: '0.000',
  time: 3.177,
  times: [
    3.177,
  ],
}

This way you can use ping to determine online status.

By pinging several of the most common domains, we can determine whether the user is online.

Here is a utility for this: https://code.insistime.com/#/qiao-is-online

Usage:

// use
const res = await isOnline();

// res
'online' or 'offline'

Browser

The browser environment doesn’t have ping capability, so we detect online status by loading an image instead.

Code:

/**
 * isOnline
 * @param {*} src
 * @returns
 */
export const isOnline = (src) => {
  return new Promise(function (resolve, reject) {
    if (!src) return reject(Error("need online img src"));

    let img = new Image();
    img.src = `${src}?r=${Math.random()}`;
    img.onload = () => {
      resolve("online");
    };
    img.onerror = () => {
      resolve("offline");
    };
  });
};

Here is a utility for this: https://code.insistime.com/#/qiao-is-online-browser

Usage:

// use
const res = await isOnline('img url');

// res
'online' or 'offline'

Detecting Offline-to-Online Transition

Now that we can detect online status,

there’s a scenario where you need to detect when a user transitions from offline back to online.

The approach is:

Periodically check online status. After multiple offline results followed by several consecutive online results,

consider the user to have transitioned from offline to online.

Here is a utility for this: https://code.insistime.com/#/offline-to-online

Usage:

|—Node.js

const { offlineToOnline } = require("qiao-is-online");

// callback
// time, interval time, default is 3*1000ms
offlineToOnline(function () {
  console.log("offline-to-online");
}, 3 * 1000);

|—Browser

const { offlineToOnline } = require("qiao-is-online-browser");

// is online img src
const isOnlineImgSrc = "your online img src";

// callback
// time, interval time, default is 3*1000ms
offlineToOnline(
  isOnlineImgSrc,
  function () {
    console.log("offline-to-online");
  },
  3 * 1000
);

Summary

1. Ping in Node.js: https://code.insistime.com/#/qiao-ping

2. Online detection in Node.js: https://code.insistime.com/#/qiao-is-online

3. Online detection in browser: https://code.insistime.com/#/qiao-is-online-browser

4. Offline-to-online detection for Node.js and browser: https://code.insistime.com/#/offline-to-online