# 智能在线客服

**Repository Path**: hnxiaolei/kefu

## Basic Information

- **Project Name**: 智能在线客服
- **Description**: 基于vue+node+socket+vant+mysql实现的在线客服系统，前后端分离，浏览器指纹作为访客唯一id，内置chatGPT智能回复，采用RSA加解密数据，防sql注入，xss，可发送图片表情、查询历史消息、留言、踢人等，更多功能等待后续更新。
简单快速部署，基本每隔几行我都有写备注，可读性强，目前功能不是很多，欢迎进行二次开发
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 19
- **Created**: 2023-11-15
- **Last Updated**: 2023-11-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 1.介绍

+	基于vue+node+socket+vant+mysql实现的在线客服系统，前后端分离，浏览器指纹作为访客唯一id，内置chatGPT智能回复，采用RSA加解密数据，
	防sql注入，xss，可发送图片表情、查询历史消息、留言、踢人、排队等待，更多功能等待后续更新。简单快速部署，基本每隔几行我都有写备注，可读性强，
	目前功能不是很多，欢迎进行二次开发

-------------------------------------------------------------------------------------------------
### 2.在线地址 
+    已经解决https跨域问题，在线访问时请使用https协议访问，在线预览的后端目前是没有配置http的。因为使用了https协议，所以首次访问会更慢一些
+	 在线体验地址（客服端）：https://ctrlc.cc/kefu/index.html#/customerService  账号密码都是666 
+	 在线体验地址（用户端）：https://ctrlc.cc/kefu/#/  		
-------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------
### 3.实现截图
![截图1](https://47image.oss-cn-heyuan.aliyuncs.com/github/kefu/11.jpg)

![截图2](https://47image.oss-cn-heyuan.aliyuncs.com/github/kefu/12.jpg)

![截图3](https://47image.oss-cn-heyuan.aliyuncs.com/github/kefu/13.jpg)

-------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------
### 4.实现功能 
+	 实时聊天，发送文字、图片、表情、查看历史消息
+	 留言与回复留言
+	 中英文
+    同一个浏览器多开窗口会强制另一个窗口下线
+	 用户端手机电脑布局适
+	 客服端设置昵称、设置同时最多连接人数（设置之后均需要重新刷新才生效，如果某个用户下线导致其它的被排挤掉，这是因为你用了同一个浏览器） 
+	 客服端可以快捷回复
+	 其它的就不一一描述了
-------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------
### 5.信息扩展 
+	 通过在网站首页路径添如：'http://localhost:9528/#/extend=U2FsdGVkX1+wRkrtqZWOo1sHUZju4yVBHomgLTVsKr5vPX6PSrgsxKBzWsk646kDqPjFOHd29nvAMHt/1rWakekgwoM+UgKSc5wp8E1p6AuPFqmNXGEGEkMAAjJxansV'，格式必须是'?extend=xxxxxxxxx'的格式
+	 示例：
+	 	（1）自定义传值：{"userName":"轮子哥","手机号":"15012345678","性别":"男","bb":"cc"},注意必须要是对象的形式
+	 	（2）下载安装引入crypto-js依赖
+	 	（3）执行下面代码，"我们只生产轮子，不是轮子的搬运工" 和 "我家门前有两个轮子，一个是轮子，另一个也是轮子"这是两个key，你可以在socket\src\config.js中进行修改，需要相对应。
+			let encrypted = CryptoJS.AES.encrypt(
			JSON.stringify({"userName":"轮子哥","手机号":"15012345678","性别":"男","bb":"cc"}), "我们只生产轮子，不是轮子的搬运工", {
            	iv: "我家门前有两个轮子，一个是轮子，另一个也是轮子",
            	mode: CryptoJS.mode.CBC,
            	padding: CryptoJS.pad.Pkcs7
     		});
			console.log(encrypted)
+		(4)把获取出来的结果拼接到路径上面'http://localhost:9528/#/' +'?extend=U2FsdGVkX1+wRkrtqZWOo1sHUZju4yVBHomgLTVsKr5vPX6PSrgsxKBzWsk646kDqPjFOHd29nvAMHt/1rWakekgwoM+UgKSc5wp8E1p6AuPFqmNXGEGEkMAAjJxansV'
+	你传进来的值会在客服端查看用户时右侧面板的信息栏显示，其中"userName"字段会覆盖原有的默认用户名称字段，其它均作为自定义数据展示
-------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------
### 6.本地部署说明
+	环境说明：node版本最低16，有些依赖要求最低版本为16，低于16可能会报错。service为node后端，socket为vue前端，后端端口号3030，前端端口号9528。数据库使用mysql，数据库名chat，如果mysql不兼容导入错误，先创建一个空数据库，把chat.sql打开复制，在mysql可视化工具里粘贴进行sql执行。代码默认是使用http协议，如需使用https协议请看下面部署说明。
+	找到service\DB\sqlPool.js文件，更换你自己的数据库账号密码  
+	以上都修改好了之后：  
	 	cd 进入service文件夹：  安装依赖：npm install  ；运行：node service.js  
		cd进入socket文件夹：    运行：npm run serve   ；安装依赖：npm install  ；打包：npm run build 
+	运行起来或打包之后，用户端访问路径为：http://localhost:9528/#/  客服端访问路径为： http://localhost:9528/#/customerService  
-------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------
### 7.服务器部署说明
+	找到socket\src\config.js文件，确保environment为build，apiUrl更换为： http://xx.你的ip地址.xx:3030，一定要使用ip地址，不要使用localhost
+   部署时不要把后端丢在网站目录下面
-------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------
### 8.服务器https协议部署说明
+	找到socket\src\config.js文件，确保apiUrl的后端路径是https协议，如：https://xx.xx.xx.xx:3030
+	找到service\service.js文件，有注释提示，将指定http那部分代码注释掉，然后取消https那部分代码的注释
+   在service.js中找到代码：
	const options = {
		key: fs.readFileSync('./ctrlc.cc.key'),
		cert: fs.readFileSync('./ctrlc.cc.pem'),
	};
	配置域名证书路径
+	如果有任何疑问：直接加QQ 3217454073 
-------------------------------------------------------------------------------------------------