Spring Boot + Vue3 实现WebSocket即时通讯功能

Spring Boot + Vue3 实现WebSocket即时通讯功能

简介

本文将介绍如何使用Spring Boot和Vue3实现一个基于WebSocket的即时通讯功能。通过STOMP协议实现客户端和服务器之间的双向通信，实现消息的实时推送。这种技术方案适用于在线聊天、实时通知等场景。

技术栈

• 后端：Spring Boot + STOMP + WebSocket
• 前端：Vue3 + StompJS + SockJS

核心功能实现

1. 后端配置

首先需要配置WebSocket相关的配置类：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        // 启用内存消息代理
        config.enableSimpleBroker("/topic");
        // 设置应用前缀
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 注册STOMP端点
        registry.addEndpoint("/chat")
          .setAllowedOriginPatterns("*")
          .withSockJS();
    }
}

2. 消息处理控制器

创建控制器处理消息的发送和接收：

@Controller
public class MessageController {
    private final SimpMessagingTemplate simpMessagingTemplate;

    public MessageController(SimpMessagingTemplate simpMessagingTemplate) {
        this.simpMessagingTemplate = simpMessagingTemplate;
    }

    @MessageMapping("/sendMsg")
    public void sendMessage(String message) {
        // 处理消息并广播
        simpMessagingTemplate.convertAndSend("/topic/receiveMsg", message+"123");
    }
}

3. 前端实现

使用Vue3结合StompJS实现WebSocket客户端：

<script setup>
import { onMounted } from "vue";
import { Stomp } from "@stomp/stompjs";
import SockJS from 'sockjs-client/dist/sockjs.min.js';

onMounted(() => {
  const client = Stomp.over(() => new SockJS("http://localhost:8080/chat"));
  client.connect({}, () => {
    // 订阅消息
    client.subscribe("/topic/receiveMsg", (message) => {
      console.log(message.body);
    })
    // 发送消息
    client.send("/app/sendMsg", {}, "hello")
  }, err => {
    console.log(err)
  })
})
</script>

实现要点说明

1. WebSocket配置解析

   • EnableWebSocketMessageBroker注解开启WebSocket消息代理
   • 配置消息代理前缀和应用前缀
   • 支持跨域访问和SockJS降级方案

2. 消息处理机制

   • 使用SimpMessagingTemplate发送消息
   • MessageMapping注解处理客户端消息
   • 支持点对点和广播两种消息模式

3. 前端集成要点

   • 使用StompJS库处理STOMP协议
   • SockJS提供WebSocket客户端实现
   • Vue3 组件生命周期管理连接

进阶优化建议

1. 添加心跳检测机制，维持连接稳定性
2. 实现断线重连功能
3. 增加消息持久化存储
4. 添加用户认证和授权机制
5. 实现消息确认和重发机制

常见问题解决

1. 跨域问题：确保配置了正确的跨域策略
2. 连接失败：检查WebSocket服务器地址和端口配置
3. 消息发送失败：确认消息格式和目标地址正确

总结

通过Spring Boot和Vue3实现WebSocket通信是一个简单高效的解决方案。本文提供的示例代码可以作为基础框架，根据实际需求进行扩展和优化。在实际应用中，建议考虑添加安全性、可靠性等方面的增强功能。