基于Vue+SpringBoot+WebSocket实现的Web端聊天系统（包含网络通信+心跳+客户端服务端+mysql）

以下是一个简化版的WebSocket心跳机制实现的例子，仅包含核心代码：

后端（SpringBoot）:

@Configuration
@EnableScheduling
public class WebSocketConfig {
    @Autowired
    private ServerEndpointExporter serverEndpointExporter;
 
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}
 
@Component
@ServerEndpoint("/websocket/{userId}")
public class WebSocketServer {
    private static final ConcurrentHashMap<String, Session> sessionPool = new ConcurrentHashMap<>();
    private Session session;
    private String userId;
 
    @OnOpen
    public void onOpen(Session session, @PathParam("userId") String userId) {
        this.session = session;
        this.userId = userId;
        sessionPool.put(userId, session);
        System.out.println("新连接加入：" + userId);
    }
 
    @OnClose
    public void onClose() {
        sessionPool.remove(userId);
        System.out.println("连接关闭：" + userId);
    }
 
    @OnMessage
    public void onMessage(String message) {
        // 处理消息
    }
 
    @Scheduled(fixedRate = 30000)
    public void heartbeat() {
        sessionPool.forEach((k, v) -> {
            if (v.isOpen()) {
                try {
                    v.getBasicRemote().sendText("心跳响应");
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        });
    }
}

前端（Vue.js）:

<template>
  <div>
    <button @click="connect">连接WebSocket</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      ws: null,
      heartbeatInterval: null
    };
  },
  methods: {
    connect() {
      const userId = '用户ID';
      const wsUrl = `ws://服务器地址/websocket/${userId}`;
      this.ws = new WebSocket(wsUrl);
 
      this.ws.onopen = () => {
        console.log('WebSocket连接成功');
        this.heartbeatInterval = setInterval(() => {
          this.ws.send('心跳请求');
        }, 30000);
      };
 
      this.ws.onmessage = (message) => {
        console.log('收到消息:', message.data);
        // 处理消息
      };
 
      this.ws.onerror = (error) => {
        console.error('WebSocket出错:', error);
      };
 
      this.ws.onclose = () => {
        console.log('WebSocket连接关闭');
        clearInterval(this.heartbeatInterval);
      };
    }
  }
};
</script>

这个例子展示了如何在SpringBoot后端使用@EnableScheduling和@Scheduled注解来实现定时发送心跳消息，以及如何在Vue前端使用\`set