这套客服系统 18天之前 11天开发完整 多语言 多商家 20个国家语言 实时聊天翻译 在线客服系统 全程AI进行开发的Cloudflare Workers项目项目概述本项目是一个全栈在线客服聊天系统核心目标是以极低成本为全球商家提供多语言、多租户、实时通讯的客服解决方案。它通过精巧的架构设计实现了一套代码同时部署在Cloudflare Workers边缘计算平台和传统Node.js环境兼顾了性能、成本与可移植性。架构图下图展示了系统的整体架构与数据流向清晰呈现了双运行时部署模式、核心模块划分以及各层之间的交互关系数据库抽象层核心业务模块Node.js 传统服务层Cloudflare Workers 边缘层客户端层浏览器 / Web端移动端 / 第三方Hono API 网关SSE 实时推送服务翻译引擎链Hono API 网关WebSocket / 轮询服务翻译引擎链聊天模块(/api/c)客服模块(/api/staff)管理模块(/api/admin)Database 接口D1 (CF)SQLitePostgreSQL架构说明双运行时部署同一套代码可部署在 Cloudflare Workers 边缘计算平台左侧或传统 Node.js 环境右侧通过统一的 Hono API 网关对外提供服务。实时通信Workers 环境优先使用 SSE 推送Node.js 环境支持 WebSocket / 轮询两者均通过翻译引擎链实现多语言实时翻译。数据库抽象层通过统一的Database接口屏蔽底层差异业务代码无需关心使用的是 D1、SQLite 还是 PostgreSQL。数据流向客户端请求 → API 网关 → 核心业务模块 → 数据库抽象层 → 具体存储引擎。 一、核心架构思想面向抽象的双运行时设计为了让系统不绑定于任何特定云服务商项目采用了依赖倒置原则对关键基础设施数据库、存储进行了抽象层封装。统一数据库接口接口定义展示通过定义统一的Database接口业务代码无需关心底层是D1、SQLite还是PostgreSQL。这体现了面向接口编程的思想极大地提升了系统的可迁移性和测试性。// 统一的数据库接口定义 (仅展示接口无具体实现)exportinterfaceDatabase{exec(sql:string):Promisevoidrun(sql:string,params?:unknown[]):Promise{changes:number;lastInsertRowid:number}getT(sql:string,params?:unknown[]):PromiseT|nullallT(sql:string,params?:unknown[]):PromiseT[]}单端口全栈开发模式为了提升开发体验我们通过Vite插件将前端React和后端Hono合并到同一个端口运行消除了CORS问题并实现了前后端类型定义的实时共享。// vite.config.ts 关键配置import{devServer}fromhono/te-dev-serverexportdefaultdefineConfig({plugins:[react(),devServer({entry:src/ver/index.node.ts,// 指定后端入口exclude:[// 前端路由由React接管后端仅处理API请求/^\/$/,/^\/t/,/^\/staff/,/^\/admin/,/^\/adminlogin/,],}),],})二、核心功能模块与代码示例1. 多语言自动翻译引擎链为了实现零成本、高可用的翻译我们构建了一条由多个免费或低成本API组成的翻译引擎链。核心策略是自动容灾与降级。以下是该服务的调用流程示意而非具体引擎实现。// 翻译服务流程示意 (具体引擎实现已脱敏)exportasyncfunctiontranslateWithEngine(text:string,to:string){// 1. 优先尝试 内部翻译引擎A (如内网直连AI)// 2. 若失败尝试 外部翻译引擎B (如免费RESTful API)// 3. 若失败尝试 外部翻译引擎C (作为稳定备选)// 4. 所有引擎均失败时返回原文 (优雅降级)returntranslatedText}2. 实时通信SSE 轮询降级策略针对Cloudflare Workers环境的特点我们采用SSEServer-Sent Events作为主要实时推送通道并为不兼容的环境准备了HTTP轮询降级方案。以下是客户端连接与重连的示例代码// 前端实时通信服务 (仅展示连接逻辑)classRealtimeService{privateeventSource:EventSource|nullnull;// 建立SSE连接connect(sessionId:string){this.eventSourcenewEventSource(/api/c/stream/${sessionId});this.eventSource.onmessage(event){// 处理收到的实时消息...};// 连接失败时自动降级到轮询this.eventSource.onerror(){this.startPolling();// 切换为定时轮询模式};}// 轮询降级方案 (每秒检查新消息)privatestartPolling(){setInterval(async(){constmessagesawaitthis.fetchNewMessages();// 处理新消息...},1000);}}3. 轻量级路由与状态管理前端未引入重型路由库而是采用基于URL的手动路由管理并同步浏览器历史。状态管理选用Zustand其精确的选择器能避免不必要的组件重绘保证聊天界面的流畅性。// 手动路由管理示例 (App.tsx 核心逻辑)const[currentPage,setCurrentPage]useState((){constpathwindow.location.pathname;if(path/staff)returnstaff;if(path/c)returnchat;returnhome;});// 状态管理示例 (仅展示结构非完整实现)constuseChatStorecreate((set)({messages:[],sendMessage:async(content){// 发送消息逻辑...},}));4. 模块化后端架构后端采用模块化设计每个功能模块如聊天、客服、管理拥有独立的路由、服务和测试目录。这种结构保证了代码的高内聚低耦合便于多人协作和功能扩展。// 模块注册示例app.route(/api/c,chatRoutes);app.route(/api/staff,staffRoutes);app.route(/api/admin,adminRoutes);三、总结架构的核心价值本系统架构的价值不在于使用了某个单一的新技术而在于围绕低成本国际化这一核心目标所做的系统性设计权衡可移植性通过抽象层解耦云服务商赋予系统长久的生命力。实用性翻译链、混合实时通信等方案都是在有限成本下追求极致可用性的务实之举。工程化完善的测试策略单元、集成、E2E、代码质量工具和清晰的开发工作流保障了项目的可持续演进。