Logo Vincent
返回文章列表

一篇文章判断用户是否在线

Web

【前言】

如何判断用户在线,而不是用户网络是否连通,

在线:连网,可以访问internet

连通:连网,不能访问internet

【是否在线】

如上,判断是否在线,需要检测是否可以访问internet

nodejs

在nodejs下,可以通过ping一些常见的域名来确定,

这里封装了一个工具, https://code.insistime.com/#/qiao-ping

使用方法如下:

// 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,
  ],
}

这样就可以通过ping来判断了,

这里通过ping几个最常见的域名,来判断是否在线,

封装了一个工具, https://code.insistime.com/#/qiao-is-online

使用方法如下:

// use
const res = await isOnline();

// res
'online' or 'offline'

浏览器

浏览器环境下没有ping的能力,这里通过访问img图片来判断是否在线,

代码如下

/**
 * 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');
    };
  });
};

这里封装了一个工具: https://code.insistime.com/#/qiao-is-online-browser

使用如下

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

// res
'online' or 'offline'

【从离线到在线】

如上,可以判断是否在线后,

有一个场景是,需要检测用户从离线恢复到在线状态,

方法是:

定时检测是否在线,多次不在线后连续几次在线,

认为是从离线状态恢复到在线状态,

封装了一个工具, https://code.insistime.com/#/offline-to-online

使用方法如下:

|—nodejs

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

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

|—浏览器

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,
);

【总结】

1.nodejs下ping, https://code.insistime.com/#/qiao-ping

2.nodejs下判断是否在线, https://code.insistime.com/#/qiao-is-online

3.浏览器下判断是否在线, https://code.insistime.com/#/qiao-is-online-browser

4.nodejs和浏览器下判断从离线到在线, https://code.insistime.com/#/offline-to-online

© 2026 vincentqiao.com . 保留所有权利。