eta_front/src/utils/TimeOnPage.js

//计算账号累计活跃时长
import setting from '@/mixins/theme.js'
import {timeOnPage , recordActiveLogin} from '@/api/api.js';
//活跃时间间隔 (s)
const TimeInterval = 60*10
//页面停留时间 (s)
let stayTime = 0


//活跃时间记录计时器 1分钟记录一次
let intervalTimer=null

export const openLoginTimer=()=>{

  clearInterval(intervalTimer)
  intervalTimer = setInterval(()=>{
    let ActiveTime=0
    if(localStorage.getItem('loginTime')){
      ActiveTime = (new Date()-new Date(localStorage.getItem('loginTime')))/1000
      console.log("间隔记录时长",ActiveTime+'s');
      recordActiveLogin({ActiveTime:Math.round(ActiveTime)}).then(res=>{
        if(res.Ret!==200) return
      })
    }
  },1000*60)
}

export const recordActiveLoginFun=(time)=>{
  let inactiveTime = time || new Date()
  let ActiveTime=0
  if(localStorage.getItem('loginTime')){
    ActiveTime = (inactiveTime-new Date(localStorage.getItem('loginTime')))/1000
    console.log("结束计算时长",ActiveTime+'s');
    recordActiveLogin({ActiveTime:Math.round(ActiveTime)}).then(res=>{
      if(res.Ret!==200) return
    }).finally(()=>{
      // 清除工作
      clearInterval(intervalTimer)
      // localStorage.removeItem('loginTime')
    })
  }
}

let timer = null

//打开计时器
export const optionTimeCalc = ()=>{
  const IsActive = sessionStorage.getItem('IsActive')
  // console.log(IsActive,'IsActive');
  if(Number(IsActive)===0){
    //console.log('打开计时器')
    sessionStorage.setItem('IsActive',1)
    timeStr = new Date().getTime()
    startCalc()
  }
  
}
//开始计时
export const startCalc = ()=>{
  sessionStorage.setItem('preTitle',document.title)
  timer = setInterval(()=>{
    stayTime++
    if(stayTime>=TimeInterval){
      endCalc('timeup',0)
    }
  },1000)
}

//结束计时
export const endCalc = (type,intervalT)=>{
  //console.log('关闭计时器')
  clearInterval(timer)
  const IsActive = sessionStorage.getItem('IsActive')
  if(Number(IsActive) && localStorage.getItem('auth')){
     sendTOPInfo(type,intervalT)
  }
  stayTime = 0
  /* if(type==='timeup'){
    sessionStorage.setItem('IsActive',0)
  } */
  timeStr = new Date().getTime()
  sessionStorage.setItem('IsActive',0)
}

// 退出登录时的结算
export const loginEndCalc=()=>{
  let t = new Date().getTime() - timeStr
  //console.log('待了时长replacestate：'+ t)
  const IsActive = sessionStorage.getItem('IsActive')
  if(Number(IsActive)){
    endCalc('logout',t)
  }
}

//发送活跃时长数据
export const sendTOPInfo = (type,intervalT)=>{
  //获取上一个页面标题
  const Title = sessionStorage.getItem('preTitle')
  //console.log('发送活跃时长数据 ↓↓↓')
  //获取计时间隔时间和页面名称
  if(type==='timeup'){
    console.table([{'停留时间(timeup)':stayTime+' s','停留页面':Title}])
  }else{
    console.table([{'停留时间(other)':Number(intervalT)/1000+' s','停留页面':Title,'触发类型':type}])
  }
  const Part = Title.split('-').length>1?Title.split('-')[1]:Title
  const ActiveTime = type==='timeup'?stayTime:Number(intervalT)/1000
  //发送数据
  if(!Part.length||Part==setting.name) return
  if(ActiveTime>TimeInterval*12) return
  console.log("ActiveTime:",ActiveTime,"Part:",Part)
  timeOnPage({
    ActiveTime:Math.round(ActiveTime),
    Part:Part
  }).then(res=>{
    if(res.Ret!==200) return
  })
}

//路由监听部分 
//source https://juejin.cn/post/6905913200060366862#heading-2


let timeStr=null
let rewriteHis = function(type){
  let origin = window.history[type]
  return function(){
    let rs = origin.apply(this, arguments)
    let e = new Event(type.toLocaleLowerCase())
    e.arguments = arguments
    window.dispatchEvent(e)
    return rs
  }
}

export function init(){
  // const unloadT = sessionStorage.getItem('unloadT')
  // console.log("init",unloadT,IsActive);
  // if(unloadT){
  //   //console.log('刷新该页呆了时长',unloadT)
  //   sessionStorage.removeItem('unloadT')
  //   sessionStorage.setItem('preTitle',document.title)
  //   if(Number(IsActive)){
  //     endCalc('unload',unloadT)
  //   }
  // }
  // timeStr = new Date().getTime()
  sessionStorage.setItem('IsActive',0)
  optionTimeCalc()
  // const IsActive = sessionStorage.getItem('IsActive')

  // if(Number(IsActive)){
  //   sessionStorage.setItem('unloadT',t)
  // }
  if(localStorage.getItem("loginTime") && localStorage.getItem('auth')){
    openLoginTimer()
  }
}

export const doPageEventListener=function(){

  // init() 放在router.afterEach中，不然一开始拿不到正确的页面标题

  window.history.pushState = rewriteHis('pushState')

  window.history.replaceState = rewriteHis('replaceState')

  //刷新加载完成 
  // 因为监听改位置了，每次路由刷新时，由于需要等待接口返回，需要先判断是否有 权限才能监听，这时候onload已经执行了，根本监听不到
  // window.addEventListener('load',(e)=>{
    // const unloadT = sessionStorage.getItem('unloadT')
    // const IsActive = sessionStorage.getItem('IsActive')
    // if(unloadT){
    //   //console.log('刷新该页呆了时长',unloadT)
    //   sessionStorage.removeItem('unloadT')
    //   sessionStorage.setItem('preTitle',document.title)
    //   if(Number(IsActive)){
    //     endCalc('unload',unloadT)
    //   }
    // }
    // timeStr = new Date().getTime()
    // optionTimeCalc()
  
    // if((!localStorage.getItem("loginTime")) && localStorage.getItem('auth')){
    //   // 初始化的时候 先重置最近登录时长
    //   recordActiveLogin({ActiveTime:0}).then(res=>{
    //     if(res.Ret!==200) return
    //   })
    //   openLoginTimer()
    // }
  // })
  //刷新离开页面
  window.addEventListener('beforeunload',(e)=>{
    console.log('beforeunload')
    let t = new Date().getTime() - timeStr
    // const unloadT = sessionStorage.getItem('unloadT')
    const IsActive = sessionStorage.getItem('IsActive')
    console.log("init",IsActive);
    // if(unloadT){
      //console.log('刷新该页呆了时长',unloadT)
      // sessionStorage.removeItem('unloadT')
      // sessionStorage.setItem('preTitle',document.title)
      if(Number(IsActive)){
        endCalc('unload',t)
      }
    // }
    // timeStr = new Date().getTime()
    // optionTimeCalc()
    // const IsActive = sessionStorage.getItem('IsActive')
    // if(Number(IsActive)){
      // sessionStorage.setItem('unloadT',t)
    // }
  })

  //刷新离开页面
  window.addEventListener('unload',(e)=>{
    console.log('unload')
    recordActiveLoginFun()
    // 猜测在unload这里 浏览器不会等待异步返回 清除工作在这进行
    clearInterval(intervalTimer)
    // localStorage.removeItem('loginTime')
  })

  //popstate会在router.before/afterEach 之前触发,所以这里不对计时操作,操作放到before/afterEach
  window.addEventListener('popstate',(e)=>{
    //console.log('popState',e)
    let t = new Date().getTime() - timeStr
    timeStr = new Date().getTime()
    //console.log('待了时长popstate：'+ t)
    sessionStorage.setItem('routerChangeType','popstate')
    sessionStorage.setItem('popStayTime',t)
  })
  
  window.addEventListener('pushstate',()=>{
    let t = new Date().getTime() - timeStr
    timeStr = new Date().getTime()
    //console.log('待了时长pushstate：'+ t)
    const IsActive = sessionStorage.getItem('IsActive')
    if(Number(IsActive)){
      endCalc('pushstate',t)
    }
    optionTimeCalc()
  })
  
  window.addEventListener('replacestate',()=>{
    let t = new Date().getTime() - timeStr
    timeStr = new Date().getTime()
    //console.log('待了时长replacestate：'+ t)
    const IsActive = sessionStorage.getItem('IsActive')
    if(Number(IsActive)){
      endCalc('replacestate',t)
    }
    optionTimeCalc()
  })
  
  document.addEventListener('click',(e)=>{

    //console.log('click',e,e.composedPath())
    //只计算displayMain 的click
    const path = e.composedPath()
    const contentIndex = path.findIndex((item)=>{return item.className==="content-container"})
    if(contentIndex===-1) return 
    //console.log('合法的click')
    const IsActive = sessionStorage.getItem('IsActive')
    console.log(IsActive,'IsActive');
    if(Number(IsActive)===0){
      optionTimeCalc()
    }else{
      //console.log('重置活跃计时')
      //重置活跃时间
      stayTime = 0
    }
  })
}