# WebSocket实时聊天通信技术详解 ## 一、WebSocket技术概述 ### 1.1 什么是WebSocket WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 ### 1.2 WebSocket与HTTP的区别 | 特性 | HTTP | WebSocket | |------|------|-----------| | 连接方式 | 短连接，每次请求都需要建立连接 | 长连接，一次握手后保持连接状态 | | 数据传输方向 | 单向的，只能客户端请求服务端 | 双向的，客户端和服务端都可以主动发送数据 | | 数据传输效率 | 需要HTTP头部信息，有较大开销 | 建立连接后数据传输开销小，更加高效 | | 实时性 | 需要轮询，实时性较差 | 可立即推送，实时性强 | | 应用场景 | 适合一次性请求/响应模型 | 适合实时交互应用（聊天、游戏等） | ### 1.3 WebSocket通信原理 1. **建立连接**：客户端通过HTTP请求发起WebSocket连接请求，请求中包含了一个特殊的字段`Upgrade: websocket`。 2. **握手**：服务器接收到这个请求后，如果支持WebSocket，会返回HTTP 101响应，表示协议切换成功。 3. **全双工通信**：建立连接后，客户端和服务器都可以随时发送数据，不需要等待对方的请求。 4. **数据帧**：WebSocket使用帧的概念传输数据，每个数据帧包含了控制信息和负载数据。 5. **心跳机制**：为了保持连接的活跃状态，客户端和服务器之间会定期交换心跳信息。 6. **关闭连接**：任何一方可以发送关闭帧来结束连接。 ## 二、AI社交匹配系统的WebSocket实现方案 ### 2.1 系统架构 AI社交匹配系统采用前后端分离架构，WebSocket聊天功能的实现包括以下几个部分： 1. **前端实现**：基于原生WebSocket API封装的聊天组件和工具类 2. **后端实现**：基于Java的WebSocket服务端点和消息处理器 3. **消息持久化**：聊天消息的存储和查询 4. **消息安全**：消息的加密和解密 5. **状态管理**：用户在线状态管理和心跳检测 ### 2.2 技术选型 - **前端**：原生WebSocket API + Vue 3 组合式API - **后端**：Spring Boot + Java WebSocket API (javax.websocket) - **消息格式**：JSON - **加密算法**：AES - **持久化存储**：MySQL + MyBatis-Plus ### 2.3 整体流程 1. 用户登录后，前端建立WebSocket连接，连接时携带JWT令牌以验证身份 2. 后端验证令牌并建立WebSocket连接，记录用户在线状态 3. 用户发送消息时，消息先加密，然后通过WebSocket连接发送到服务器 4. 服务器接收消息，解密内容，处理业务逻辑并持久化存储 5. 服务器将消息推送给接收方（如果在线）或创建通知（如果不在线） 6. 接收方接收消息，解密内容并显示在界面上 7. 用户断开连接时，服务器清理用户状态并关闭WebSocket连接 ## 三、后端WebSocket实现详解 ### 3.1 WebSocket服务端配置在Spring Boot中，需要先配置WebSocket支持。以下是WebSocket配置类： ```java /** * WebSocket配置类 */ @Configuration public class WebSocketConfig { /** * ServerEndpointExporter自动注册使用@ServerEndpoint注解声明的websocket endpoint */ @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } } ``` 此外，为了支持聊天加密功能，还需要配置加密参数： ```java /** * 聊天加密配置类 * 用于配置聊天消息加密参数 */ @Configuration public class ChatEncryptionConfig { @Value("${chat.encryption.secret:mNu7UVEE4gMQQVEXWWvzkg==}") private String encryptionSecret; @Value("${chat.encryption.algorithm:AES/ECB/PKCS5Padding}") private String encryptionAlgorithm; @Value("${chat.encryption.enabled:true}") private boolean encryptionEnabled; public String getEncryptionSecret() { return encryptionSecret; } public String getEncryptionAlgorithm() { return encryptionAlgorithm; } public boolean isEncryptionEnabled() { return encryptionEnabled; } } ``` ### 3.2 WebSocket服务端点实现在Spring Boot中，通过`@ServerEndpoint`注解定义WebSocket端点，下面是AI社交匹配系统中的`ChatWebSocketServer`类的完整代码及注释： ```java /** * WebSocket聊天服务端点 */ @Slf4j @Component @ServerEndpoint("/websocket/chat/{token}") public class ChatWebSocketServer { // 用静态变量保存在线用户的WebSocket连接，key为用户ID，value为WebSocket会话 private static final Map ONLINE_USERS = new ConcurrentHashMap<>(); // 由于WebSocket是多例的，所以使用静态注入 private static ChatService chatService; private static ChatEncryptionUtil chatEncryptionUtil; @Autowired public void setChatService(ChatService chatService) { ChatWebSocketServer.chatService = chatService; } @Autowired public void setChatEncryptionUtil(ChatEncryptionUtil chatEncryptionUtil) { ChatWebSocketServer.chatEncryptionUtil = chatEncryptionUtil; } // 当前连接的用户ID private Long userId; /** * 连接建立成功调用的方法 * @param session WebSocket会话 * @param token JWT令牌，用于身份验证 */ @OnOpen public void onOpen(Session session, @PathParam("token") String token) { if (!StringUtils.hasText(token)) { this.sendMessage(session, Result.error("未登录")); try { session.close(); } catch (IOException e) { log.error("关闭WebSocket连接失败", e); } return; } try { // 验证token并获取用户ID userId = JwtUtil.getUserId(token); if (userId == null) { this.sendMessage(session, Result.error("无效的token")); session.close(); return; } // 记录在线用户 ONLINE_USERS.put(userId, session); log.info("用户连接成功，用户ID：{}，当前在线人数：{}", userId, ONLINE_USERS.size()); this.sendMessage(session, Result.success("连接成功")); } catch (Exception e) { log.error("WebSocket连接异常", e); try { session.close(); } catch (IOException ex) { log.error("关闭WebSocket连接失败", ex); } } } /** * 连接关闭调用的方法 */ @OnClose public void onClose() { if (userId != null) { ONLINE_USERS.remove(userId); log.info("用户退出，用户ID：{}，当前在线人数：{}", userId, ONLINE_USERS.size()); } } /** * 收到客户端消息后调用的方法 * @param message 客户端发送的消息 * @param session WebSocket会话 */ @OnMessage public void onMessage(String message, Session session) { log.info("服务端收到加密消息"); if (!StringUtils.hasText(message)) { this.sendMessage(session, Result.error("消息不能为空")); return; } log.info("服务端收到消息：{}", message); try { // 解析消息 JSONObject jsonObject = JSON.parseObject(message); String type = jsonObject.getString("type"); JSONObject data = jsonObject.getJSONObject("data"); // 解密消息内容（如果消息类型是聊天消息） if ("chat".equals(type) && data.containsKey("content")) { String encryptedContent = data.getString("content"); if (encryptedContent != null) { // 解密消息内容 String decryptedContent = chatEncryptionUtil.decrypt(encryptedContent); data.put("content", decryptedContent); } } // 根据消息类型处理 switch (type) { case "chat": handleChatMessage(data); break; case "read": handleReadMessage(data); break; case "recall": handleRecallMessage(data); break; default: this.sendMessage(session, Result.error("未知的消息类型")); } } catch (Exception e) { log.error("处理WebSocket消息异常", e); this.sendMessage(session, Result.error("消息处理失败")); } } /** * 处理聊天消息 * @param data 消息数据 */ private void handleChatMessage(JSONObject data) { try { // 解析消息数据 ChatMessageDTO messageDTO = new ChatMessageDTO(); messageDTO.setReceiverId(data.getLong("receiverId")); messageDTO.setContent(data.getString("content")); messageDTO.setMessageType(data.getInteger("messageType")); messageDTO.setMediaUrl(data.getString("mediaUrl")); // 发送消息 ChatMessage message = chatService.sendMessage(userId, messageDTO); // 将消息转换为VO对象 ChatMessageVO messageVO = new ChatMessageVO(); BeanUtils.copyProperties(message, messageVO); messageVO.setIsSelf(true); // 发送前加密消息内容 if (messageVO.getContent() != null) { String encryptedContent = chatEncryptionUtil.encrypt(messageVO.getContent()); messageVO.setContent(encryptedContent); } // 发送回发送者 this.sendMessage(ONLINE_USERS.get(userId), Result.success("发送成功", messageVO)); // 如果接收者在线，发送给接收者 Long receiverId = messageDTO.getReceiverId(); if (ONLINE_USERS.containsKey(receiverId)) { // 对接收者来说不是自己发的 messageVO.setIsSelf(false); this.sendMessage(ONLINE_USERS.get(receiverId), Result.success("收到新消息", messageVO)); } } catch (Exception e) { log.error("处理聊天消息异常", e); this.sendMessage(ONLINE_USERS.get(userId), Result.error("发送消息失败")); } } /** * 处理已读消息 * @param data 消息数据 */ private void handleReadMessage(JSONObject data) { try { Long sessionId = data.getLong("sessionId"); // 标记消息为已读 int count = chatService.markMessagesAsRead(sessionId, userId); this.sendMessage(ONLINE_USERS.get(userId), Result.success("标记已读成功", count)); } catch (Exception e) { log.error("处理已读消息异常", e); this.sendMessage(ONLINE_USERS.get(userId), Result.error("标记已读失败")); } } /** * 处理撤回消息 * @param data 消息数据 */ private void handleRecallMessage(JSONObject data) { try { Long messageId = data.getLong("messageId"); // 撤回消息 boolean success = chatService.recallMessage(messageId, userId); if (success) { // 获取消息信息，找到接收者 ChatMessage message = chatService.getMessageById(messageId); if (message != null) { // 通知发送者 this.sendMessage(ONLINE_USERS.get(userId), Result.success("撤回消息成功", messageId)); // 如果接收者在线，也通知接收者 Long receiverId = message.getReceiverId(); if (ONLINE_USERS.containsKey(receiverId)) { this.sendMessage(ONLINE_USERS.get(receiverId), Result.success("消息已被撤回", messageId)); } } } else { this.sendMessage(ONLINE_USERS.get(userId), Result.error("撤回消息失败")); } } catch (Exception e) { log.error("处理撤回消息异常", e); this.sendMessage(ONLINE_USERS.get(userId), Result.error("撤回消息失败")); } } /** * 发生错误时调用 * @param session WebSocket会话 * @param error 错误信息 */ @OnError public void onError(Session session, Throwable error) { log.error("WebSocket发生错误：{}，用户ID：{}", error.getMessage(), userId); if (userId != null) { ONLINE_USERS.remove(userId); } } /** * 发送消息 * @param session WebSocket会话 * @param result 消息内容 */ private void sendMessage(Session session, Result result) { if (session != null && session.isOpen()) { try { session.getBasicRemote().sendText(JSON.toJSONString(result)); } catch (IOException e) { log.error("发送WebSocket消息异常", e); } } } /** * 向指定用户发送消息 * @param userId 用户ID * @param result 消息内容 */ public static void sendMessageToUser(Long userId, Result result) { Session session = ONLINE_USERS.get(userId); if (session != null && session.isOpen()) { try { session.getBasicRemote().sendText(JSON.toJSONString(result)); } catch (IOException e) { log.error("发送WebSocket消息异常", e); } } } /** * 判断用户是否在线 * @param userId 用户ID * @return 是否在线 */ public static boolean isUserOnline(Long userId) { Session session = ONLINE_USERS.get(userId); return session != null && session.isOpen(); } } ``` ### 3.3 消息加密工具类为了保证消息传输的安全性，系统实现了消息加密和解密的功能： ```java /** * 聊天加密工具类 * 用于聊天消息的加密和解密 */ @Slf4j @Component public class ChatEncryptionUtil { private final ChatEncryptionConfig encryptionConfig; private final SecretKeySpec secretKey; public ChatEncryptionUtil(ChatEncryptionConfig encryptionConfig) { this.encryptionConfig = encryptionConfig; // 解码Base64编码的密钥 byte[] decodedKey = Base64.getDecoder().decode(encryptionConfig.getEncryptionSecret()); // 使用解码后的字节数组生成AES密钥 this.secretKey = new SecretKeySpec(decodedKey, "AES"); } /** * 生成随机AES密钥 * @return Base64编码的密钥字符串 */ public static String generateKey() { try { KeyGenerator keyGen = KeyGenerator.getInstance("AES"); keyGen.init(128); // 使用128位密钥 SecretKey secretKey = keyGen.generateKey(); return Base64.getEncoder().encodeToString(secretKey.getEncoded()); } catch (NoSuchAlgorithmException e) { log.error("生成AES密钥失败", e); throw new RuntimeException("生成密钥失败", e); } } /** * 加密消息 * @param plainText 明文消息 * @return 加密后的Base64编码字符串 */ public String encrypt(String plainText) { if (plainText == null || plainText.isEmpty()) { return plainText; } // 如果加密被禁用，直接返回原文 if (!encryptionConfig.isEncryptionEnabled()) { return plainText; } try { Cipher cipher = Cipher.getInstance(encryptionConfig.getEncryptionAlgorithm()); cipher.init(Cipher.ENCRYPT_MODE, secretKey); byte[] encrypted = cipher.doFinal(plainText.getBytes(StandardCharsets.UTF_8)); return Base64.getEncoder().encodeToString(encrypted); } catch (Exception e) { log.error("消息加密失败", e); // 加密失败时，返回原文 return plainText; } } /** * 解密消息 * @param encryptedText 加密后的Base64编码字符串 * @return 解密后的明文 */ public String decrypt(String encryptedText) { if (encryptedText == null || encryptedText.isEmpty()) { return encryptedText; } // 如果加密被禁用，直接返回原文 if (!encryptionConfig.isEncryptionEnabled()) { return encryptedText; } try { // 尝试Base64解码，如果失败可能是未加密的文本 byte[] encryptedBytes; try { encryptedBytes = Base64.getDecoder().decode(encryptedText); } catch (IllegalArgumentException e) { // 解码失败，可能不是Base64编码，返回原文 return encryptedText; } Cipher cipher = Cipher.getInstance(encryptionConfig.getEncryptionAlgorithm()); cipher.init(Cipher.DECRYPT_MODE, secretKey); byte[] decrypted = cipher.doFinal(encryptedBytes); return new String(decrypted, StandardCharsets.UTF_8); } catch (Exception e) { log.error("消息解密失败", e); // 解密失败时，返回原文 return encryptedText; } } /** * 判断是否为加密文本 * @param text 待判断的文本 * @return 是否为加密文本 */ public boolean isEncrypted(String text) { if (text == null || text.isEmpty()) { return false; } try { // 尝试Base64解码，如果成功且解密也成功，则认为是加密文本 byte[] encryptedBytes = Base64.getDecoder().decode(text); Cipher cipher = Cipher.getInstance(encryptionConfig.getEncryptionAlgorithm()); cipher.init(Cipher.DECRYPT_MODE, secretKey); cipher.doFinal(encryptedBytes); return true; } catch (Exception e) { // 解码或解密失败，说明不是加密文本 return false; } } } ``` ### 3.4 消息持久化服务消息的发送与存储由`ChatService`接口的实现类`ChatServiceImpl`处理。以下是关键方法的详细实现： #### 3.4.1 发送消息 ```java /** * 发送聊天消息 * @param senderId 发送者ID * @param messageDTO 消息数据传输对象 * @return 创建的消息实体 */ @Override @Transactional(rollbackFor = Exception.class) public ChatMessage sendMessage(Long senderId, ChatMessageDTO messageDTO) { Long receiverId = messageDTO.getReceiverId(); // 获取或创建会话 ChatSession session = getOrCreateSession(senderId, receiverId); // 创建消息对象 ChatMessage message = new ChatMessage(); message.setSessionId(session.getId()) .setSenderId(senderId) .setReceiverId(receiverId) .setContent(messageDTO.getContent()) .setMessageType(messageDTO.getMessageType()) .setMediaUrl(messageDTO.getMediaUrl()) .setIsRead(0) // 0表示未读 .setIsDeleted(0) // 0表示未删除 .setIsRecalled(0) // 0表示未撤回 .setCreateTime(LocalDateTime.now()); chatMessageMapper.insert(message); // 更新会话的最后消息信息 session.setLastMessage(messageDTO.getContent()) .setLastMessageTime(LocalDateTime.now()); // 更新未读消息计数 if (session.getUserId1().equals(receiverId)) { session.setUnreadCount1(session.getUnreadCount1() + 1); } else { session.setUnreadCount2(session.getUnreadCount2() + 1); } chatSessionMapper.updateById(session); // 创建消息通知（如果接收者不在线） if (!ChatWebSocketServer.isUserOnline(messageDTO.getReceiverId())) { User sender = userService.getById(senderId); if (sender != null) { String content = sender.getNickname() + "给您发送了新消息"; notificationService.createMessageNotification(messageDTO.getReceiverId(), senderId, message.getSessionId(), content); } } return message; } ``` #### 3.4.2 标记消息为已读 ```java /** * 标记会话中的消息为已读 * @param sessionId 会话ID * @param userId 用户ID * @return 已读消息的数量 */ @Override @Transactional(rollbackFor = Exception.class) public int markMessagesAsRead(Long sessionId, Long userId) { // 验证用户是否在会话中 ChatSession session = chatSessionMapper.selectById(sessionId); if (session == null || ((!session.getUserId1().equals(userId) && !session.getUserId2().equals(userId)))) { return 0; } // 标记消息为已读 int count = chatMessageMapper.markMessagesAsRead(sessionId, userId); // 更新会话的未读消息计数 if (count > 0) { if (session.getUserId1().equals(userId)) { session.setUnreadCount1(0); } else { session.setUnreadCount2(0); } chatSessionMapper.updateById(session); } return count; } ``` #### 3.4.3 撤回消息 ```java /** * 撤回消息 * @param messageId 消息ID * @param userId 用户ID * @return 操作是否成功 */ @Override @Transactional(rollbackFor = Exception.class) public boolean recallMessage(Long messageId, Long userId) { ChatMessage message = chatMessageMapper.selectById(messageId); if (message == null || !message.getSenderId().equals(userId) || message.getIsDeleted() == 1) { return false; } // 判断是否超过可撤回的时间（5分钟） if (message.getCreateTime().plusMinutes(5).isBefore(LocalDateTime.now())) { return false; } // 设置为已撤回 message.setIsRecalled(1); return chatMessageMapper.updateById(message) > 0; } ``` #### 3.4.4 删除消息 ```java /** * 删除消息 * @param messageId 消息ID * @param userId 用户ID * @return 操作是否成功 */ @Override public boolean deleteMessage(Long messageId, Long userId) { ChatMessage message = chatMessageMapper.selectById(messageId); if (message == null || (!message.getSenderId().equals(userId) && !message.getReceiverId().equals(userId))) { return false; } // 逻辑删除 message.setIsDeleted(1); return chatMessageMapper.updateById(message) > 0; } ``` #### 3.4.5 获取消息详情 ```java /** * 根据ID获取消息 * @param messageId 消息ID * @return 消息实体 */ @Override public ChatMessage getMessageById(Long messageId) { return chatMessageMapper.selectById(messageId); } ``` #### 3.4.6 转换消息为视图对象 ```java /** * 将消息列表转换为视图对象列表 * @param messages 消息列表 * @param userId 当前用户ID * @return 消息视图对象列表 */ private List convertToMessageVOList(List messages, Long userId) { if (messages.isEmpty()) { return Collections.emptyList(); } List voList = new ArrayList<>(messages.size()); for (ChatMessage message : messages) { ChatMessageVO vo = new ChatMessageVO(); BeanUtils.copyProperties(message, vo); // 设置是否是自己发送的消息 vo.setIsSelf(message.getSenderId().equals(userId)); // 获取发送者信息 User sender = userService.getById(message.getSenderId()); if (sender != null) { vo.setSenderName(sender.getNickname() != null ? sender.getNickname() : sender.getUsername()); vo.setSenderAvatar(sender.getAvatar()); } voList.add(vo); } return voList; } ``` ## 四、前端WebSocket实现详解 ### 4.1 WebSocket连接管理前端通过封装的`websocket.js`工具类管理WebSocket连接，包含了初始化、关闭、重连、心跳检测等功能： ```javascript /** * websocket.js - WebSocket连接管理工具 */ import { useUserStore } from '@/stores/user' import { encryptMessage, decryptMessage } from './crypto' // WebSocket实例 let socket = null // 重连计时器 let reconnectTimer = null // 心跳计时器 let heartbeatTimer = null // 消息回调函数 const messageCallbacks = new Map() // 是否正在重连 let isReconnecting = false // 重连次数 let reconnectCount = 0 // 最大重连次数 const MAX_RECONNECT_COUNT = 5 // 重连间隔(ms) const RECONNECT_INTERVAL = 3000 // 心跳间隔(ms) const HEARTBEAT_INTERVAL = 30000 // 待发送的消息队列 let pendingMessages = [] // WebSocket状态 let wsStatus = { connected: false, connecting: false, retrying: false } /** * 初始化WebSocket连接 * 创建新的WebSocket连接，设置事件处理程序 */ export function initWebSocket() { if (socket && socket.readyState === WebSocket.OPEN) return closeWebSocket() const userStore = useUserStore() if (!userStore.token) { console.error('用户未登录，无法建立WebSocket连接') return } // 获取后端接口的基础URL const baseUrl = import.meta.env.VITE_API_BASE_URL || '' // 构建WebSocket URL // 由于Vite开发服务器默认运行在5173端口，而后端可能运行在其他端口（如8080）， // 我们需要确保WebSocket连接到正确的后端服务 // 假设后端服务运行在8080端口 const backendPort = "8080" const host = window.location.hostname const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:' // 直接使用后端地址和端口 const wsUrl = `${wsProtocol}//${host}:${backendPort}` console.log('正在连接WebSocket:', `${wsUrl}/api/websocket/chat/${userStore.token}`) // 创建WebSocket连接 try { socket = new WebSocket(`${wsUrl}/api/websocket/chat/${userStore.token}`) } catch (error) { console.error('创建WebSocket连接失败:', error) return } // 连接建立 socket.onopen = () => { console.log('WebSocket连接已建立') wsStatus.connected = true wsStatus.connecting = false wsStatus.retrying = false reconnectCount = 0 isReconnecting = false if (reconnectTimer) { clearTimeout(reconnectTimer) reconnectTimer = null } startHeartbeat() // 如果有待发送的消息，连接成功后发送 if (pendingMessages && pendingMessages.length > 0) { console.log('开始发送之前未发送的消息:', pendingMessages.length) const messagesToSend = [...pendingMessages] pendingMessages = [] messagesToSend.forEach(msg => { try { socket.send(JSON.stringify(msg)) } catch (error) { console.error('发送缓存消息失败:', error) // 如果发送失败，重新加入队列 pendingMessages.push(msg) } }) } } // 接收消息 socket.onmessage = (event) => { try { const data = JSON.parse(event.data) // console.log('WebSocket收到消息:', data) if (data.code === 200) { // 解密消息内容 if (data.data && typeof data.data === 'object' && data.data.content) { // 检查是否有消息内容需要解密 data.data.content = decryptMessage(data.data.content); } // 遍历消息回调函数并执行 messageCallbacks.forEach((callback) => { callback(data) }) } else { // console.error('WebSocket收到错误消息:', data.message) } } catch (error) { console.error('WebSocket消息解析失败:', error) } } // 连接关闭 socket.onclose = (event) => { console.log('WebSocket连接已关闭, 代码:', event.code, '原因:', event.reason) wsStatus.connected = false wsStatus.connecting = false stopHeartbeat() if (!isReconnecting && reconnectCount < MAX_RECONNECT_COUNT) { reconnect() } else if (reconnectCount >= MAX_RECONNECT_COUNT) { console.error('WebSocket重连次数已达上限，请刷新页面重试') } } // 连接错误 socket.onerror = (error) => { console.error('WebSocket连接出错:', error) wsStatus.connected = false closeWebSocket() if (!isReconnecting && reconnectCount < MAX_RECONNECT_COUNT) { reconnect() } } } /** * 关闭WebSocket连接 */ export function closeWebSocket() { if (socket) { try { socket.close() } catch (error) { console.error('关闭WebSocket连接出错:', error) } finally { socket = null } } stopHeartbeat() wsStatus.connected = false wsStatus.connecting = false wsStatus.retrying = false } /** * 重新连接WebSocket */ function reconnect() { if (isReconnecting || reconnectCount >= MAX_RECONNECT_COUNT) return isReconnecting = true wsStatus.retrying = true reconnectCount++ console.log(`WebSocket正在尝试第${reconnectCount}次重连...`) if (reconnectTimer) { clearTimeout(reconnectTimer) } reconnectTimer = setTimeout(() => { isReconnecting = false initWebSocket() }, RECONNECT_INTERVAL) } /** * 启动心跳检测 */ function startHeartbeat() { stopHeartbeat() heartbeatTimer = setInterval(() => { if (socket && socket.readyState === WebSocket.OPEN) { // 发送心跳消息 socket.send(JSON.stringify({ type: 'heartbeat', data: { timestamp: new Date().getTime() } })) } }, HEARTBEAT_INTERVAL) } /** * 停止心跳检测 */ function stopHeartbeat() { if (heartbeatTimer) { clearInterval(heartbeatTimer) heartbeatTimer = null } } /** * 发送消息 * @param {object} message 消息对象 * @returns {boolean} 是否成功发送 */ export function sendWebSocketMessage(message) { if (!socket || socket.readyState !== WebSocket.OPEN) { const stateText = !socket ? 'null' : socket.readyState === 0 ? 'CONNECTING' : socket.readyState === 1 ? 'OPEN' : socket.readyState === 2 ? 'CLOSING' : 'CLOSED'; console.error(`WebSocket未连接, 状态: ${stateText}`) // 保存消息到待发送队列 console.log('消息将在连接成功后发送:', message) pendingMessages.push(message) // 如果没有连接或正在重连，则尝试重新连接 if (!wsStatus.connecting && !wsStatus.retrying) { console.log('尝试重新连接WebSocket...') initWebSocket() } return false } try { socket.send(JSON.stringify(message)) return true } catch (error) { console.error('WebSocket发送消息失败:', error) pendingMessages.push(message) return false } } /** * 添加消息监听回调函数 * @param {string} key 回调函数的键 * @param {function} callback 回调函数 */ export function addMessageListener(key, callback) { if (typeof callback === 'function') { messageCallbacks.set(key, callback) } } /** * 移除消息监听回调函数 * @param {string} key 回调函数的键 */ export function removeMessageListener(key) { messageCallbacks.delete(key) } /** * 发送聊天消息 * @param {number} receiverId 接收者ID * @param {string} content 消息内容 * @param {number} messageType 消息类型：0-文本，1-图片，2-语音，3-视频，4-文件 * @param {string} mediaUrl 媒体文件URL * @returns {boolean} 是否成功发送 */ export function sendChatMessage(receiverId, content, messageType = 0, mediaUrl = '') { // 加密消息内容 const encryptedContent = encryptMessage(content); return sendWebSocketMessage({ type: 'chat', data: { receiverId, content: encryptedContent, messageType, mediaUrl } }) } /** * 发送已读消息 * @param {number} sessionId 会话ID * @returns {boolean} 是否成功发送 */ export function sendReadMessage(sessionId) { return sendWebSocketMessage({ type: 'read', data: { sessionId } }) } /** * 发送撤回消息 * @param {number} messageId 消息ID * @returns {boolean} 是否成功发送 */ export function sendRecallMessage(messageId) { return sendWebSocketMessage({ type: 'recall', data: { messageId } }) } /** * 获取WebSocket连接状态 * @returns {Object} WebSocket状态对象 */ export function getWebSocketStatus() { return { ...wsStatus } } ``` ### 4.2 消息加密与解密为保护用户隐私，前端使用AES加密算法对聊天内容进行加密处理，在`crypto.js`中实现： ```javascript /** * 聊天加密工具类 * 使用 AES 加密算法对聊天消息进行加密和解密 */ import CryptoJS from 'crypto-js' // 默认密钥，应该与后端保持一致 const DEFAULT_SECRET_KEY = 'mNu7UVEE4gMQQVEXWWvzkg==' /** * 加密消息 * @param {string} plainText 明文消息 * @param {string} [secretKey=DEFAULT_SECRET_KEY] 可选密钥 * @returns {string} 加密后的Base64编码字符串 */ export function encryptMessage(plainText, secretKey = DEFAULT_SECRET_KEY) { if (!plainText) return plainText try { // Base64解码密钥 const key = CryptoJS.enc.Base64.parse(secretKey) // 使用AES加密 const encrypted = CryptoJS.AES.encrypt(plainText, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }) // 返回Base64编码的加密结果 return encrypted.toString() } catch (error) { console.error('消息加密失败:', error) return plainText // 加密失败时返回原文 } } /** * 解密消息 * @param {string} encryptedText 加密后的Base64编码字符串 * @param {string} [secretKey=DEFAULT_SECRET_KEY] 可选密钥 * @returns {string} 解密后的明文 */ export function decryptMessage(encryptedText, secretKey = DEFAULT_SECRET_KEY) { if (!encryptedText) return encryptedText try { // Base64解码密钥 const key = CryptoJS.enc.Base64.parse(secretKey) // 使用AES解密 const decrypted = CryptoJS.AES.decrypt(encryptedText, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }) // 将解密结果转换为UTF8字符串 return decrypted.toString(CryptoJS.enc.Utf8) } catch (error) { console.error('消息解密失败:', error) return encryptedText // 解密失败时返回原文 } } /** * 判断是否为加密文本 * @param {string} text 待判断的文本 * @param {string} [secretKey=DEFAULT_SECRET_KEY] 可选密钥 * @returns {boolean} 是否为加密文本 */ export function isEncryptedMessage(text, secretKey = DEFAULT_SECRET_KEY) { if (!text) return false try { // 尝试解密 const decrypted = decryptMessage(text, secretKey) // 如果解密结果不为空且不等于原文，则认为是加密文本 return decrypted && decrypted !== text } catch (error) { return false // 解密出错，不是加密文本 } } ``` ### 4.3 聊天API接口封装前端使用封装的API接口与后端进行通信，包括获取会话列表、消息历史等功能： ```javascript /** * 聊天相关API接口 */ import request from '@/utils/request' import { decryptMessage, encryptMessage } from '@/utils/crypto' /** * 处理会话列表响应数据，对消息内容进行解密 * @param {Object} response 响应数据 * @returns {Object} 处理后的响应数据 */ function processChatSessionsResponse(response) { if (response.code === 200 && response.data) { // 处理会话列表中的加密消息 response.data.forEach(session => { if (session.lastMessage) { session.lastMessage = decryptMessage(session.lastMessage) } }) } return response } /** * 处理消息列表响应数据，对消息内容进行解密 * @param {Object} response 响应数据 * @returns {Object} 处理后的响应数据 */ function processChatMessagesResponse(response) { if (response.code === 200 && response.data) { // 处理消息列表中的加密消息 response.data.forEach(message => { if (message.content) { message.content = decryptMessage(message.content) } }) } return response } /** * 获取用户的会话列表 * @param {number} userId 用户ID * @returns {Promise

聊天

{{ currentSession.targetName || '会话' }}