【从0到1构建实时聊天系统：Spring Boot + Vue3 + WebSocket全栈实战】

一、项目架构

技术栈清单：

• 后端：Spring Boot 3.0 + WebSocket + STOMP
• 前端：Vue3 + Pinia + WebSocket Client
• 部署：Nginx + Docker Compose

二、核心功能实现

1. WebSocket双向通信

// 后端配置类
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws")
                .setAllowedOriginPatterns("*")
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/app");
        registry.enableSimpleBroker("/topic");
    }
}

2. 前端实时消息处理

// Vue3 Composition API实现
const socket = new SockJS('/ws');
const stompClient = Stomp.over(socket);

stompClient.connect({}, () => {
  stompClient.subscribe('/topic/messages', (message) => {
    const chatMessage = JSON.parse(message.body);
    messageStore.addMessage(chatMessage);
  });
});

// 消息发送方法
function sendMessage() {
  stompClient.send("/app/chat", {}, JSON.stringify({
    content: messageContent.value,
    sender: currentUser.value
  }));
}

三、性能优化方案

1. 长连接保活机制

# Nginx配置优化
location /ws/ {
    proxy_pass http://backend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_read_timeout 86400s;
    proxy_send_timeout 86400s;
}

2. 消息压缩方案

四、安全防护体系

1. JWT鉴权方案

// 拦截器实现
@Component
public class WebSocketAuthInterceptor implements HandshakeHandler {
    @Override
    public boolean beforeHandshake(
        ServerHttpRequest request,
        ServerHttpResponse response,
        WebSocketHandler wsHandler,
        Map<String, Object> attributes
    ) {
        String token = request.getHeaders().getFirst("Authorization");
        if (JwtUtil.verifyToken(token)) {
            attributes.put("userId", JwtUtil.getUserId(token));
            return true;
        }
        return false;
    }
}

2. XSS防御策略

// 前端过滤处理
function sanitizeInput(content) {
  return DOMPurify.sanitize(content, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong'],
    ALLOWED_ATTR: []
  });
}

五、生产级部署方案

1. Docker Compose配置

version: '3.8'
services:
  app:
    image: your-repo/chat-backend:latest
    ports:
      - "8080:8080"
    environment:
      - SPRING_PROFILES_ACTIVE=prod
    depends_on:
      - redis

  redis:
    image: redis:7.0
    ports:
      - "6379:6379"