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

相关推荐

小巧的JS测试框架:AVA

【前言】 常见的JS测试框架有Jest,Mocha等, 今天介绍一个小巧的JS测试框架:ava, https://github.com/avajs/ava

规范的代码提交:Conventional Commits

【前言】 本文介绍如何提交规范的commit msg, 规范的commit msg可以看这个网站: https://www.conventionalcommits.org/en/v1.0.0/ 【commitizen】 可以手动提交符合规范的commit msg,如下 手动提交符合规范的msg比较麻

一篇文章开发todolist

【前言】 本文实战开发一个todolist, 基于以下技术栈: react:开发ui, https://reactjs.org/ webpack,构建前端项目, https://webpack.js.org/ localStorage,存储数据, https://developer.mozilla.

一篇文章学会IndexedDB

【简介】 IndexedDB,web端可以直接使用的数据库,详见: https://developer.mozilla.org/zhCN/docs/Web/API/IndexedDB\API 【IndexedDB vs LocalStorage】 之前介绍了LocalStorage:一篇文章学会lo

初始化前端Monorepos项目

【前言】 本文记录初始化一个前端Monorepos项目的过程 【LICENSE】 如果是开源项目, 需要添加LICENSE, 一般推荐使用MIT LICENSE, 模板如下, 其中copyright那一行, 可以替换为自己的信息。 【git】 git的一些基础设置 设置git账号信息 配置gitig

一篇文章学会LocalStorage

【简介】 LocalStorage,即本地存储,详见: https://developer.mozilla.org/zhCN/docs/Web/API/Window/localStorage 【cookie vs LocalStorage】 服务端是否可以获取? cookie:服务端可以获取,每次请

mantine-ui快速上手

【前言】 2023年,前端开发的ui框架应该用哪个呢, 一些基本的诉求: 1.支持pc和移动端 2.支持黑夜&白天主题切换 3.组件丰富 4.支持react 4是技术栈选择,非通用 按以上要求在github上快速搜索下react相关ui库, 从start数,issues数,最后commit时间等维度

前端Monorepos项目使用npm-workspaces

【前言】 之前一直使用 lerna 来管理前端 monorepos 项目, 今天升级 lerna 后发现不支持 bootstrap 命令了, 替换为了 npm 的 workspaces 相关命令。 【lerna bootstrap】 lerna 的相关使用可以看这篇文章, 一文学会用Lerna管理多

Nx-VS-Lerna

【前言】 nx和lerna都是优秀的monorepos工具, 本文来对比一下两者的不同, https://nx.dev/ https://lerna.js.org/ 对比之前可以先看下面两篇文章, 了解nx和lerna的基本使用, 一文学会用Lerna管理多个npm包 强大的构建系统:NX 【任务执

强大的构建系统:NX

【前言】 nx是一个强大的构建系统, 这么说可能比较模糊, 本文实践一个项目,带大家了解nx, 感兴趣的也可以自己探索: https://nx.dev/ nx一些典型的应用场景: 1.基于package的monorepo管理 2.完整的前端项目管理 3.react,angular等项目管理 4.no

一篇文章了解JS并行任务

【前言】 在开发过程中大部分场景是顺序执行代码, 也有场景要求并行执行多个任务, 本文研究下如何高效的并行执行任务。 【并行场景】 常见并行执行任务的场景 1.并行执行多个请求 2.并行下载文件 【并行任务】 上述场景中任务的共同点是 1.多个任务没有依赖关系 2.多个任务完成耗时不确定 3.要求最

一篇文章学会Webpack5.x

【前言】 Web前端构建离不开webpack, 众所周知webpack的配置很多很复杂, 甚至可以设置“webpack配置工程师”, 本文抓住webpack核心概念, 和业务开发中常用配置进行讲解, 争取一篇文章学会webpack使用和配置。 【常用文档】 webpack官网 webpack手册:可

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