智能聊天系统

目录

• 需求说明
• 安装教程
• 相关接口
• 数据库设计
• 技术栈
• 运行效果

一、需求说明

1.1 需求背景

提高人与人之间交流，节约客户人力成本。

1.2 需求内容

• 用户登录
• 用户注册
• 文件上件
• 密码修改
• 群聊
• AI 智能聊
• 发送消息
• 获取联系人历史消息

二、安装教程

• 环境准备
• 如何运行
• 项目配置

2.1 环境准备

要运行智能聊天系统，你需要Node.js(V10 LTS版本，例如10.6.3)开发环境和MySql数据库

• 安装 Node.js
  • 官网http://nodejs.cn/download/
  • 更推荐使用 nvm 安装 Node.js
    • 安装 nvm
    • 通过 nvm 安装 Node.js
• 安装 MySql

推荐在 Linux 和 MacOS 系统中运行，Windows 系统也兼容的，但是遇到意外问题会多一些

2.2 如何运行

• 客户端访问
• 服务器运行步骤
• nginx 反向代理配置

客户端运行说明

访问地址：http://chat.xiaowuzi.info

请使用 IE8 以上浏览访问或手机访问

服务器运行步骤

进行项目——>运行npm install——>启动后端服务npm run server——>启动前端

nginx 反向代理配置

server {
listen 80;
# 修改为你的域名
server_name chat.xiaowuzi.info;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header X-NginX-Proxy true;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;
# 路径重写
rewrite /api/(.*) /$1 break;
proxy_pass http://localhost:9090;
}
}

配置 HTTPS+HTTP2.0

server {
listen 80;
# 修改为你的域名
server_name chat.xiaowuzi.info;
return 301 https://chat.xiaowuzi.info$request_uri;
}
server {
listen 443 ssl http2;
# 修改为你的域名
server_name chat.xiaowuzi.info;
ssl on;
# 修改为你的ssl证书位置
ssl_certificate ./ssl/chat.xiaowuzi.info.crt;
ssl_certificate_key ./ssl/chat.xiaowuzi.info.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
root /data/www/chat;
location /api {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header X-NginX-Proxy true;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;
# 路径重写
rewrite /api/(.*) /$1 break;
proxy_pass http://localhost:9090;
}
}

2.3 项目配置

• 服务配置 config/server.js
• 客户端配置 config/client.js
• 客户端构建配置 webpack.js

三、相关接口

3.1 注册

• 请求地址：/api/reg
• 请求类型：POST
• 请求参数

参数名称	是否必须	示例	备注
nick	是	tony	登录名
password	是	123456	登录密码
email	是	123456@qq.com	邮箱
name	是	小武子	真实姓名

• 返回数据

名称	类型	是否必须	默认值	备注
code	number	必须	0	0 表示成功，其它值为出错
data	object	必须	{id:20191116}	略
msg	string	必须		略

3.2 登录

• 请求地址：/api/login
• 请求类型：POST
• 请求参数

参数名称	是否必须	示例	备注
username	是	fftony	登录名
password	是	123456	密码

• 返回数据

名称	类型	是否必须	默认值	备注
code	number	必须	0	0 表示成功，其它值为出错
data	object	必须	{}	略
msg	string	必须		略

3.3 添加好友

• 请求地址：/api/add-friend
• 请求类型：POST
• 请求参数

参数名称	是否必须	示例	备注
userId	是	20191117	用户 id

• 返回数据

名称	类型	是否必须	默认值	备注
code	number	必须	0	0 表示成功，其它值为出错
data	object	必须	{id:20191116}	略
msg	string	必须		略

3.4 删除好友

• 请求地址：/api/del-friend
• 请求类型：POST
• 请求参数

参数名称	是否必须	示例	备注
userId	是	20191117	用户 id

• 返回数据

名称	类型	是否必须	默认值	备注
code	number	必须	0	0 表示成功，其它值为出错
data	object	必须	{id:20191116}	略
msg	string	必须		略

3.5 修改密码

• 请求地址：/api/update-password
• 请求类型：POST
• 请求参数

参数名称	是否必须	示例	备注
userId	是	20191117	用户 id
oldPassword	是	123456	旧密码
newPassword	是	123456	新密码

• 返回数据

名称	类型	是否必须	默认值	备注
code	number	必须	0	0 表示成功，其它值为出错
data	object	必须	{id:20191116}	略
msg	string	必须		略

3.6 修改用户名

• 请求地址：/api/change-username
• 请求类型：POST
• 请求参数

参数名称	是否必须	示例	备注
username	是	tony	用户名
userId	是	20191117	用户 id

• 返回数据

名称	类型	是否必须	默认值	备注
code	number	必须	0	0 表示成功，其它值为出错
data	object	必须	{id:20191116}	略
msg	string	必须		略

3.7 摘取用户列表

• 请求地址：/api/get-user-list
• 请求类型：GET
• 请求参数

参数名称	是否必须	示例	备注
page	是	1	当前页
size	是	10	页大小

• 返回数据

名称	类型	是否必须	默认值	备注
code	number	必须	0	0 表示成功，其它值为出错
data	object	必须	{id:20191116}	略
msg	string	必须		略

3.8 发送消息

• 请求地址：/api/send-msg
• 请求类型：POST
• 请求参数

参数名称	是否必须	示例	备注
userId	是	20191117	发送人 id
msg	是	'你大爷'	消息内容

• 返回数据

名称	类型	是否必须	默认值	备注
code	number	必须	0	0 表示成功，其它值为出错
data	object	必须	{id:20191116}	略
msg	string	必须		略

3.9 获取联系人历史消息

• 请求地址：/api/msg-history
• 请求类型：GET
• 请求参数

参数名称	是否必须	示例	备注
linkmanId	是	20191117	联系人 id
existCount	是	13	已有消息数量

• 返回数据

名称	类型	是否必须	默认值	备注
code	number	必须	0	0 表示成功，其它值为出错
data	object	必须	{id:20191116}	略
msg	string	必须		略

3.10 智能接口（调用图灵机器人）

• 请求地址：/api/chatting-ai
• 请求类型：POST
• 请求参数

参数名称	是否必须	示例	备注
userid	是	你大爷	20191117
msg	是	消息内容	做的很好呀

• 返回数据

名称	类型	是否必须	默认值	备注
code	number	必须	0	0 表示成功，其它值为出错
data	object	必须	{id:20191116}	略
msg	string	必须		略

四、数据库设计

4.1 用户表

创建语句

CREATE TABLE IF NOT EXISTS `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`email` varchar(255) DEFAULT NULL,
`password` varchar(255) DEFAULT NULL,
`name` varchar(255) DEFAULT NULL,
`nick` varchar(255) DEFAULT NULL,
`detail_info` json DEFAULT NULL,
`create_time` varchar(20) DEFAULT NULL,
`modified_time` varchar(20) DEFAULT NULL,
`level` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

五、技术栈

• Vue 2.6：前端页面展示
• Socket.io：实现实时通信
• Vuex：Vuex，实现不同组件间的状态共享
• Vue-router：页面路由切换
• axios：一个基于Promise的 HTTP 库，向后端发起请求。
• Koa2：一个node.jsweb 应用框架
• Monment.js：一个时间处理的库，方便对时间进行格式化成需要的格式。
• ES6、ES7：采用 ES6 语法，箭头函数、Promise等等语法很好用。
• MySql：开源数据库
• Webpack：前端打包工具。
• SASS(SCSS)：用 SCSS 做 CSS 预处理语言，有些地方很方便。
• flex：flex 弹性布局，简单适配手机、PC 端。
• CSS3：CSS3 过渡动画及样式。

六、运行效果

6.1 登录页面

6.2 群聊页面

6.3 智能聊天页面

联系我

• 关于我：https://xiaowuzi.info
• github：https://github.com/fttony
• Email：172993974@qq.com

参考资料

• Node.js 文档
• Koa 文档
• Sockit.io 文档
• Vue.js 文档