GithubHelp home page GithubHelp logo

liuergouzi / kefu Goto Github PK

View Code? Open in Web Editor NEW
18.0 2.0 7.0 2.98 MB

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

JavaScript 38.45% HTML 0.71% Vue 49.24% CSS 11.60%

kefu's Introduction

1.介绍

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

2.在线地址



3.实现截图

截图1

截图2

截图3



4.实现功能

  • 实时聊天,发送文字、图片、表情、查看历史消息
  • 留言与回复留言
  • 中英文
  • 同一个浏览器多开窗口会强制另一个窗口下线
  • 用户端手机电脑布局适
  • 客服端设置昵称、设置同时最多连接人数,超过指定次数后面的用户连接时会进入排队等待(如果某个用户下线导致其它的被排挤掉,这是因为你用了同一个浏览器)
  • 客服端可以快捷回复、自定义设置快捷回复
  • 可以连接指定客服、随机连接客服,指定连接客服时如果客服不在线,登录后会有离线消息记录


5.信息扩展



6.本地部署说明

  • 环境说明:node版本最低16,有些依赖要求最低版本为16,低于16可能会报错。service为node后端,socket为vue前端,后端端口号3030,前端端口号9528。数据库使用mysql,数据库名chat,如果mysql不兼容导入错误,先创建一个空数据库,把chat.sql打开复制,在mysql可视化工具里粘贴进行sql执行。代码默认是使用http协议,如需使用https协议请看下面部署说明。

  • 找到service\config.js文件,更换你自己的数据库账号密码

  • 以上都修改好了之后:
    cd 进入service文件夹: 安装依赖:npm install ;运行:node serve cd进入socket文件夹: 运行:npm run serve ;安装依赖:npm install ;打包:npm run build

  • 运行起来或打包之后,用户端访问路径为:http://localhost:9528/#/ 客服端访问路径为: http://localhost:9528/#/customerService

  • 部署之后将客服使用a标签打开就行了

    <a href="https://ctrlc.cc/kefu/index.html#/" onclick="window.open(this.href, '_blank', 'width=400,height=700'); return false;">打开示例</a>

    点我直接打开客服示例



7.服务器部署说明



8.服务器https协议部署说明

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.