ps-tcplayer/src/utils/netSpeed.js

Tencent Cloud Player component with Vue2/Vue3 compatibility

export function getSpeedWithAjax(url) {
  return new Promise((resolve, reject) => {
    let start = null;
    let end = null;
    start = new Date().getTime();
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        end = new Date().getTime();
        const size = xhr.getResponseHeader('Content-Length') / 1024;
        const speed = size * 1000 / (end - start)
        resolve(Math.floor(speed) || 0);
      }
      if (xhr.status === 200) {
        end = new Date().getTime();
        const size = xhr.getResponseHeader('Content-Length') / 1024;
        const speed = size * 1000 / (end - start)
        resolve(Math.floor(speed) || 0);
      }
    }
    xhr.open('GET', url);
    xhr.send();
  }).catch(err => { throw err });
}
// 图片绝对地址，图片大小，X kb， 返回网速为 XX kb/s
export function getSpeedWithImg(imgUrl, fileSize) {
  return new Promise((resolve, reject) => {
    let start = null;
    let end = null;
    let img = new Image();
    start = Date.now();
    img.onload = function (e) {
        end = Date.now();
        const timeRange = end - start;
        const speed = fileSize / timeRange * 1000
        resolve(Math.floor(speed) || 0);
    }
    img.src = imgUrl;
  }).catch(err => { throw err });
}

/**
 * 获取本地网络状态
 * @returns 网速值'kb/s'
 */
export async function getLocalNetSpeed() {
  return new Promise(async (resolve, reject) => {
    // 测试图片文件大小单位KB
    const url = 'https://s2.51cto.com/images/202201/07/48d99a3c2aadaf00de53926bb8c1e19a.png?rnd=' + Math.random();
    const imgSize = 113;

    // 10s 超时结束
    setTimeout(() => {
      resolve(0);
    }, 10000);

    const speed = await getSpeedWithImg(url, imgSize).catch(() => 0);
    resolve(speed);
  });

}