经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信小程序 » 查看文章
如何利用微信小程序和php实现即时通讯聊天功能
来源：jb51　　时间：2022/4/11 10:25:52　　对本文有异议

一、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、自定义安装

  1. # 下载
  2.  
  3. wget https://pecl.php.net/get/swoole-4.3.3.tgz
  4. # 解压
  5. tar zxf swoole-4.3.3.tgz
  6. # 编译安装扩展
  7. # 进入目录
  8. cd swoole-4.3.3 
  9. # 执行phpize命令，产生出configure可执行文件
  10. # 如果不知道phpize路径在哪里 可以使用which phpize查看相应路径
  11. /usr/bin/phpize   
  12. # 进行配置  如果不知道php-config路径在哪里 可以使用which php-config   查看相应路径
  13. ./configure --with-php-config=/usr/bin/php-config   
  14. # 编译和安装
  15. make && make install 
  16. vi /etc/php.ini
  17. 复制如下代码
  18. extension=swoole.so
  19. 放到你所打开或新建的文件中即可，无需重启任何服务
  20. # 查看扩展是否安装成功
  21. php -m|grep swoole

2、宝塔面板安装PHP swoole扩展

如果感觉上述安装较为复杂，可以使用宝塔面板实现一键安装

二、配置nginx反向代理

1、使用xshell连接远程阿里云服务器

2、使用命令（find / -name nginx.conf）查找nginx.conf所在的配置文件

3、使用命令（vim /etc/nginx/nginx.conf）查找进入到vim编辑器

查看到可以引入/etc/nginx/conf.d/下的配置文件信息

4、使用命令（cd /etc/nginx/conf.d/）进入到该路径下，并新建配置文件：study.lishuo.net.conf

5、配置nginx反向代理,实现访问study.lishuo.net域名转发端口号到127.0.0.1:9511也就是转发到webscoket运行的端口号        

  1.  
  2. # 反向代理的规则 study 这个名字自己随便起
  3. upstream study{
  4.   server 127.0.0.1:9511;
  5. }
  6. server {
  7.         listen       80;
  8.         server_name  study.lishuo.net;
  9.         error_page 404 /404.html;
  10.         location = /404.html {
  11.         }
  12.         location / {
  13.           index index.php index.html index.htm;
  14.           if (!-e $request_filename) {
  15.                 rewrite  ^(.*)$  /index.php?s=/$1  last;
  16.           }
  17.         #wss配置
  18.         client_max_body_size 100m;
  19.         proxy_redirect off;
  20.         proxy_set_header Host $host;# http请求的主机域名
  21.         proxy_set_header X-Real-IP $remote_addr;# 远程真实IP地址
  22.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;#反向代理之后转发之前的IP地址
  23.         proxy_read_timeout 604800s;#websocket心跳时间，默认是60s
  24.         proxy_http_version 1.1;
  25.         proxy_set_header Upgrade $http_upgrade;
  26.         proxy_set_header Connection "Upgrade";
  27.         proxy_pass http://study;
  28.        }
  29.         error_page 500 502 503 504 /50x.html;
  30.         location = /50x.html {
  31.         }
  32.          #添加下列信息，配置Nginx通过fastcgi方式处理您的PHP请求。
  33.         location ~ .php$ {
  34.             fastcgi_pass 127.0.0.1:9001;   #Nginx通过本机的9000端口将PHP请求转发给PHP-FPM进行处理。
  35.             fastcgi_index index.php;
  36.             fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
  37.             include fastcgi_params;   #Nginx调用fastcgi接口处理PHP请求。
  38.         }
  39.     }

三、微信小程序socket合法域名配置

1、登录到微信开放平台https://mp.weixin.qq.com/

2、开发=>开发管理=>开发设置，完成合法域名设置

3、到此配置已经完成了，接下来就是功能实现了，微信小程序+PHP代码

四、效果演示和代码

1、小程序端代码

小程序页面代码所在路径 /pages/contact/contact.wxml

  1.  
  2. <!--pages/contact/contact.wxml-->
  3.  
  4. <view>
  5.  
  6. <scroll-view scroll-y scroll-into-view='{{toView}}' style='height: {{scrollHeight}};'>
  7.   <!-- <view class='scrollMsg'> -->
  8.   <block wx:key wx:for='{{msgList}}' wx:for-index="index">
  9.  
  10.     <!-- 单个消息1 客服发出（左） -->
  11.     <view wx:if='{{item.speaker=="server"}}' id='msg-{{index}}' style='display: flex; padding: 2vw 11vw 2vw 2vw;'>
  12.       <view style='width: 11vw; height: 11vw;'>
  13.         <image style='width: 11vw; height: 11vw; border-radius: 10rpx;' src='https://cdn.pixabay.com/photo/2020/02/10/12/47/girl-4836394__340.jpg'></image>
  14.       </view>
  15.       <view style='width: 4vw; height: 11vw; margin-left: 0.5vw; display: flex; align-items: center; z-index: 9;'>
  16.         <view class="triangle_border_left"></view>
  17.       </view>
  18.       <view class='leftMsg'>{{item.content}}</view>
  19.     </view>
  20.  
  21.     <!-- 单个消息2 用户发出（右） -->
  22.     <view wx:else id='msg-{{index}}' style='display: flex; justify-content: flex-end; padding: 2vw 2vw 2vw 11vw;'>
  23.       <view class='rightMsg'>{{item.content}}</view>
  24.       <view style='width: 4vw; height: 11vw; margin-right: 0.5vw; display: flex; align-items: center; z-index: 9;'>
  25.         <view class="triangle_border_right"></view>
  26.       </view>
  27.       <view style='width: 11vw; height: 11vw;'>
  28.         <image style='width: 11vw; height: 11vw; border-radius: 10rpx;' src='https://cdn.pixabay.com/photo/2021/09/24/10/00/chick-6652163__340.jpg'></image>
  29.       </view>
  30.     </view>
  31.  
  32.   </block>
  33.   <!-- </view> -->
  34.  
  35.   <!-- 占位 -->
  36.   <view style='width: 100%; height: 18vw;'></view>
  37. </scroll-view>
  38.  
  39. <view class='inputRoom' style='bottom: {{inputBottom}}'>
  40.   <image style='width: 7vw; margin-left: 3.2vw;' src='https://img95.699pic.com/element/40030/6429.png_300.png' mode='widthFix'></image>
  41.   <input bindconfirm='sendClick' adjust-position='{{false}}' value='{{inputVal}}' confirm-type='send' bindfocus='focus' bindblur='blur'></input>
  42. </view>
  43. </view>

2、小程序页面样式代码所在路径 /pages/contact/contact.wxss

  1. /* pages/contact/contact.wxss */
  2.  
  3. page {
  4.   background-color: #f1f1f1;
  5. }
  6.  
  7. .inputRoom {
  8.   width: 100vw;
  9.   height: 16vw;
  10.   border-top: 1px solid #cdcdcd;
  11.   background-color: #f1f1f1;
  12.   position: fixed;
  13.   bottom: 0;
  14.   display: flex;
  15.   align-items: center;
  16.   z-index: 20;
  17. }
  18.  
  19. input {
  20.   width: 76vw;
  21.   height: 9.33vw;
  22.   background-color: #fff;
  23.   border-radius: 40rpx;
  24.   margin-left: 2vw;
  25.   padding: 0 3vw;
  26.   font-size: 28rpx;
  27.   color: #444;
  28. }
  29.  
  30. .leftMsg {
  31.   font-size: 35rpx;
  32.   color: #444;
  33.   line-height: 7vw;
  34.   padding: 2vw 2.5vw;
  35.   background-color: #fff;
  36.   margin-left: -1.6vw;
  37.   border-radius: 10rpx;
  38.   z-index: 10;
  39. }
  40.  
  41. .rightMsg {
  42.   font-size: 35rpx;
  43.   color: #444;
  44.   line-height: 7vw;
  45.   padding: 2vw 2.5vw;
  46.   background-color: #96EB6A;
  47.   margin-right: -1.6vw;
  48.   border-radius: 10rpx;
  49.   z-index: 10;
  50. }
  51.  
  52.  /*向左*/
  53.  .triangle_border_left {
  54.   width: 0;
  55.   height: 0;
  56.   border-width: 10px 30px 30px 0;
  57.   border-style: solid;
  58.   border-color: transparent #fff transparent transparent;
  59.           /*透明       黄   透明        透明 */
  60.   margin: 40px auto;
  61.   position: relative;
  62. }
  63.  
  64.  
  65.         /*向右*/
  66.         .triangle_border_right {
  67.           width: 0;
  68.           height: 0;
  69.           border-width: 0px 30px 20px 13px;
  70.           border-style: solid;
  71.           border-color: transparent transparent transparent #96EB6A;
  72.                   /*透明       透明        透明         黄*/
  73.           margin: 40px auto;
  74.           position: relative;
  75.       }

小程序配置文件代码所在路径 /pages/contact/contact.json

  1. {
  2.   "navigationBarTitleText":"柯作客服",
  3.   "usingComponents": {
  4.   
  5.   }
  6. }

小程序业务逻辑代码所在路径 /pages/contact/contact.js

  1. // pages/contact/contact.js
  2. const app = getApp();
  3. var inputVal = '';
  4. var msgList = [];
  5. var windowWidth = wx.getSystemInfoSync().windowWidth;
  6. var windowHeight = wx.getSystemInfoSync().windowHeight;
  7. var keyHeight = 0;
  8.  
  9. /**
  10.  * 初始化数据
  11.  */
  12. function initData(that) {
  13.   //输入框的内容
  14.   inputVal = '';
  15.   //消息列表，包含客服和用户的聊天内容
  16.   msgList = [{
  17.       speaker: 'server',
  18.       contentType: 'text',
  19.       content: 'Hi，亲爱的小主，终于等到您啦！欢迎来到柯作店铺，很荣幸为您服务。'
  20.     },
  21.     {
  22.       speaker: 'customer',
  23.       contentType: 'text',
  24.       content: '你高兴的太早了'
  25.     }
  26.   ]
  27.   that.setData({
  28.     msgList,
  29.     inputVal
  30.   })
  31. }
  32.  
  33. Page({
  34.   /**
  35.    * 页面的初始数据
  36.    */
  37.   data: {
  38.     scrollHeight: '100vh',
  39.     inputBottom: 0
  40.   },
  41.  
  42.   /**
  43.    * 生命周期函数--监听页面加载
  44.    */
  45.   onLoad: function(options) {
  46.     //初始化websocket连接
  47.     this.chat();
  48.     //监听心跳的方法
  49.     this.webSocketXin();
  50.     //聊天方法
  51.     initData(this);
  52.  
  53.     //监听消息
  54.     wx.onSocketMessage(res=>{
  55.          //追加到消息列表里
  56.         msgList.push(JSON.parse(res.data))
  57.         inputVal = '';
  58.         this.setData({
  59.           msgList,
  60.           inputVal
  61.         });
  62.     })
  63.  
  64.  
  65.   },
  66.   //页面卸载时间
  67.   onUnload(){
  68.     wx.closeSocket();
  69.   },
  70.   /**
  71.    * 获取聚焦
  72.    */
  73.   focus: function(e) {
  74.     keyHeight = e.detail.height;
  75.     this.setData({
  76.       scrollHeight: (windowHeight - keyHeight) + 'px'
  77.     });
  78.     this.setData({
  79.       toView: 'msg-' + (msgList.length - 1),
  80.       inputBottom: keyHeight + 'px'
  81.     })
  82.     //计算msg高度
  83.     // calScrollHeight(this, keyHeight);
  84.  
  85.   },
  86.  
  87.   //失去聚焦(软键盘消失)
  88.   blur: function(e) {
  89.     this.setData({
  90.       scrollHeight: '100vh',
  91.       inputBottom: 0
  92.     })
  93.     this.setData({
  94.       toView: 'msg-' + (msgList.length - 1)
  95.     })
  96.   },
  97.  
  98.   /**
  99.    * 发送点击监听
  100.    */
  101.   sendClick: function(e) {
  102.     //客户发的信息
  103.     let customerMsg = {
  104.       uid: 10,
  105.       speaker: 'customer',
  106.       contentType: 'text',
  107.       content: e.detail.value
  108.     };
  109.  
  110.      //关闭心跳包
  111.      this.webSocketXin(60000, false)
  112.     //发送给websocket
  113.     wx.sendSocketMessage({
  114.       data: JSON.stringify(customerMsg),
  115.       success:res=>{
  116.         //重启心跳包
  117.         this.webSocketXin(40000, true)
  118.       }  
  119.     })
  120.  
  121.     //追加到消息列表里
  122.     msgList.push(customerMsg)
  123.     inputVal = '';
  124.     this.setData({
  125.       msgList,
  126.       inputVal
  127.     });
  128.   },
  129.   /**
  130.    * 退回上一页
  131.    */
  132.   toBackClick: function() {
  133.     wx.navigateBack({})
  134.   },
  135.   /**
  136.    * websocket
  137.    */
  138.   chat(){
  139.      //进行连接php的socket
  140.      wx.connectSocket({
  141.        //wss 协议相当于你要有一个ssl证书，https
  142.        //ws  就相当于不实用证书  http
  143.       url: 'ws://study.lishuo.net',
  144.       success: function () {
  145.         console.log('websocket连接成功~')
  146.       },
  147.       fail: function () {
  148.         console.log('websocket连接失败~')
  149.       }
  150.     })
  151.   },
  152.  
  153.  
  154.   /**
  155.    * 监听websocket心跳连接的方法
  156.    */
  157.   webSocketXin(time=60000,status=true){
  158.     var timing;
  159.     if(status == true){
  160.       timing = setInterval(function () {
  161.         console.log("当前心跳已重新连接");
  162.         //循环执行代码
  163.         wx.sendSocketMessage({
  164.           data: JSON.stringify({
  165.             type: 'active'
  166.           }),
  167.           fail(res) {
  168.             //关闭连接
  169.             wx.closeSocket();
  170.             //提示
  171.             wx.showToast({
  172.               title: '当前聊天已断开',
  173.               icon:'none'
  174.             })
  175.             clearInterval(timing);
  176.             console.log("当前心跳已关闭");
  177.           }
  178.         });
  179.       }, time) //循环时间，注意不要超过1分钟  
  180.     } else {
  181.       //关闭定时器
  182.       clearInterval(timing);
  183.       console.log("当前心跳已关闭");
  184.     }
  185.   
  186.  
  187.   }
  188.  
  189.  
  190.  
  191. })

2、服务端代码（PHP代码）

wechat_websocket.php

  1. <?php
  2.  
  3. //创建WebSocket Server对象，监听0.0.0.0:9502端口
  4. $ws = new Swoole\WebSocket\Server('0.0.0.0', 9511);
  5.  
  6. //监听WebSocket连接打开事件
  7. $ws->on('Open', function ($ws, $request) {
  8.     echo $request->fd . '我连接上了';
  9. });
  10.  
  11. //监听WebSocket消息事件
  12. $ws->on('Message', function ($ws, $frame) {
  13.     //把前台传过来的json字符串转成数组
  14.     $params = json_decode($frame->data, true);
  15.     //判断是否是心跳消息,如果是心跳消息
  16.     if (isset($params['type']) && isset($params['type'])=='active'){
  17.         echo '这是心跳监听消息';
  18.     }else{
  19.         //先判断当前用户有没有正在连接
  20.         if (isset($params['uid']) && !empty($params['uid'] == 666)) {
  21.             //去用户表查询当前用户  fd
  22.             $fd = 2;
  23.         } else {
  24.             $fd = 1;
  25.         }
  26.         //客服id
  27.         $ws->push($fd, json_encode($params, JSON_UNESCAPED_UNICODE));
  28.     }
  29. });
  30.  
  31. //监听WebSocket连接关闭事件
  32. $ws->on('Close', function ($ws, $fd) {
  33.     echo "client-{$fd} is closed\n";
  34. });
  35.  
  36. $ws->start();

五、代码已经编写完了

1、把服务端代码上传到Linux操作系统里

2、然后切到该目录下进行运行php wechat_websocket.php

 总结

到此这篇关于如何利用微信小程序和php实现即时通讯聊天功能的文章就介绍到这了,更多相关微信小程序 php即时通讯聊天内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信小程序热门文章

  • 如何在微信小程序中实现音视频通话
  • 微信小程序调用摄像头实现拍照功能
  • 微信小程序隐私保护协议修改方法 uniapp
  • 微信小程序实现简单的购物车功能
  • 微信小程序访问mysql数据库流程详解
  • 微信小程序实现计算器案例
  • 微信小程序时间轴实现方法示例
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
  • 微信小程序实现聊天室功能
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    • 微信小程序推荐文章

  • 微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
  • 小程序优化：第三方SDK过大解决方案
  • .NET生成微信小程序推广二维码
  • 微信小程序动态生成表单来啦！你再也不需要手写表单了！
  • web应用及微信小程序版本更新检测方案实践
  • 微信小程序隐私保护协议修改方法 uniapp
  • 如何在微信小程序中实现音视频通话
  • 微信小程序抢红包高并发设计
  • uni-app + .NET 7实现微信小程序订阅消息推送
  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号