当前位置：首页 > news >正文

智能客服系统架构解析：客户端与会话页面的高效交互设计

news 2026/5/12 18:22:58

智能客服系统架构解析：客户端与会话页面的高效交互设计

摘要：本文深入探讨在线客服系统中客户端、客户会话交互页面与后端系统的高效交互机制。针对新手开发者常见的性能瓶颈和通信延迟问题，提出基于WebSocket的实时通信方案，并结合RESTful API实现异步任务处理。通过详细的架构设计和代码示例，帮助开发者构建高响应、低延迟的智能客服系统，提升用户体验和系统吞吐量。

1. 从“轮询”到“实时”：业务痛点的真实写照

刚接手客服系统时，我用最省事的办法：前端每 3 秒轮询一次/poll接口。上线第一天就翻车了：

客服页面 30 人同时在线，QPS 直接飙到 3k，数据库 CPU 90%
用户发完“你好”，平均 1.5 s 后才出现，体验被吐槽“像写信”
移动端弱网场景下，30% 请求 502，消息丢失率 5%

一句话总结：轮询=假实时+真浪费。带宽、连接、DB 都在做无用功，老板一句话：必须改。

2. 三种“实时”技术方案对比

方案	延迟	兼容性	开销	落地难度
短轮询	1~3 s	100%	极高	0 星
长轮询	0.3~1 s	100%	高	2 星
SSE	<0.2 s	95%（IE 不行）	中	3 星
WebSocket	<0.1 s	95%	低	4 星

结论：客服场景需要全双工 + 低延迟，WebSocket 是首选；SSE 只能服务端→客户端，长轮询依旧省不了握手开销。于是拍板：核心聊天走 WebSocket，辅助上传图片走 RESTful，两条路互不干扰。

3. 系统全景图：一张图看懂数据流向

说明：

客户端（React）与客服工作台（Vue）都通过wss://im.example.com/chat建立长连接
网关层（Nginx+sticky 模块）做负载均衡，转发到后端 IM 集群
后端按userId做一致性哈希，保证同一用户始终落到同一台机器
消息先写 Redis Stream，再异步刷 MySQL；Redis 做幂等校验（msgId）
机器人节点消费相同 Stream，实现“智能客服”

4. Spring Boot + WebSocket 代码实战

下面代码全部来自生产仓库，删掉了业务敏感字段，保留骨架，复制即可跑。

4.1 依赖与配置

<!-- pom.xml --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId> </dependency>

# application.yml im: heartbeat: 30 # 秒 compress-threshold: 1024 # 字节

4.2 连接建立与心跳

@Component public class ChatWsHandler extends TextWebSocketHandler { private static final Map<String, WebSocketSession> SESSION_POOL = new ConcurrentHashMap<>(); private static final String IMPERSONATE_KEY = "userId"; @Override public void afterConnectionEstablished(WebSocketSession session) { String uid = (String) session.getAttributes().get(IMPERSONATE_KEY); if (uid == null) { session.close(CloseStatus.NOT_ACCEPTABLE.withReason("miss userId")); return; } SESSION_POOL.put(uid, session); RedisUtil.setExp("im:online:" + uid, "1", 35); // 35 s 过期 } @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) { String payload = message.getPayload(); if ("ping".equals(payload)) { session.sendMessage(new TextMessage("pong")); return; } // 真正业务消息 ChatDto dto = JSON.parseObject(payload, ChatDto.class); dto.setMsgId(UUID.randomUUID().toString()); route(dto); } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) { String uid = (String) session.getAttributes().get(IMPERSONATE_KEY); SESSION_POOL.remove(uid); RedisUtil.del("im:online:" + uid); } }

心跳逻辑：客户端 30 s 发一次ping，服务端回pong；同时刷新 Redis TTL。若 35 s 内没刷新，网关层判定掉线，触发重连。

4.3 消息路由设计

private void route(ChatDto dto) { // 1. 幂等校验 Boolean absent = RedisUtil.setIfAbsent("im:msgId:" + dto.getMsgId(), "1", Duration.ofMinutes(5)); if (!Boolean.TRUE.equals(absent)) return; // 2. 写 Redis Stream RedisUtil.xAdd("im:stream", dto.toMap()); // 3. 推送给目标会话 WebSocketSession target = SESSION_POOL.get(dto.getToUserId()); if (target != null && target.isOpen()) { target.sendMessage(new TextMessage(JSON.toJSONString(dto))); } else { // 离线消息，存 MySQL 离线表 OfflineMsgRepo.save(dto); } }

4.4 会话状态管理

采用Redis Hash存储分布式会话：

key: im:session:{userId} field: unread, lastMsgId, lastTime

客服工作台刷新时，先查 Hash，再决定是否拉历史。

4.5 异常处理与背压

public void handleTransportError(WebSocketSession session, Throwable ex) { log.error("ws error,uid={}", session.getAttributes().get(IMPERSONATE_KEY), ex); if (ex instanceof IOException && ex.getMessage().contains("Broken pipe")) { // 客户端暴力关闭，直接移除 afterConnectionClosed(session, CloseStatus.SERVER_ERROR); } }

背压控制：当 Redis Stream 消费滞后 1 万条时，暂停推送，先写磁盘，防止内存暴涨。

5. 性能优化三板斧

5.1 连接池管理

每台 4C8G 容器实测可扛 4 万并发 WS，但 Linux 默认ulimit -n 1024会打脸
容器启动脚本加ulimit -n 100000，同时调大/proc/sys/net/core/somaxconn=65535
Netty 层开启SO_REUSEPORT，多线程抢队列，QPS 提升 30%

5.2 消息压缩

@Configuration public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override public void configureWebSocketTransport(WebSocketTransportRegistration registration) { registration.setMessageSizeLimit(64 * 1024) .setSendBufferSizeLimit(64 * 1024) .setSendTimeLimit(20 * 1000); // 开启 per-message deflate registration.addDecoratorFactory(new CompressionDecoratorFactory()); } }

实测 1.2 KB 的 JSON 压缩后 380 B，带宽省 60%，弱网环境下延迟再降 70 ms。

5.3 负载均衡

七层用 Nginx 1.25，开sticky cookie=route expires=1h，保证重连仍落在同一节点
四层备用 LVS + Keepalived，故障 3 秒切换
灰度发布：给客服工作台 Header 带x-canary=1，Nginx 按 Header 分流到金丝雀集群

6. 安全：别让客服系统变成“肉鸡”

6.1 认证授权

WS 握手阶段带Authorization: Bearer <jwt>，网关层统一验签，把userId写进Sec-WebSocket-Protocol透传到后端。

public class WsHandshakeInterceptor implements HandshakeInterceptor { @Override public boolean beforeHandshake(ServerHttpRequest request, ... ) { String token = request.getHeaders().getFirst("Authorization"); String userId = JwtUtil.verify(token); if (userId == null) return false; attributes.put("userId", userId); return true; } }