统计 浏览项目的时长、观看每个页面的时长、打开项目的设备信息。

let url = 'http://localhost:3000';
let obj = {
  toPage: '',
  fromPage: document.referrer,
  inTime: new Date(),
  outTime: '',
  openTimeLength: 0,
  currentPage: '',
  viewTimeLength: 0,
  baseInfoId: '',
  userId: '',
  unLoginId: ''
}
let key = '';
let listPage = [];

//获取随机32位 key
(function () {
  var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
  var maxPos = $chars.length;
  var pwd = '';
  for (i = 0; i < 32; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
  }
  key = 'yingjing' + pwd;
})();

//检测上次是否异常关闭浏览器 （发送上次异常关闭数据）
(function () {
  var exceptionKey = ''
  var exception = null
  for (let i = 0; i < window.localStorage.length; i++) {
    exceptionKey = window.localStorage.key(i)
    if (exceptionKey.indexOf('yingjing') != -1) {
      var exception = localStorage.getItem(exceptionKey)
      exception.outTime = new Date()
      window.navigator.sendBeacon(url, exception)
    }
  }
})();

function isHashChanged() {
  var cururl = window.location.href;
  if (obj.toPage != cururl) {
    return false;
  }
  return true;
}

setInterval(function () {
  var cururl = window.location.href;
  var ischanged = isHashChanged();

  if (ischanged) {//无变化
    obj.currentPage = cururl
  } else {//有变化
    listPage.push(cururl)
    obj.toPage = cururl;
    obj.fromPage = listPage[listPage.length - 3] || ''
    localStorage.setItem(key, JSON.stringify(obj))

    obj.viewTimeLength = 0
    var sendData = localStorage.getItem(key)
    var pageInfo = JSON.parse(JSON.stringify(sendData))
    pageInfo.outTime = ''
    window.navigator.sendBeacon(url, pageInfo)
    localStorage.removeItem(key)
  }
  if (document.visibilityState == 'visible') {
    obj.viewTimeLength++
  }
  obj.openTimeLength++
}, 1000);

//监听页面关闭事件
window.onbeforeunload = function onbeforeunload_handler() {
  var closeData = localStorage.getItem(key)
  obj.outTime = new Date()
  window.navigator.sendBeacon(url, closeData)
  localStorage.removeItem(key)
};


// 获取页面基本信息
// 打印浏览器相关信息
var appCodeName = navigator.appCodeName // 返回与浏览器相关的内部代码名  都为Mozilla
var appName = navigator.appName // 返回浏览器正式名称  均为Netscape
var appVersion = navigator.appVersion // 返回浏览器版本
var cookieEnabled = navigator.cookieEnabled // 返回浏览器是否启用cookie，true和false
var javaEnabled = navigator.javaEnabled() // 检测当前浏览器是否支持 Java，从而知道浏览器是否能显示 Java 小程序(IE,chrome返回true，firefox返回false)
var language = navigator.language // 返回浏览器的首选语言
var mimeTypes = navigator.mimeTypes // 浏览器中注册的MIME类型的数组
var platform = navigator.platform // 运行浏览器的操作系统平台，如win32
var plugins = window.navigator.plugins // 返回浏览器插件集合
var product = navigator.product // 浏览器产品名，返回gecko
var userAgent = navigator.userAgent // 判断浏览器类型
var connection = navigator.connection // 设备联网信息
var screen = window.screen.width + '*' + window.screen.height // 屏幕分辨率
var colorDepth = window.screen.colorDepth // 屏幕颜色
var devicePixelRatio = window.screen.devicePixelRatio // 设备的物理像素分辨率与 CSS 像素分辨率的比率
var currentUrl = window.location.href // 当前页面
var preUrl = document.referrer // 上一个页面

postInfo()

// 获取操作系统
function getOsInfo() {
  var sUserAgent = navigator.userAgent.toLowerCase()
  var isWin = (navigator.platform == 'Win32') || (navigator.platform == 'Windows')
  var isMac = (navigator.platform == 'Mac68K') || (navigator.platform == 'MacPPC') || (navigator.platform == 'Macintosh') || (navigator.platform == 'MacIntel')
  if (isMac) return 'Mac'
  var isUnix = (navigator.platform == 'X11') && !isWin && !isMac
  if (isUnix) return 'Unix'
  var isLinux = (String(navigator.platform).indexOf('Linux') > -1)
  if (isLinux) return 'Linux'
  if (isWin) return 'windows'
  else return 'other'
}
// 操作系统版本
function getOsVersion() {
  var userAgent = navigator.userAgent.toLowerCase()
  var version = 'Unknown'
  if (userAgent.indexOf('win') > -1) {
    if (userAgent.indexOf('windows nt 5.0') > -1) {
      version = 'Windows 2000'
    } else if (userAgent.indexOf('windows nt 5.1') > -1 || userAgent.indexOf('windows nt 5.2') > -1) {
      version = 'Windows XP'
    } else if (userAgent.indexOf('windows nt 6.0') > -1) {
      version = 'Windows Vista'
    } else if (userAgent.indexOf('windows nt 6.1') > -1 || userAgent.indexOf('windows 7') > -1) {
      version = 'Windows 7'
    } else if (userAgent.indexOf('windows nt 6.2') > -1 || userAgent.indexOf('windows 8') > -1) {
      version = 'Windows 8'
    } else if (userAgent.indexOf('windows nt 6.3') > -1) {
      version = 'Windows 8.1'
    } else if (userAgent.indexOf('windows nt 6.2') > -1 || userAgent.indexOf('windows nt 10.0') > -1) {
      version = 'Windows 10'
    } else {
      version = 'Unknown'
    }
  } else if (userAgent.indexOf('iphone') > -1) {
    version = 'Iphone'
  } else if (userAgent.indexOf('mac') > -1) {
    version = 'Mac'
  } else if (userAgent.indexOf('x11') > -1 || userAgent.indexOf('unix') > -1 || userAgent.indexOf('sunname') > -1 || userAgent.indexOf('bsd') > -1) {
    version = 'Unix'
  } else if (userAgent.indexOf('linux') > -1) {
    if (userAgent.indexOf('android') > -1) {
      version = 'Android'
    } else {
      version = 'Linux'
    }
  } else {
    version = 'Unknown'
  }
  return version
}

// 获取到用户终端平板电脑或者手机
function operateSystem() {
  var ua = navigator.userAgent
  var isWindowsPhone = /(?:Windows Phone)/.test(ua)
  var isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone
  var isAndroid = /(?:Android)/.test(ua)
  var isFireFox = /(?:Firefox)/.test(ua)
  var isChrome = /(?:Chrome|CriOS)/.test(ua)
  var isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua))
  var isPhone = /(?:iPhone)/.test(ua) && !isTablet
  var isPc = !isPhone && !isAndroid && !isSymbian
  return {
    isTablet: isTablet,
    isPhone: isPhone,
    isAndroid: isAndroid,
    isPc: isPc
  }
}

// 判断当前设备终端类型，平板手机或者pc
function tablet() {
  var os = operateSystem()
  if (os.isAndroid || os.isPhone) {
    return '手机'
  } else if (os.isTablet) {
    return '平板'
  } else if (os.isPc) {
    return '电脑'
  }
}

// 获取浏览器信息
function getExplorerInfo() {
  var explorer = window.navigator.userAgent.toLowerCase()
  // ie
  if (explorer.indexOf('msie') >= 0) {
    const ver = explorer.match(/msie ([\d.]+)/)[1] || ''
    return { name: 'IE', version: ver }
  }
  // firefox
  else if (explorer.indexOf('firefox') >= 0) {
    const ver = explorer.match(/firefox\/([\d.]+)/)[1] || ''
    return { name: 'Firefox', version: ver }
  }
  // Chrome
  else if (explorer.indexOf('chrome') >= 0) {
    const ver = explorer.match(/chrome\/([\d.]+)/)[1] || ''
    return { name: 'Chrome', version: ver }
  }
  // Opera
  else if (explorer.indexOf('opera') >= 0) {
    const ver = explorer.match(/opera.([\d.]+)/)[1] || ''
    return { name: 'Opera', version: ver }
  }
  // Safari
  else if (explorer.indexOf('safari') >= 0) {
    const ver = explorer.match(/version\/([\d.]+)/)[1] || ''
    return { name: 'Safari', version: ver }
  }
  if (explorer.indexOf('edge') >= 0) {
    const ver = explorer.match(/edge\/([\d.]+)/)[1] || ''
    return { name: 'edge', version: ver }
  }
  // 遨游浏览器
  if (explorer.indexOf('maxthon') >= 0) {
    const ver = explorer.match(/maxthon\/([\d.]+)/)[1] || ''
    return { name: '傲游浏览器', version: ver }
  }
  // QQ浏览器
  if (explorer.indexOf('qqbrowser') >= 0) {
    const ver = explorer.match(/qqbrowser\/([\d.]+)/)[1] || ''
    return { name: 'QQ浏览器', version: ver }
  }
  // 搜狗浏览器
  if (explorer.indexOf('se 2.x') >= 0) {
    return { name: '搜狗浏览器', version: '' }
  }
  return { name: '', version: '' }
}

// 登录用户获取用户id，未登录用户生成随机数存储
function getInfo() {
  const res = {
    name: '',
    id: 1111
  }
  var userId = res.id
}

// 时间戳加随机数生成随机数
function randomChar() {
  var str = Math.random().toString(36).slice(-10)
  var timestamp = new Date().getTime()
  return timestamp + str
}

function ajax(option) {
  // 创建异步对象
  var xhr = null
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest()
  } else if (window.ActiveXObject) {
    xhr = new ActiveXObject('Microsoft.XMLHTTP')
  }
  // 如果是get并且有数据
  if (option.type == 'get' && option.data) {
    option.url = option.url + '?' + option.data
  }
  // 设置请求行
  xhr.open(option.type, option.url)
  // 设置请求头(post有数据发送才需要设置请求头)
  // 判断是否有数据发送
  if (option.type == 'post' && option.data) {
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
  }
  // 注册回调函数
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      // 接收返回的数据类型
      var type = xhr.getResponseHeader('Content-Type')
      // json格式
      if (type.indexOf('json') != -1) {
        option.callback(JSON.parse(xhr.responseText))
      }
      // xml格式
      else if (type.indexOf('xml') != -1) {
        option.callback(xhr.responseXML)
      }
      // 普通格式
      else {
        option.callback(xhr.responseText)
      }
    }
  }
  // 发送请求主体
  // 判断不同的请求类型
  xhr.send(option.type == 'post' ? option.data : null)
}
// 发送基础信息
function postInfo() {
  var params = {
    'appCodeName': appCodeName,
    'appName': appName,
    'appVersion': appVersion,
    'cookieEnabled': cookieEnabled,
    'javaEnabled': javaEnabled,
    'language': language,
    'mimeTypes': mimeTypes,
    'platform': platform,
    'plugins': plugins,
    'product': product,
    'userAgent': userAgent,
    'connection': connection,
    'screen': screen,
    'colorDepth': colorDepth,
    'devicePixelRatio': devicePixelRatio,
    'currentUrl': currentUrl,
    'preUrl': preUrl,
    "operatingSystem": getOsInfo(),
    "operatingVersion": getOsVersion(),
    "broswer": getExplorerInfo().name,
    "broswerVersion": getExplorerInfo().version,
    'userId': '1111111',
    'baseInfoId': randomChar(),
    'unLoginId': randomChar()
  }
  ajax({
    type: 'post',
    url: 'http://app.yunjingedu.cn/task-center/api/todo',
    data: JSON.stringify(params),
    callback: function (res) {
      if (res.code == '0') {
        console.log(res.msg)
      }
    }
  })
}