AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

PHP+Swoole实现微信小程序客服即时通信聊天功能

2022-05-16 941
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
.cn 域名，1个 12个月
简介： PHP7安装Swoole扩展PHP swoole 扩展下载地址Github：github.com/swoole/swoo…php官方扩展库：pecl.php.net/package/swo…开源中国：git.oschina.net/swoole/swoo…

一、效果演示

网络异常，图片无法展示
|


二、PHP7安装Swoole扩展

PHP swoole 扩展下载地址

Github：github.com/swoole/swoo…

php官方扩展库：pecl.php.net/package/swo…

开源中国：git.oschina.net/swoole/swoo…


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扩展

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

网络异常，图片无法展示
|


三、配置nginx反向代理

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


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

网络异常，图片无法展示
|

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

网络异常，图片无法展示
|
网络异常，图片无法展示
|

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

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

网络异常，图片无法展示
|


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

# 反向代理的规则 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合法域名配置

  • 登录到微信开放平台mp.weixin.qq.com/
  • 开发=>开发管理=>开发设置，完成合法域名设置


网络异常，图片无法展示
|

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


五、效果演示加所有核心代码

网络异常，图片无法展示
|


1.小程序端代码

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

<!--pages/contact/contact.wxml-->
<view>
<scroll-view scroll-y scroll-into-view='{{toView}}' style='height: {{scrollHeight}};'>
  <!-- <view class='scrollMsg'> -->
  <block wx:key wx:for='{{msgList}}' wx:for-index="index">
    <!-- 单个消息1 客服发出（左） -->
    <view wx:if='{{item.speaker=="server"}}' id='msg-{{index}}' style='display: flex; padding: 2vw 11vw 2vw 2vw;'>
      <view style='width: 11vw; height: 11vw;'>
        <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>
      </view>
      <view style='width: 4vw; height: 11vw; margin-left: 0.5vw; display: flex; align-items: center; z-index: 9;'>
        <view class="triangle_border_left"></view>
      </view>
      <view class='leftMsg'>{{item.content}}</view>
    </view>
    <!-- 单个消息2 用户发出（右） -->
    <view wx:else id='msg-{{index}}' style='display: flex; justify-content: flex-end; padding: 2vw 2vw 2vw 11vw;'>
      <view class='rightMsg'>{{item.content}}</view>
      <view style='width: 4vw; height: 11vw; margin-right: 0.5vw; display: flex; align-items: center; z-index: 9;'>
        <view class="triangle_border_right"></view>
      </view>
      <view style='width: 11vw; height: 11vw;'>
        <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>
      </view>
    </view>
  </block>
  <!-- </view> -->
  <!-- 占位 -->
  <view style='width: 100%; height: 18vw;'></view>
</scroll-view>
<view class='inputRoom' style='bottom: {{inputBottom}}'>
  <image style='width: 7vw; margin-left: 3.2vw;' src='https://img95.699pic.com/element/40030/6429.png_300.png' mode='widthFix'></image>
  <input bindconfirm='sendClick' adjust-position='{{false}}' value='{{inputVal}}' confirm-type='send' bindfocus='focus' bindblur='blur'></input>
</view>
</view>
复制代码

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

/* 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

{
  "navigationBarTitleText":"柯作客服",
  "usingComponents": {
  }
}
复制代码

4.小程序业务逻辑代码所在路径 /pages/contact/contact.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
//创建WebSocket Server对象，监听0.0.0.0:9502端口
$ws = new Swoole\WebSocket\Server('0.0.0.0', 9511);
//监听WebSocket连接打开事件
$ws->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操作系统里


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

网络异常，图片无法展示
|



文章标签：
客服工作台
域名
PHP
开发工具
应用服务中间件
Linux
nginx
小程序
关键词：
PHP功能
微信功能
微信小程序功能
微信聊天
PHP微信小程序
1816327243086127
目录
相关文章
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序，PHP 还可以用于开发哪些类型的小程序？
除了微信小程序，PHP 还可用于开发多种类型的小程序，包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域，PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时，在企业内部，PHP 可提升工作效率，实现审批流程、文件共享、生产计划等功能；在医疗和教育等行业，PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
78 6
听白
|
2月前
|
人工智能 数据可视化 API
10 分钟构建 AI 客服并应用到网站、钉钉或微信中测试评
10 分钟构建 AI 客服并应用到网站、钉钉或微信中测试评
听白
102 2
天才萝卜-27920
|
3月前
|
人工智能
10 分钟构建 AI 客服并应用到网站、钉钉或微信中简说
10 分钟构建 AI 客服并应用到网站、钉钉或微信
天才萝卜-27920
219 5
chnjames
|
30天前
|
存储 自然语言处理 小程序
微信小程序多语言切换神器：简繁体切换功能完全指南
随着全球化的发展，支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能，以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数，开发者可以方便地实现语言切换，从而提升用户体验。文章中还附带了示例代码和效果图，帮助读者更好地理解和应用这一功能。
chnjames
83 0
微信小程序多语言切换神器：简繁体切换功能完全指南
游客zl3px4cdqhtbk
|
2月前
|
人工智能 运维 负载均衡
10 分钟构建 AI 客服并应用到网站、钉钉或微信中
《10分钟构建AI客服并应用到网站、钉钉或微信中》的解决方案通过详尽的文档和示例代码，使具有一定编程基础的用户能够快速上手，顺利完成AI客服集成。方案涵盖高可用性、负载均衡及定制化选项，满足生产环境需求。然而，若文档不清晰或存在信息缺失，则可能导致部署障碍。实际部署中可能遇到网络、权限等问题，需逐一排查。云产品的功能、性能及操作配置便捷性直接影响解决方案效果，详尽的产品手册有助于快速解决问题。总体而言，该方案在各方面表现出色，值得推荐。
游客zl3px4cdqhtbk
125 34
周一同学Zelina
|
2月前
|
算法 JavaScript 前端开发
切西瓜法实现微信抢红包功能
该文章介绍了使用“切西瓜法”和“栅栏法”两种算法来模拟微信抢红包的随机分配机制，并通过具体的JavaScript代码实现了红包金额的公平随机分配过程。
周一同学Zelina
27 0
切西瓜法实现微信抢红包功能
diygwcom
|
1月前
|
云安全 存储 小程序
PHP微信小程序解决方案PhpMall
PHP微信小程序解决方案PhpMall
diygwcom
39 0
小王老师呀
|
2月前
|
缓存 程序员 PHP
为什么说 Swoole 是 PHP 程序员技术水平的分水岭？
【9月更文挑战第8天】Swoole 被视为 PHP 程序员技术水平的分水岭，因为它要求程序员深入理解底层原理（如网络编程、异步和并发模型），具备性能优化能力（如高效服务器开发、数据库连接池管理），拥有架构设计能力（如微服务架构、项目复杂度管理），并具备持续学习和自我提升意识。熟练掌握 Swoole 的程序员在技术能力和综合素质方面更具优势。
小王老师呀
53 9
郑小健
|
3月前
|
人工智能 自然语言处理 搜索推荐
评测：AI客服接入钉钉与微信的对比分析
【8月更文第22天】随着人工智能技术的发展，越来越多的企业开始尝试将AI客服集成到自己的业务流程中。本文将基于《10分钟构建AI客服并应用到网站、钉钉或微信中》的解决方案，详细评测AI客服在钉钉和微信中的接入流程及实际应用效果，并结合个人体验分享一些心得。
郑小健
9960 10
阿里云云原生
|
2月前
|
人工智能 前端开发 JavaScript
MacTalk 测评通义灵码，实现“微信表情”小功能
墨问西东创始人池建强分享了团队使用通义灵码的经验。
阿里云云原生
88 6

热门文章

最新文章

  • 1
    小程序审核常见驳回类型
  • 2
    【小程序开发】uniapp引入iconfont图标及使用方式
  • 3
    笑联 x mPaaS | 12 个模块，全面小程序化，如何打造真正的一次开发复用多端？
  • 4
    微信公众平台小程序会是下一个App Store吗？
  • 5
    小程序云开发联表数据查询以及云函数中的应用
  • 6
    Uniapp 解决组件在官方文档不支持的事件上，接收小程序原生组件事件
  • 7
    mPaaS问题之使用小程序传参数报错如何解决
  • 8
    小程序鼠标点击按钮（改变背景颜色字体）
  • 9
    让别人的小程序长成自己的样子-更换window上下颜色--【浅入深出系列001】
  • 10
    初学者编译的第一个小程序
  • 1
    微信小程序用户登陆和获取用户信息功能实现
    115
  • 2
    微信小程序和springboot实现微信支付
    211
  • 3
    微信小程序-微信支付
    68
  • 4
    开发uniapp过程中对app、微信小程序与h5的webview调试
    1102
  • 5
    微信小程序echart图片不显示 问题解决
    61
  • 6
    UniApp与微信小程序介绍及区别
    576
  • 7
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（二）
    548
  • 8
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（一）
    285
  • 9
    轻松学会微信小程序开发（一）
    217
  • 10
    使用阿里云短信+微信短链接跳转微信小程序
    490

    • 相关课程

    更多
  • PHP进阶教程 - 由浅入深掌握面向对象开发 - 第二阶段
  • PHP完全自学手册文档教程
  • IoT小程序框架课程

    • 相关电子书

    更多
  • 阿里云栖开发者沙龙PHP技术专场-深入浅出网络编程与swoole内核-吴镇宇
  • PHP安全开发:从白帽角度做安全
  • PHP 2017.北京 全球开发者大会——高可用的PHP

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 以客服场景意图分类为例写Prompt
  • 1分钟SAE部署PHP商城小程序
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • 10分钟Serverless部署PHP商城
    • 下一篇
    阿里云OSS设置跨域访问