springboot集成websocket+前端vue掉线重连机制

最新推荐文章于 2025-06-16 23:09:41 发布

不忘初心1123

最新推荐文章于 2025-06-16 23:09:41 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： java 前端 vue

本文链接：https://blog.youkuaiyun.com/qq_37334435/article/details/90547121

本文介绍了如何在SpringBoot后端集成WebSocket，包括两种不同的配置和业务处理方式，并强调了前端需要后端配合实现心跳机制，确保连接稳定性。前端部分则涉及到心跳的响应处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后端

注入maven依赖

<!--websocket-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

第一种方式

websocket配置

package com.jx.fly.common.config;

import com.jx.fly.module.mapper.LaborProjectConfigMapper;
import com.jx.fly.websocket.WebSocketServer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * websocket配置
 *
 * @author zhongxiaojian
 * @date 2019-05-23
 **/
@Configuration
public class WebSocketConfig{
   
   

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
   
   
        return new ServerEndpointExporter();
    }

    @Autowired
    public void setMapper(LaborProjectConfigMapper laborProjectConfigMapper){
   
   
        WebSocketServer.laborProjectConfigMapper=laborProjectConfigMapper;
    }
}

websocket业务处理类

package com.jx.fly.websocket;

import cn.hutool.log.StaticLog;
import com.jx.fly.module.mapper.LaborProjectConfigMapper;
import com.jx.smart.common.model.labor.attendance.project.LaborProjectConfigModel;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.*;
import java.util.concurrent.CopyOnWriteArraySet;

/**
 * websocket处理类
 * @author xiaojian
 * @date 2018/10/25
 */
@ServerEndpoint("/websocket/{projectId}")
@Component
public class WebSocketServer {
   
   

    public static LaborProjectConfigMapper laborProjectConfigMapper;
    private static Map<Integer, CopyOnWriteArraySet<WebSocketServer>> SERVER_MAP = new HashMap<>();
    private Session session;
    private int projectId;

    /**
     * 连接成功调用
     * @param session
     * @param projectId
     */
    @OnOpen
    public void onOpen(Session session,@PathParam("projectId") Integer projectId){
   
   
        this.session = session;
        this.projectId = projectId;
        //业务处理
        if (projectId != null){
   
   
            LaborProjectConfigModel model = laborProjectConfigMapper.selectById(projectId);
            if (model != null){
   
   
                CopyOnWriteArraySet<WebSocketServer> set = SERVER_MAP.get(projectId);
                if (set != null){
   
   
                    set.add(this);
                }else {
   
   
                    CopyOnWriteArraySet<WebSocketServer> sessionSet = new CopyOnWriteArraySet<>();
                    sessionSet.add(this);
                    SERVER_MAP.put(projectId,sessionSet);
                }
                StaticLog.info("session:"+session+"连接成功,"+model.getId()+"项目在线数量: "+SERVER_MAP.get(projectId).size());
                sendMessage("连接成功");
            }else {
   
   
                StaticLog.error("websocket IO异常");
                sendMessage("非法连接");
            }
        }else {
   
   
            sendMessage("projectId不能为空");
        }
    }

    /**
     * 关闭连接调用
     */
    @OnClose
    public v