在线客服系统是一套可私有化部署的客服接待源码：PC 管理端给客服用，H5 页面给访客用，后端统一提供会话、消息与文件接口。它的定位很明确——用一套自建系统替换第三方客服 SaaS，把咨询数据和年费都拿回自己手里。
为什么自建而不是买 SaaS？
第三方客服 SaaS 按坐席年费收费，数据存在对方服务器上，想导出历史会话往往要额外付费或受限。对咨询量不大、但对数据归属有要求的官网和电商站来说，自建的性价比更高：一次性部署，会话与消息全落在自己的 MySQL 里。
这套系统的取舍也很清楚——它做的是够用而不是全能：没有工单流转、没有机器人、没有多渠道聚合，但访客咨询、客服接待、图片沟通、快捷回复、历史留存这些核心动作都齐了。
系统由哪几部分组成？
| 部分 | 技术 | 职责 |
|---|---|---|
| 后端 API | Node.js + Express + Sequelize + MySQL | 管理员认证、会话管理、消息收发、图片上传（Multer）、CORS 跨域 |
| PC 管理端 | Vue 3 + Vite + Element Plus | 客服接待、会话列表、快捷回复管理（wangEditor 富文本） |
| H5 访客端 | Vue 3 + Vite + Vant | 访客咨询、收发图文消息、图片预览 |
默认本地端口：API 3001、管理端 5173、H5 端 5174。
实时消息怎么实现的？
这里要说实话：用的是定时轮询，不是 WebSocket。两端都靠定时请求拉取新消息实现准实时。
这个选择有得有失：
- 好处：部署极简，不需要额外维护长连接服务；穿透反向代理、负载均衡都没有额外配置成本
- 代价：秒级延迟，且有一定比例的无效请求
对日咨询量不大的官网场景，这点开销可以忽略；真到并发上来了，把轮询换成 WebSocket 也是局部改造，消息表结构不用动。
访客端体验：不用注册就能问
H5 端自动生成访客 ID 并保持会话连续性，用户打开页面直接发消息——不注册、不填手机号。这是咨询转化率的关键：每多一步验证，就少一批询单。访客可以发文字和图片（比如拍个故障照片），消息支持图片预览。
页面按移动端适配，可以直接嵌进官网或商品详情页做售前承接。
客服侧：快捷回复是效率核心
客服在会话列表点进某个访客即可实时对话，可发文字与图片，历史消息按会话留存。提效靠快捷回复：后台用富文本编辑器预设话术，支持插入表情与图片，增删改查齐全。常见问价、发货、退换货话术存成模板后，响应时间能压到几秒。
管理端登录页与后台用统一主题色，整体观感一致。
适合谁、什么时候别选它
适合：企业官网、电商站、SaaS 产品的售前咨询承接；对数据不出内网有要求的团队；想省掉第三方客服年费的自有运维团队。
别选的情况：需要工单系统、智能机器人、多渠道（微信+微博+邮件）统一收口的复杂客服中心——这套是轻量接待工具，不是全渠道客服平台。