一、项目架构
技术栈清单：
- 后端：Spring Boot 3.0 + WebSocket + STOMP
- 前端：Vue3 + Pinia + WebSocket Client
- 部署：Nginx + Docker Compose
二、核心功能实现
1. WebSocket双向通信
// 后端配置类
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {registry.addEndpoint("/ws").setAllowedOriginPatterns("*").withSockJS();}@Overridepublic 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. 消息压缩方案
| 压缩算法 | 原始大小 | 压缩后 | 压缩率 | TPS提升 |
|---|---|---|---|---|
| Gzip | 2KB | 0.3KB | 85% | 42% |
| Snappy | 2KB | 0.5KB | 75% | 35% |
四、安全防护体系
1. JWT鉴权方案
// 拦截器实现
@Component
public class WebSocketAuthInterceptor implements HandshakeHandler {@Overridepublic 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:latestports:- "8080:8080"environment:- SPRING_PROFILES_ACTIVE=proddepends_on:- redisredis:image: redis:7.0ports:- "6379:6379"
