# 一、效果演示 ![客服聊天掩饰](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27eba19fa0e44ff3af7e4925e12520fc~tplv-k3u1fbpfcp-zoom-1.image) # 二、PHP7安装Swoole扩展 ## PHP swoole 扩展下载地址 Github：https://github.com/swoole/swoole-src/tags php官方扩展库：http://pecl.php.net/package/swoole 开源中国：http://git.oschina.net/swoole/swoole/tags ### 1.自定义安装 ``` # 下载 wget https://pecl.php.net/get/swoole-4.3.3.tgz # 解压 tar zxf swoole-4.3.3.tgz # 编译安装扩展 # 进入目录 cd swoole-4.3.3 # 执行phpize命令，产生出configure可执行文件 # 如果不知道phpize路径在哪里可以使用which phpize查看相应路径 /usr/bin/phpize # 进行配置如果不知道php-config路径在哪里可以使用which php-config 查看相应路径 ./configure --with-php-config=/usr/bin/php-config # 编译和安装 make && make install vi /etc/php.ini 复制如下代码 extension=swoole.so 放到你所打开或新建的文件中即可，无需重启任何服务 # 查看扩展是否安装成功 php -m|grep swoole ``` ### 2.宝塔面板安装PHP swoole扩展如果感觉上述安装较为复杂，可以使用宝塔面板实现一键安装 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4dc22ce207a64ad1bffdbe0a228348e0~tplv-k3u1fbpfcp-zoom-1.image) # 三、配置nginx反向代理 1. 使用xshell连接远程阿里云服务器 2. 使用命令（find / -name nginx.conf）查找nginx.conf所在的配置文件 ![查找nginx.conf配置文件](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/11dc3d59d05147a4b02af91db734ec5b~tplv-k3u1fbpfcp-zoom-1.image) 3. 使用命令（vim /etc/nginx/nginx.conf）查找进入到vim编辑器 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e2b6e7db874426f8abb7227ebea4daa~tplv-k3u1fbpfcp-zoom-1.image)![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4289c2e0d21c46cba505ad528b3f8e83~tplv-k3u1fbpfcp-zoom-1.image) 查看到可以引入`/etc/nginx/conf.d/`下的配置文件信息 4. 使用命令（cd /etc/nginx/conf.d/）进入到该路径下，并新建配置文件：`study.lishuo.net.conf` ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/998844100e3c4a2e9fa40a7c1290df14~tplv-k3u1fbpfcp-zoom-1.image) 5. 配置nginx反向代理,实现访问`study.lishuo.net`域名转发端口号到`127.0.0.1:9511`也就是转发到webscoket运行的端口号 ```bash # 反向代理的规则 study 这个名字自己随便起 upstream study{ server 127.0.0.1:9511; } server { listen 80; server_name study.lishuo.net; error_page 404 /404.html; location = /404.html { } location / { index index.php index.html index.htm; if (!-e $request_filename) { rewrite ^(.*)$ /index.php?s=/$1 last; } #wss配置 client_max_body_size 100m; proxy_redirect off; proxy_set_header Host $host;# http请求的主机域名 proxy_set_header X-Real-IP $remote_addr;# 远程真实IP地址 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;#反向代理之后转发之前的IP地址 proxy_read_timeout 604800s;#websocket心跳时间，默认是60s proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "Upgrade"; proxy_pass http://study; } error_page 500 502 503 504 /50x.html; location = /50x.html { } #添加下列信息，配置Nginx通过fastcgi方式处理您的PHP请求。 location ~ .php$ { fastcgi_pass 127.0.0.1:9001; #Nginx通过本机的9000端口将PHP请求转发给PHP-FPM进行处理。 fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; #Nginx调用fastcgi接口处理PHP请求。 } } ``` # 四、微信小程序socket合法域名配置 - 登录到微信开放平台[https://mp.weixin.qq.com/](https://mp.weixin.qq.com/) - 开发=>开发管理=>开发设置，完成合法域名设置 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d8ed268ad7de4985a2ed68d4bda6e749~tplv-k3u1fbpfcp-zoom-1.image) 到此配置已经完成了，接下来就是功能实现了，微信小程序+PHP代码 # 五、效果演示加所有核心代码 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5d4f1e826d94583b7c949ecdc23c116~tplv-k3u1fbpfcp-zoom-1.image) ## 1.小程序端代码 > 1.小程序页面代码所在路径 /pages/contact/contact.wxml ```bash

``` > 2.小程序页面样式代码所在路径 /pages/contact/contact.wxss ```bash /* pages/contact/contact.wxss */ page { background-color: #f1f1f1; } .inputRoom { width: 100vw; height: 16vw; border-top: 1px solid #cdcdcd; background-color: #f1f1f1; position: fixed; bottom: 0; display: flex; align-items: center; z-index: 20; } input { width: 76vw; height: 9.33vw; background-color: #fff; border-radius: 40rpx; margin-left: 2vw; padding: 0 3vw; font-size: 28rpx; color: #444; } .leftMsg { font-size: 35rpx; color: #444; line-height: 7vw; padding: 2vw 2.5vw; background-color: #fff; margin-left: -1.6vw; border-radius: 10rpx; z-index: 10; } .rightMsg { font-size: 35rpx; color: #444; line-height: 7vw; padding: 2vw 2.5vw; background-color: #96EB6A; margin-right: -1.6vw; border-radius: 10rpx; z-index: 10; } /*向左*/ .triangle_border_left { width: 0; height: 0; border-width: 10px 30px 30px 0; border-style: solid; border-color: transparent #fff transparent transparent; /*透明黄透明透明 */ margin: 40px auto; position: relative; } /*向右*/ .triangle_border_right { width: 0; height: 0; border-width: 0px 30px 20px 13px; border-style: solid; border-color: transparent transparent transparent #96EB6A; /*透明透明透明黄*/ margin: 40px auto; position: relative; } ``` > 3.小程序配置文件代码所在路径 /pages/contact/contact.json ```bash { "navigationBarTitleText":"柯作客服", "usingComponents": { } } ``` > 4.小程序业务逻辑代码所在路径 /pages/contact/contact.js ```js const app = getApp(); var inputVal = ''; var msgList = []; var windowWidth = wx.getSystemInfoSync().windowWidth; var windowHeight = wx.getSystemInfoSync().windowHeight; var keyHeight = 0; /** * 初始化数据 */ function initData(that) { //输入框的内容 inputVal = ''; //消息列表，包含客服和用户的聊天内容 msgList = [{ speaker: 'server', contentType: 'text', content: 'Hi，亲爱的小主，终于等到您啦！欢迎来到柯作店铺，很荣幸为您服务。' }, { speaker: 'customer', contentType: 'text', content: '你高兴的太早了' } ] that.setData({ msgList, inputVal }) } Page({ /** * 页面的初始数据 */ data: { scrollHeight: '100vh', inputBottom: 0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { //初始化websocket连接 this.chat(); //监听心跳的方法 this.webSocketXin(); //聊天方法 initData(this); //监听消息 wx.onSocketMessage(res=>{ //追加到消息列表里 msgList.push(JSON.parse(res.data)) inputVal = ''; this.setData({ msgList, inputVal }); }) }, //页面卸载时间 onUnload(){ wx.closeSocket(); }, /** * 获取聚焦 */ focus: function(e) { keyHeight = e.detail.height; this.setData({ scrollHeight: (windowHeight - keyHeight) + 'px' }); this.setData({ toView: 'msg-' + (msgList.length - 1), inputBottom: keyHeight + 'px' }) //计算msg高度 // calScrollHeight(this, keyHeight); }, //失去聚焦(软键盘消失) blur: function(e) { this.setData({ scrollHeight: '100vh', inputBottom: 0 }) this.setData({ toView: 'msg-' + (msgList.length - 1) }) }, /** * 发送点击监听 */ sendClick: function(e) { //客户发的信息 let customerMsg = { uid: 10, speaker: 'customer', contentType: 'text', content: e.detail.value }; //关闭心跳包 this.webSocketXin(60000, false) //发送给websocket wx.sendSocketMessage({ data: JSON.stringify(customerMsg), success:res=>{ //重启心跳包 this.webSocketXin(40000, true) } }) //追加到消息列表里 msgList.push(customerMsg) inputVal = ''; this.setData({ msgList, inputVal }); }, /** * 退回上一页 */ toBackClick: function() { wx.navigateBack({}) }, /** * websocket */ chat(){ //进行连接php的socket wx.connectSocket({ //wss 协议相当于你要有一个ssl证书，https //ws 就相当于不实用证书 http url: 'ws://study.lishuo.net', success: function () { console.log('websocket连接成功~') }, fail: function () { console.log('websocket连接失败~') } }) }, /** * 监听websocket心跳连接的方法 */ webSocketXin(time=60000,status=true){ var timing; if(status == true){ timing = setInterval(function () { console.log("当前心跳已重新连接"); //循环执行代码 wx.sendSocketMessage({ data: JSON.stringify({ type: 'active' }), fail(res) { //关闭连接 wx.closeSocket(); //提示 wx.showToast({ title: '当前聊天已断开', icon:'none' }) clearInterval(timing); console.log("当前心跳已关闭"); } }); }, time) //循环时间，注意不要超过1分钟 } else { //关闭定时器 clearInterval(timing); console.log("当前心跳已关闭"); } } }) ``` ## 2.服务端代码（PHP代码） > wechat_websocket.php ```php on('Open', function ($ws, $request) { echo $request->fd . '我连接上了'; }); //监听WebSocket消息事件 $ws->on('Message', function ($ws, $frame) { //把前台传过来的json字符串转成数组 $params = json_decode($frame->data, true); //判断是否是心跳消息,如果是心跳消息 if (isset($params['type']) && isset($params['type'])=='active'){ echo '这是心跳监听消息'; }else{ //先判断当前用户有没有正在连接 if (isset($params['uid']) && !empty($params['uid'] == 666)) { //去用户表查询当前用户 fd $fd = 2; } else { $fd = 1; } //客服id $ws->push($fd, json_encode($params, JSON_UNESCAPED_UNICODE)); } }); //监听WebSocket连接关闭事件 $ws->on('Close', function ($ws, $fd) { echo "client-{$fd} is closed\n"; }); $ws->start(); ``` # 六、代码已经编写完了 1. 把服务端代码上传到Linux操作系统里 2. 然后切到该目录下进行运行`php wechat_websocket.php` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c27f092da1a9413e9f6d878b522c8736~tplv-k3u1fbpfcp-zoom-1.image) # 七、END 如果最后还是没有成功实现功能的话，我把所有源代码都上传到了如下仓库地址：[客服聊天](https://gitee.com/kezuo/seckill_wechat_07)