1. 项目概述
最近在开发一个适老化社交应用时，遇到了即时通讯功能的需求。传统的HTTP轮询方案不仅效率低下，还无法满足实时性要求。经过技术调研，最终选择了Spring Boot + WebSocket的方案，配合Vue3前端，实现了一个支持文字、图片和语音消息的即时通讯系统。
这个系统最大的特点在于：
- 采用WebSocket长连接，避免了HTTP轮询的资源浪费
- 支持多媒体消息（语音带时长显示）
- 前后端完全分离，便于扩展和维护
- 针对适老化做了特殊优化（大字体、简单操作）
2. 技术选型与架构设计
2.1 为什么选择WebSocket
在Web开发中，HTTP协议的"请求-响应"模式存在明显缺陷：
- 服务器无法主动推送消息
- 轮询方式浪费带宽和服务器资源
- 实时性差，消息延迟明显
WebSocket协议的优势：
- 一次握手，持久连接
- 全双工通信，服务器可主动推送
- 低延迟，适合实时应用
- 节省服务器资源
2.2 整体架构设计
系统采用典型的前后端分离架构：
code复制前端(Vue3) <-- WebSocket --> 后端(Spring Boot)
|
v
数据库(MySQL)
|
v
文件存储(OSS)
核心组件：
- 前端：Vue3 + WebSocket API
- 后端：Spring Boot + spring-boot-starter-websocket
- 数据库：MySQL存储消息记录
- 文件存储：阿里云OSS存储多媒体文件
3. 后端实现细节
3.1 WebSocket配置
首先需要在Spring Boot中配置WebSocket支持：
java复制@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Autowired
private ChatHandler chatHandler;
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(chatHandler, "/chat/{userId}")
.setAllowedOrigins("*");
}
}
关键点：
@EnableWebSocket注解启用WebSocket支持- 注册处理器并指定连接端点
- 设置跨域支持，方便前后端分离开发
3.2 消息处理器实现
核心处理器继承TextWebSocketHandler，主要功能包括：
- 管理在线用户会话
- 处理消息转发
- 维护连接生命周期
java复制@Component
public class ChatHandler extends TextWebSocketHandler {
private static final Map<Long, WebSocketSession> onlineUsers = new ConcurrentHashMap<>();
private final ObjectMapper objectMapper = new ObjectMapper();
@Override
public void afterConnectionEstablished(WebSocketSession session) {
// 从路径中提取用户ID
String path = session.getUri().getPath();
Long userId = Long.parseLong(path.substring(path.lastIndexOf('/') + 1));
// 保存会话
onlineUsers.put(userId, session);
log.info("用户{}上线", userId);
}
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) {
try {
// 解析消息
Message msg = objectMapper.readValue(message.getPayload(), Message.class);
// 持久化存储
messageService.saveMessage(msg);
// 转发给目标用户
WebSocketSession target = onlineUsers.get(msg.getToId());
if(target != null && target.isOpen()) {
target.sendMessage(new TextMessage(objectMapper.writeValueAsString(msg)));
}
} catch (Exception e) {
log.error("消息处理异常", e);
}
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {
// 移除离线用户
onlineUsers.entrySet().removeIf(entry -> entry.getValue().equals(session));
}
}
3.3 消息模型设计
为了支持多种消息类型，设计了通用的消息模型：
java复制@Data
public class Message {
private Long id;
private Long fromId; // 发送者ID
private Long toId; // 接收者ID
private String content;// 内容(文字或URL)
private MsgType msgType;// 消息类型
private Integer duration;// 语音时长(秒)
private Date createTime;
}
public enum MsgType {
TEXT, // 文本
IMAGE, // 图片
VOICE // 语音
}
4. 前端实现细节
4.1 WebSocket连接管理
在Vue组件中管理WebSocket连接：
javascript复制// 初始化连接
initWebSocket(userId) {
const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
this.socket = new WebSocket(`${protocol}//${location.host}/chat/${userId}`);
// 消息接收处理
this.socket.onmessage = (event) => {
const message = JSON.parse(event.data);
this.handleIncomingMessage(message);
};
// 错误处理
this.socket.onerror = (error) => {
console.error('WebSocket错误:', error);
this.reconnect();
};
// 心跳检测
this.heartbeatInterval = setInterval(() => {
if(this.socket.readyState === WebSocket.OPEN) {
this.socket.send(JSON.stringify({type: 'HEARTBEAT'}));
}
}, 30000);
}
4.2 多媒体消息处理
对于图片和语音消息，采用"HTTP上传+WebSocket通知"的方案：
javascript复制// 上传图片
async uploadImage(file) {
const formData = new FormData();
formData.append('file', file);
try {
const res = await axios.post('/api/upload/image', formData);
if(res.data.success) {
this.sendMessage({
toId: this.currentChat,
content: res.data.url,
msgType: 'IMAGE'
});
}
} catch (error) {
console.error('图片上传失败:', error);
}
}
// 录音处理
async stopRecording() {
const audioBlob = new Blob(this.recordedChunks, {type: 'audio/webm'});
const duration = Math.round((Date.now() - this.recordingStart) / 1000);
const formData = new FormData();
formData.append('file', audioBlob, 'recording.webm');
try {
const res = await axios.post('/api/upload/voice', formData);
if(res.data.success) {
this.sendMessage({
toId: this.currentChat,
content: res.data.url,
msgType: 'VOICE',
duration: duration
});
}
} catch (error) {
console.error('语音上传失败:', error);
}
}
4.3 消息渲染
根据消息类型动态渲染不同的UI组件：
html复制<div class="message-container">
<div v-for="msg in messages" :key="msg.id"
:class="['message', msg.fromId === currentUser.id ? 'sent' : 'received']">
<div v-if="msg.msgType === 'TEXT'" class="text-message">
{{ msg.content }}
</div>
<div v-else-if="msg.msgType === 'IMAGE'" class="image-message">
<img :src="msg.content" @click="previewImage(msg.content)">
</div>
<div v-else-if="msg.msgType === 'VOICE'"
class="voice-message"
@click="playAudio(msg.content)"
:style="{width: 100 + msg.duration * 5 + 'px'}">
<span class="duration">{{ msg.duration }}"</span>
</div>
<div class="time">{{ formatTime(msg.createTime) }}</div>
</div>
</div>
5. 关键问题与解决方案
5.1 并发会话管理
问题：多用户同时在线时，会话管理可能出现并发问题。
解决方案：
- 使用
ConcurrentHashMap存储会话，确保线程安全 - 实现连接状态监听，及时清理无效会话
- 添加心跳检测机制，自动断开异常连接
java复制// 心跳检测实现
@Scheduled(fixedRate = 30000)
public void checkHeartbeat() {
Iterator<Map.Entry<Long, WebSocketSession>> iterator = onlineUsers.entrySet().iterator();
while(iterator.hasNext()) {
Map.Entry<Long, WebSocketSession> entry = iterator.next();
if(!entry.getValue().isOpen()) {
iterator.remove();
log.info("清理无效连接: {}", entry.getKey());
}
}
}
5.2 消息可靠性保证
问题：网络不稳定可能导致消息丢失。
解决方案：
- 实现消息确认机制
- 客户端维护待确认消息队列
- 服务端持久化所有消息
javascript复制// 前端消息确认机制
sendMessage(message) {
const msgId = generateId();
const msgWithId = {...message, msgId};
// 添加到待确认队列
this.pendingMessages.set(msgId, {
message: msgWithId,
timestamp: Date.now(),
retries: 0
});
// 发送消息
this.socket.send(JSON.stringify(msgWithId));
// 启动重试定时器
setTimeout(() => {
this.checkPendingMessages();
}, 3000);
}
checkPendingMessages() {
const now = Date.now();
this.pendingMessages.forEach((msg, id) => {
if(now - msg.timestamp > 3000 && msg.retries < 3) {
msg.retries++;
msg.timestamp = now;
this.socket.send(JSON.stringify(msg.message));
} else if(msg.retries >= 3) {
this.pendingMessages.delete(id);
this.showError("消息发送失败");
}
});
}
5.3 语音消息处理
问题：语音消息的时长信息容易丢失。
解决方案：
- 前端准确计算并发送时长
- 后端确保存储所有字段
- 数据库查询显式指定字段
sql复制/* 确保查询包含duration字段 */
SELECT id, from_id, to_id, content, msg_type, duration, create_time
FROM message
WHERE (from_id = ? AND to_id = ?) OR (from_id = ? AND to_id = ?)
ORDER BY create_time ASC
6. 性能优化
6.1 连接管理优化
- 实现连接池管理
- 限制单个IP的连接数
- 实现优雅的断开重连机制
6.2 消息存储优化
- 对大容量消息采用分表存储
- 实现消息缓存层
- 对历史消息实现懒加载
java复制// 消息分页查询
public Page<Message> queryMessages(Long fromId, Long toId, int page, int size) {
Pageable pageable = PageRequest.of(page, size, Sort.by("createTime").descending());
return messageRepository.findByFromIdAndToIdOrToIdAndFromId(
fromId, toId, toId, fromId, pageable);
}
6.3 前端性能优化
- 实现虚拟滚动，优化长列表渲染
- 对多媒体消息实现懒加载
- 优化WebSocket消息处理逻辑
javascript复制// 虚拟滚动实现
<template>
<div class="message-list" @scroll="handleScroll">
<div class="scroll-content" :style="{ height: totalHeight + 'px' }">
<div v-for="item in visibleItems"
:key="item.id"
:style="{ transform: `translateY(${item.offset}px)` }">
<message-item :message="item.data" />
</div>
</div>
</div>
</template>
7. 适老化特殊优化
7.1 UI设计优化
- 更大的字体和按钮
- 更高的对比度
- 简化的操作流程
7.2 语音交互优化
- 实现语音输入/输出
- 添加语音提示
- 简化语音消息操作
javascript复制// 语音控制实现
initVoiceControl() {
const recognition = new webkitSpeechRecognition();
recognition.lang = 'zh-CN';
recognition.continuous = true;
recognition.onresult = (event) => {
const transcript = Array.from(event.results)
.map(result => result[0].transcript)
.join('');
this.inputText = transcript;
};
this.$refs.voiceButton.addEventListener('click', () => {
if(this.isListening) {
recognition.stop();
} else {
recognition.start();
}
this.isListening = !this.isListening;
});
}
7.3 辅助功能
- 添加屏幕阅读器支持
- 实现高对比度模式
- 简化消息通知方式
8. 部署与监控
8.1 生产环境部署
- 使用Nginx反向代理WebSocket
- 配置SSL加密
- 实现负载均衡
nginx复制# Nginx WebSocket配置
server {
listen 443 ssl;
server_name example.com;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;
location /chat/ {
proxy_pass http://backend;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
}
}
8.2 系统监控
- 实现连接数监控
- 监控消息吞吐量
- 设置异常告警
java复制// 连接监控端点
@RestController
@RequestMapping("/monitor")
public class MonitorController {
@Autowired
private ChatHandler chatHandler;
@GetMapping("/connections")
public int getActiveConnections() {
return chatHandler.getOnlineCount();
}
}
9. 安全考虑
9.1 认证与授权
- 实现JWT认证
- 验证消息发送权限
- 防止跨用户消息访问
java复制// WebSocket认证拦截器
public class AuthInterceptor implements HandshakeInterceptor {
@Override
public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response,
WebSocketHandler wsHandler, Map<String, Object> attributes) {
// 验证token
String token = extractToken(request);
if(!jwtUtil.validateToken(token)) {
return false;
}
// 设置用户信息
String userId = jwtUtil.getUserIdFromToken(token);
attributes.put("userId", userId);
return true;
}
}
9.2 消息安全
- 实现端到端加密
- 防止消息篡改
- 内容安全过滤
javascript复制// 前端加密实现
async encryptMessage(content, publicKey) {
const encoder = new TextEncoder();
const encoded = encoder.encode(content);
const encrypted = await window.crypto.subtle.encrypt(
{ name: "RSA-OAEP" },
publicKey,
encoded
);
return arrayBufferToBase64(encrypted);
}
10. 扩展与演进
10.1 群聊功能
- 实现群组管理
- 优化群消息广播
- 实现@功能
10.2 已读回执
- 实现消息状态跟踪
- 优化已读/未读显示
- 减少不必要的通知
10.3 音视频通话
- 集成WebRTC
- 实现信令服务器
- 优化适老化交互
在实际开发过程中，我发现WebSocket虽然强大，但在移动网络环境下还是存在连接不稳定的问题。为此，我实现了一套降级方案：当WebSocket不可用时，自动切换到长轮询模式，确保消息可达性。这个方案在适老化应用中尤为重要，因为目标用户可能使用网络条件较差的设备。