ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
1、准备域名 至少 2个 域名 ``` 1个域名用于 api接口 例如 api.baidu.com 1个域名用于客服端访问 例如 baidu.com ``` 2、服务器环境 采用宝塔 LNMP环境 | 软件 | 版本 | | --- | --- | | php | 7.4 | | mysql | 5.7 | | nginx | 1.21.4 | > nginx版本视情况而定,新的就行 3、目录结构 ![](https://img.kancloud.cn/33/32/3332929cb2fd835d4e1dcbccbed3c0c5_810x292.png) api 是整个系统的接口和总管理后台的代码 socket 是通信服务端 web 是商户端的vue源码 ## **API接口搭建** (1)搭建服务端 ,前提我们有域名 例如 `api.xxx.com` ![](https://img.kancloud.cn/7f/e2/7fe2c0e63db55d8f854dcc635e0c298b_2351x1530.png) >[danger] 第4步选择 源码的 放过去的api目录,入下 ![](https://img.kancloud.cn/80/0a/800ae3cd5e2ed377c0fb9a8dd1131e92_1238x552.png) (2)然后选择运行目录 ![](https://img.kancloud.cn/09/2d/092dd283e32b38fba9221969324e2c89_1307x640.png) 选择 api 下的 public 目录 (3)设置伪静态 ![](https://img.kancloud.cn/a6/75/a675f7b1097fd9a6ccb23d9ca98a2196_1370x1184.png) 下拉选择 thinkphp 保存即可 (4)设置ssl ![](https://img.kancloud.cn/28/cd/28cd37a99f588bb887c9aa29d702168d_1334x1248.png) 签名并开启强制 https (5)新建数据库 ![](https://img.kancloud.cn/75/5e/755e62d31a82ac5c07f5ed2c2ab7f67e_2416x1335.png) 链接数据,并导入 api 下的 qiayun.sql (6) 配置系统 api下的config/database.php 配置刚才新建的数据库和密码 ![](https://img.kancloud.cn/6b/a9/6ba912cb6732419f07eae0f9277f28e9_1530x1427.png) (7)配置系统信息 api/config/qiayun.php ![](https://img.kancloud.cn/ff/e9/ffe9a7caacbd8c074b4b435e92a7e6c7_1322x1283.png) | 位置 | 说明 | | --- | --- | | 1 | 配置ssl,则写 wss:// 否则写 ws:// | | 2 | 配置您的api域名+端口 例如本例子是 api.zxc1122.xyz:2020 | | 3 | 配置api接口的完成域名 | | 4 | 你有多少个前端的访问域名 配置多少个 域名 + '/#/webchat/' | ## **编译商户端** 源码包 web下的目录 是 客服的商户端vue源码 ![](https://img.kancloud.cn/62/59/6259646943dfba1860c849a6c2e27a73_794x596.png) 保证你的电脑安装了 node 环境,进入源码目录,执行 ``` npm i ``` 并修改 src/config/index.js ![](https://img.kancloud.cn/4d/54/4d5480336b192611317b8b2b010b3119_931x446.png) 配置刚才配置好的 api 路由地址 执行 ``` npm run build ``` 编译出的源码在 web/dist ![](https://img.kancloud.cn/eb/76/eb760a9b0a2051a49c414143da4554b2_458x418.png) 准备好的域名,新建一个 纯静态站点,将dist下的源码 全部上传 ![](https://img.kancloud.cn/08/ec/08ec8f35dd5db11d04c7397475e2e899_1411x1142.png) ## 启动 websocket 服务端 宝塔安全放开 2020 端口![](https://img.kancloud.cn/36/d4/36d45f0556b9f25d9028dd843d15de9a_1483x903.png) 同时确保服务器安全组也放开了 2020端口 (1)上传 源码中socket 源码到服务器,确定好 cli 模式的php版本 ![](https://img.kancloud.cn/cd/64/cd6432cd4fa03902614437a84a7272a9_2507x1267.png) (2)并到已安装的php里面找到对应的版本,设置![](https://img.kancloud.cn/f0/48/f048db7b93786b6aa86de9befb7d1b1a_2397x1446.png) 找到disable_functions 在前面加个 `;` 注释掉,并保存 (3)找到socet源码的包下的config文件 ![](https://img.kancloud.cn/e3/81/e381d7b7c55004ea799687e36162c66f_1783x1270.png) 配置数据库信息,配置ssl证书信息 >[danger] 证书的位置就是找到 api接口的网站,打开nginx的配置文件 > ![](https://img.kancloud.cn/46/8a/468af6ab6d2b5d9f23b5dc0b87d6e140_3753x1537.png) (4)打开命令行输入 ``` php start.php start -d ``` ![](https://img.kancloud.cn/d0/58/d058873071ef4d79e30e70c9d601e834_2457x1577.png) >[danger] 注意执行目录要在 socket 下 ## 默认地址和账号 总后台:api配置的域名/admin 账号 admin 密码 admin 在总后台创建商户就可以进入商户了 ## 编译H5端 ![](https://img.kancloud.cn/16/b3/16b375c1db185082aa1951101a727eb3_1649x984.png) 用hbuildx 打开 h5-app ,然后打开config 下的 app.js | 配置 | 地址 | | --- | --- | | BASE_URL | 访问的接口地址 比如 api.zxc1122.xyz | | WEBSOCKET | websocket连接地址 如果采用了cdn,注意地址 | 选择 >> 发行 >> 网站-PC WEB 或手机H5 这个选项 ![](https://img.kancloud.cn/28/8c/288c52bc7b33b3dfde80d61802c45c8f_3024x4032.png) 打包完成后,会在有个 h5 目录 ![](https://img.kancloud.cn/64/fd/64fdbea1c21ba44d3967700f1328df4e_704x1096.png) 然后把这个 h5目录复制到 api程序的 public 目录下 ![](https://img.kancloud.cn/81/c7/81c779929bf8dc2aded9385c649b216b_677x1112.png)