# chat

**Repository Path**: dj_web/chat

## Basic Information

- **Project Name**: chat
- **Description**: 客服聊天demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-29
- **Last Updated**: 2026-07-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 客服聊天 Demo（Vue 3 + Socket.IO）

包含 **客户端** 与 **管理端** 两个系统：

- 客户端：访客输入昵称即可接入咨询，系统自动分配客服
- 管理端：多客服账号同时登录，自动按“最少会话数”分配新咨询，支持将会话**流转**到其他在线客服

## 目录结构

```
chat-demo
├── server/   # Node.js + Express + Socket.IO 后端（端口 3000）
└── web/      # Vite + Vue3 前端，多页面（端口 5173）
    ├── client.html   # 客户端入口
    └── admin.html    # 管理端入口
```

## 启动方式

### 方式一：一键同时启动（推荐）

在根目录执行（首次需先安装依赖）：

```bash
npm install          # 安装 concurrently（以及前后端依赖可用 npm run install:all）
npm run install:all  # 安装 server/ 与 web/ 的依赖（首次只需一次）
npm run dev          # 同时启动后端(3000)与前端(5173)，Ctrl+C 一起停止
```

### 方式二：分别启动

```bash
# 1. 启动后端
cd server
npm install
npm start          # http://localhost:3000

# 2. 启动前端（新终端）
cd web
npm install
npm run dev        # http://localhost:5173
```

访问：

- 门户页：http://localhost:5173
- 客户端：http://localhost:5173/client.html
- 管理端：http://localhost:5173/admin.html

## 客服测试账号（密码均为 `123456`）

| 账号   | 昵称     |
| ------ | -------- |
| agent1 | 客服小张 |
| agent2 | 客服小李 |
| agent3 | 客服小王 |

## 演示流程

1. 打开两个管理端窗口，分别用 `agent1`、`agent2` 登录
2. 打开多个客户端窗口，输入不同昵称接入 —— 会话会自动分配给会话数最少的客服
3. 在管理端会话窗口右上角选择目标客服，点击「流转」，会话（含历史消息）即转移到对方账户，客户侧收到系统提示
4. 客服离线时，其名下会话自动重新分配给其他在线客服；无人在线时客户进入等待队列，客服上线后自动接入