websocket心跳检测计算在线时长

Java后端：

package com.xx.framework.web.service;

import cn.hutool.core.util.StrUtil;
import com.xx.common.constant.Constants;
import com.xx.common.core.domain.model.RLoginUser;
import com.xx.common.utils.DateUtils;
import com.xx.common.utils.spring.SpringUtils;
import com.xx.inter.domain.OnlineDuration;
import com.xx.inter.service.IOnlineDurationService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.annotation.PostConstruct;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.*;
@Component
@Slf4j
@ServerEndpoint("/websocket/{key}")
public class WebSocketService {
    private static Map<Long, List<Session>> sessionPool2 = new HashMap<>();
    //存放接收到消息的对象
    private static Map<Session, Boolean> msgPool = new HashMap<>();
    private static WebSocketService webSocketService;
    @PostConstruct
    public void init(){
        webSocketService = this;
    }

    /**
     * 连接成功后调用的方法
     * @param session
     * @param key
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("key") String key){
        //key作为前端传给后端的token
        //从token中获取到的userId当作区分websocket客户端的key
        TokenService tokenService = SpringUtils.getBean(TokenService.class);
        RLoginUser user = tokenService.getRLoginUserByToken(key);
        if (user == null){
            Long userId = (Long) tokenService.parseToken(key).get(Constants.RECEPTION_LOGIN_USER_KEY);
            if (userId != null){
                sessionPool2.remove(userId);
            }
            return;
        }
        Long  userId = user.getUserId();
        if (userId == null){
            return;
        }

        //消息相关客户端的session列表
        List<Session> sessionList = sessionPool2.get(userId);
        if (sessionList  == null){
            sessionList = new ArrayList<>();
        }
        sessionList.add(session);
        sessionPool2.put(userId,sessionList);

        //连接成功后，写个定时器，每15秒检测一下是否收到消息，没有收到则断开
        Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                if (msgPool.containsKey(session)){
                    log.info("收到客户端发来的消息，清空上次收到消息的记录");
                    //检测到收到消息后清空记录
                    msgPool.remove(session);
                }else{
                    log.info("没有收到客户端发来的消息，停止连接");
                    //如果没有收到消息。则断开连接
                    onClose(session);
                    timer.cancel();
                }
            }
        }, 5000, 10000);
        log.info("websocket连接成功");
        //打开连接的时候就是记录下开始时间
        IOnlineDurationService onlineDurationService = SpringUtils.getBean(IOnlineDurationService.class);
        OnlineDuration onlineDuration = new OnlineDuration();
        onlineDuration.setOnlineStatue("0");
        onlineDuration.setUserId(userId);
        onlineDuration.setCreateTime(DateUtils.getNowDate());
        onlineDurationService.insertOnlineDuration(onlineDuration);
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(Session session){
        //根据session获取userId
        Set<Map.Entry<Long,List<Session>>> entrySet = sessionPool2.entrySet();
        //先从pc端获取，再从小程序端获取
        Long userId = null;
        for (Map.Entry entry : entrySet){
            Long id = (Long) entry.getKey();
            List<Session> sessionList = (List<Session>) entry.getValue();
            if (sessionList != null && sessionList.contains(session)){
                userId = id;
                sessionList.removeIf(session1 -> session1.equals(session));
            }
        }
        if (userId == null){
            return;
        }
        log.info("websocket连接关闭");
        //断开连接后就是记录下结束时间
        IOnlineDurationService onlineDurationService = SpringUtils.getBean(IOnlineDurationService.class);
        //查询上一条记录
        OnlineDuration query = new OnlineDuration();
        Map<String,Object> params = new HashMap<>();
        params.put("beginTime",DateUtils.getDate());
        params.put("endTime",DateUtils.getDate());
        query.setParams(params);
        query.setUserId(userId);
        OnlineDuration last = onlineDurationService.selectLastOne(query);
        if (last != null && StrUtil.isNotBlank(last.getOnlineStatue()) && "0".equals(last.getOnlineStatue())){
            OnlineDuration onlineDuration = new OnlineDuration();
            onlineDuration.setCreateTime(DateUtils.getNowDate());
            onlineDuration.setOnlineStatue("1");
            onlineDuration.setUserId(userId);
            long diff = onlineDuration.getCreateTime().getTime() - last.getCreateTime().getTime();
            onlineDuration.setDuration(diff);
            onlineDurationService.insertOnlineDuration(onlineDuration);
        }
    }

    /**
     * 收到客户端消息后调用的方法，根据业务要求进行处理，这里就简单地将收到的消息直接群发推送出去
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(Session session,String message){
        if (StrUtil.isNotBlank(message)){
            if("heartbeat".equals(message)){
                msgPool.put(session,true);
                //收到客户端发来的心跳后，给客户端回一个OK
                //返回给对应的session
                sendTextMessageOnlySession(session,"ok");
            }
        }
    }
    public void sendTextMessageOnlySession(Session session,String message){
        if (session != null  && session.isOpen()){
            try {
                session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 发生错误时的回调函数
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session,Throwable error){
        log.error("发生错误");
        error.printStackTrace();
    }

}

vue2前端：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  name: "App",
  data() {
    return {
      token:getToken(),
      path:process.env.VUE_APP_BASE_API_WS,
      socket:"",
      timeout: 28 * 1000,//30秒一次心跳
      timeoutObj: null,//心跳心跳倒计时
      serverTimeoutObj: null,//心跳倒计时
      timeoutnum: null,//断开 重连倒计时
      lockReconnect:false,
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init: function () {
      if(typeof(WebSocket) === "undefined"){
                alert("您的浏览器不支持socket")
      }else{
          console.log("connect:"+this.path+this.token)
         if(!this.token){
           return;
         }
         // 实例化socket
         this.socket = new WebSocket(this.path+this.token)
         this.$global.setWs(this.socket)
         // 监听socket连接
         this.socket.onopen = this.open
         // 监听socket错误信息
         this.socket.onerror = this.error
         // 监听socket消息
         this.socket.onmessage = this.getMessage
         this.socket.onclose = this.close;
         // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
          window.onbeforeunload = this.onbeforeunload
       }
    },
    //重新连接
    reconnect(){
      if(this.lockReconnect)return;
      this.lockReconnect = true;
      //没连接上会一直重连，设置延迟避免请求过多
      this.timeoutnum && clearTimeout(this.timeoutnum);
      this.timeoutnum = setTimeout(()=>{
        //新连接
        this.init();
        this.lockReconnect=false;
      },5000)
    },
    //重置心跳
    reset(){
      //清除时间
      clearTimeout(this.timeoutObj);
      clearTimeout(this.serverTimeoutObj);
      //重启心跳
      this.start();
    },
    //开启心跳
    start(){
      this.timeoutObj && clearTimeout(this.timeoutObj);
      this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
      this.timeoutObj = setTimeout(()=>{
        //这里发送一个心跳，后端收到后，返回一个心跳消息
        if(this.socket && this.socket.readyState == 1){
          //如果连接正常。
          this.send("heartbeat");
        }else{
          //否则重连
          this.reconnect();
        }
        this.serverTimeoutObj = setTimeout(()=>{
          //超时关闭
          this.socket.close();
        },this.timeout)
      }, this.timeout)
    },
    open: function () {
       console.log("WebSocket连接成功!!!"+new Date()+"----"+this.socket.readyState);
       //开启心跳
       this.start();
    },
    error: function () {
         console.log("连接错误,状态码："+this.socket.readyState)
         this.reconnect();
    },
    getMessage: function (msg) {
      if(msg.data == 'receviceheartbeat'){
        console.log("数据接收心跳返回数据："+msg.data+new Date()+"----")
        //收到服务器信息，心跳重置
        this.reset();
      }else{
        console.log("数据接收："+msg.data)
      }
    },
    // 发送消息给被连接的服务端
    send: function (messsage) {
       this.socket.send(messsage)
    },
    close: function () {
      console.log("websocket连接关闭")
      //重连
      this.reconnect();
    },
    onbeforeunload(){
      this.socket.close();
    },
  }
};
</script>
<style scoped>
#app .theme-picker {
  display: none;
}
</style>