在线客服系统VUE+PHP全开源搭建教程——卡密登录+无限新增客服实战记录

去年接了个私活，甲方要做一个内嵌到自己网站里的客服聊天窗口，要求客服账号要能随时新增、不需要绑定邮箱、直接用卡密登录。找了一圈市面上那些SaaS客服产品，要么按坐席收费（一个月几百块），要么不支持自部署，最后找到这套基于VUE开发前端、PHP写后端的全开源在线客服系统，源码可以直接拿来改，部署下来只要一个月服务器费用。

在线客服系统界面-1

一、系统功能介绍

这套在线客服系统的核心功能我实际跑通过，列一下：

  1. 卡密登录机制：客服端不用注册账号，后台生成一张卡密，客服拿到就能登录，权限到期自动失效。
  2. 无限新增客服账号：后台可以批量生成卡密，理论上没有上限，适合兼职外包团队。
  3. 前端VUE开发：聊天窗口是独立SPA，可以嵌入到任何网站，支持自定义品牌色和Logo。
  4. 后端PHP全开源：逻辑层用PHP写的，WebSocket连接用了Workerman，消息实时推送延迟在200ms内。
  5. 多会话并发：一个客服可同时接待多个用户，后台看板显示每个会话排队情况。
  6. 消息记录存储：所有聊天记录存MySQL，支持导出CSV，方便做客服质检。
  7. 快捷回复库：后台可以预设常用话术，客服一键引用，提升响应速度。
在线客服系统界面-2

二、搭建准备与环境要求

在动手之前，这几个前提条件必须先确认好，不然后面会踩坑：

  • ✅ 服务器：Linux系统，推荐Ubuntu 20.04或CentOS 7，内存最低1GB（建议2GB以上）
  • ✅ PHP版本：7.4 或 8.0，必须开启 pcntl、posix、sockets 扩展（Workerman要求）
  • ✅ MySQL版本：5.7 或 8.0，导入附带的SQL文件即可
  • ✅ Nginx配置：VUE前端打包后放到Nginx静态目录，后端PHP用PHP-FPM
  • ✅ 端口开放：Workerman默认监听7272端口，服务器安全组/防火墙要放行
  • ✅ SSL证书：WebSocket要用WSS协议，所以域名必须上HTTPS
  • ✅ Node.js环境：本地打包VUE需要Node.js 14+，服务器上不需要
在线客服系统界面-3

三、常见问题与踩坑记录

3.1 Workerman无法启动

最常见的原因是PHP缺少扩展。用 php -m | grep -E 'pcntl|posix|sockets' 检查，三个都要有。如果是宝塔面板，要在软件商店里单独安装扩展，不是直接改php.ini。

3.2 前端连不上WebSocket

前端VUE里的 config.js 里有个 wsUrl 配置，要改成你自己的域名+端口。另外，Nginx要配置WebSocket代理，加上 Upgrade 和 Connection 头，不然浏览器会报101握手失败。

3.3 卡密批量生成后导入失败

后台导入卡密CSV时，字段顺序不能错。我遇到过因为Excel自动把数字型卡密转科学计数法导致导入失败的问题，解决办法是把卡密列格式设为文本再导出。

3.4 消息发送延迟高

我第一次部署时延迟有2秒多，排查后发现是服务器在国内DNS解析慢。把 Workerman 的 $worker->count 进程数从1改成4之后，延迟降到200ms以内了。

在线客服系统界面-4

四、定制扩展方案

这套系统源码完全开放，常见的定制需求都可以自己改或者找人改：

  • 对接企业微信/钉钉通知：当用户发起会话时，向客服企微推送提醒，避免客服没盯着系统漏单。
  • 多语言支持：前端VUE有i18n结构，加一个语言JSON文件就能切换，适合跨境业务。
  • 客服绩效统计：在后台加一个报表模块，统计每个客服的接待量、满意度打分、平均响应时间。
  • 访客轨迹追踪：把访客浏览过的页面路径传给客服端，客服能看到用户在关注什么，更好引导成交。
  • 机器人自动回复：接入大模型做第一层智能回复，命中关键词自动回复，转人工率降低30%+。
在线客服系统界面-5

💡 重要提示：部署完成后务必修改后台默认密码，并把后台登录路径从默认的 /admin 改成随机字符串，防止暴力破解。这套系统用在生产环境一定要上防CC攻击的安全策略。

五、FAQ 常见问题

Q1：这套系统可以同时支持多少在线客服？
A：理论上无上限，实际取决于服务器配置。2核4G的VPS实测同时在线20个客服+200个访客没问题，再往上要做负载均衡。

Q2：卡密过期后数据还在吗？
A：聊天记录存在MySQL里，和卡密无关，卡密只控制登录权限。过期后重新生成一张新卡密绑定同一个客服账号，历史记录全部保留。

Q3：前端可以嵌入到微信H5页面吗？
A：可以，VUE打包后是标准H5，微信内置浏览器能正常打开，WebSocket也支持。但要注意微信的长连接在后台切换时会断开，需要加重连逻辑。

Q4：源码商用有限制吗？
A：源码开源，商用没有版权限制，建议在系统底部保留原作者链接，算是对开源社区的尊重。

在线客服系统界面-6

原文参考

本文内容参考自：https://yanshigw.top/19613.html（新版客服系统/在线客服系统/前端VUE-系统演示站）

#在线客服系统 #VUE客服系统 #PHP客服源码 #卡密客服系统 #开源客服系统