轻量级在线客服聊天系统

一、系统架构

┌─────────────┐ HTTP/WebSocket ┌─────────────────┐ │ 客户端 │ ←──────────────────── │ Node.js 服务器 │ │ (手机/PC) │ │ │ └─────────────┘ │ - Express │ │ - WebSocket │ ┌─────────────┐ HTTP/WebSocket │ - lowdb │ │ 客服工作台 │ ←──────────────────── │ │ │ (PC版/手机版)│ └────────┬────────┘ └─────────────┘ │ │ JSON 文件 ▼ ┌─────────────┐ │ data.json │ │ (数据库) │ └─────────────┘

二、技术栈

后端技术

技术	说明
`Node.js`	JavaScript 运行时环境
`Express`	HTTP 服务器框架，处理路由和静态文件
`WebSocket` (ws)	实时双向通信，消息推送
`lowdb`	轻量级 JSON 文件数据库
`bcryptjs`	密码加密存储
`jsonwebtoken`	JWT Token 用户认证

前端技术

技术	说明
`原生 HTML/CSS/JS`	无框架依赖，简单轻量
`WebSocket API`	浏览器原生 WebSocket
`Base64`	图片编码传输
`CSS Flexbox`	响应式布局

三、核心功能

1. 实时通信

使用 WebSocket 实现浏览器与服务器的实时双向通信：

// 服务器端
const WebSocket = require('ws');
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    const data = JSON.parse(message);
    // 处理消息
  });
  ws.send(JSON.stringify({ type: 'message', text: 'Hello' }));
});

2. 消息推送机制

客服发送消息时，服务器主动推送给目标客户：

// 服务器根据客户手机号查找连接，推送消息
function sendToClient(phone, message) {
  const client = clients.get(phone);
  if (client && client.readyState === WebSocket.OPEN) {
    client.send(JSON.stringify(message));
  }
}

3. 图片发送

图片通过 Base64 编码在网络中传输，无需文件存储：

// 客户端将图片转为 Base64
const reader = new FileReader();
reader.onload = (e) => {
  const base64 = e.target.result;
  ws.send(JSON.stringify({ type: 'image', image: base64 }));
};
reader.readAsDataURL(file);

4. 客服分配

客户首次发起对话时，系统自动分配给在线客服：

// 优先分配给当前在线客服
const onlineAgents = agents.filter(a => a.online);
if (onlineAgents.length > 0) {
  const agent = onlineAgents[0];
  // 绑定客户与客服
}

5. 消息存储

使用 lowdb 将数据存储为 JSON 文件，简单高效：

const low = require('lowdb');
const FileSync = require('lowdb/adapters/FileSync');

const adapter = new FileSync('data.json');
const db = low(adapter);

// 存储消息
db.get('messages')
  .push({ phone, text, role, time: new Date() })
  .write();

四、页面路由

路径	页面	说明
`/` 或 `/chat`	客户端聊天页	客户使用的页面
`/kf`	客服工作台(PC)	电脑端客服管理页面
`/kfm`	客服工作台(手机)	移动端客服页面
`/admin`	超级管理员后台	管理客服账号

五、项目结构

ZhangChatApp/ ├── server.js # 主服务器文件 ├── package.json # 依赖配置 ├── data.json # 数据库文件 └── public/ ├── chat.html # 客户端页面 ├── kf.html # PC客服工作台 ├── kfm.html # 手机客服工作台 └── admin.html # 管理员后台

六、部署方式

方式一：直接运行

npm install
npm start

方式二：PM2 进程管理

npm install -g pm2
pm2 start server.js --name chat
pm2 save
pm2 startup

        提示：生产环境建议使用 PM2，可以实现开机自启、自动重启等功能。
      

方式三：配合 Nginx/IIS 反向代理

使用 Nginx 或 IIS 作为反向代理，可以：

绑定域名访问
开启 HTTPS
实现多站点托管
隐藏真实服务器信息

七、系统特点

轻量级无数据库依赖跨平台实时通信部署简单易于扩展移动端适配图片消息

详细说明

轻量级 - 无需安装 MySQL、MongoDB 等数据库，JSON 文件即可存储数据
跨平台 - 支持 Windows、Linux、Mac 系统运行
实时性强 - WebSocket 保证消息即时送达
部署简单 - 一条命令即可运行服务
易于扩展 - 架构清晰，代码结构简单，方便二次开发
移动端适配 - 提供独立的手机客服工作台

八、适用场景

网站在线客服
电商平台咨询
技术支持服务
内部沟通工具
小型团队协作