微信小程序是目前广泛使用的流量平台之一。当小程序的流量越来越大时，需要接入小程序中的即时通讯聊天功能，实现更好的流量转化。下面文章主要介绍如何使用微信小程序和php实现即时通讯聊天功能的相关信息。有需要的可以参考一下。
: 目录
1.PHP7安装Swoole扩展1。自定义安装2。宝塔面板安装PHP swoole扩展2。nginx反向代理3。微信小程序socket合法域名配置4。效果演示和代码1。小程序代码2。服务器代码(PHP代码)5。代码已经编译和总结。
一、PHP7安装Swoole扩展
PHP swoole扩展
吉图布：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命令来生成配置可执行文件。
#如果不知道phpize路径在哪里，可以用哪个phpize查看对应的路径。
/usr/bin/phpize
# Configure如果不知道php-config路径在哪里，可以用哪个php-config查看对应的路径。/configure-with-PHP-config=/usr/bin/PHP-config
#编译并安装
制作制作安装
vi /etc/php.ini
复制以下代码
extension=swoole.so
只需将它放入您打开或创建的文件中，无需重新启动任何服务。
#查看扩展是否安装成功。
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的端口号。
#反向代理规则，名字学习，可以自己起名字。
上游研究{
服务器127 . 0 . 0 . 1:9511；
}
服务器{
听80；
服务器名study.lishuo.net；
error _ page 404/404 . html；
location=/404.html {
}
位置/{
索引index.php index.html index.htm；
如果(！-e请求文件名){
重写^(.*)$ /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连接“升级”；
proxy _ pass http://study
}
error _ page 500 502 503 504/50x . html；
location=/50x.html {
}
#添加以下信息，配置Nginx通过fastcgi处理您的PHP请求。
位置~。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；
包括fastcgi _ params#Nginx调用fastcgi接口处理PHP请求。
}
}
三、微信小程序socket合法域名配置
1.登录微信开放平台https://mp.weixin.qq.com/.
2.开发=开发管理=开发设置，合法域名设置完成。
3.配置已经完成，接下来实现功能，微信小程序的PHP代码。
四、效果演示和代码
1、小程序端代码小程序页面代码所在路径/pages/contact/contact.wxml
！- pages/contact/contact.wxml -
视角
scroll-view scroll-y scroll-into-view= { { to view } } style= height:{ { scroll height } }；
！- view class=scrollMsg -
block wx:key wx:for= { { msgList } } wx:for-index= index
！-单个消息一客服发出（左) -
视图wx:if= { { item。speaker== server } } id= msg-{ { index } } style= display:flex；填充：2vw 11vw 2vw 2vw 2vw 2vw；
view style= width:11vw；高度：11vw
image style= width:11vw；身高：11vw 边框半径：10rpxsrc= https://cdn。pix abay。com/photo/2020/02/10/12/47/girl-4836394 _ _ 340。jpg /图像
/查看
view style= width:4vw；身高：11vw左边距：0.5vw显示器：flex对齐-项目：居中；z索引：9;
view class= triangle _ border _ left /view
/查看
view class= left msg { { item。内容} }/查看
/查看
！-单个消息2用户发出（右) -
view wx:else id= msg-{ { index } } style= display:flex；justify-content:flex-end；填充：2vw 2vw 2vw 11vw
view class= right msg { item。内容} }/查看
view style= width:4vw；身高：11vw右边距：0.5vw显示器：flex对齐-项目：居中；z索引：9;
view class= triangle _ border _ right /view
/查看
view style= width:11vw；高度：11vw
image style= width:11vw；身高：11vw 边框半径：10rpxsrc= https://cdn。pix abay。com/photo/2021/09/24/10/00/chick-6652163 _ _ 340。jpg /图像
/查看
/查看
/阻止
！-/查看-
！-占位-
视图样式=宽度：100%;身高：18vw/查看
/滚动视图
view class= input room style= bottom:{ { input bottom } }
image style= width:7vw；左边距：3.2瓦特；src= https://img 95.699 pic。com/element/40030/6429。png _ 300。“png”模式=“宽度固定”/图像
输入bind confirm= send click adjust-position= { { false } } value= { { input val } } confirm-type= send bind focus= focus bind blur= blur /input
/查看
/查看
2、小程序页面样式代码所在路径/pages/contact/contact.wxss
/* pages/contact/contact.wxss */
页面{
背景色：# f1f1f1
}。输入室{
宽度：100vw
身高：16vw
border-top:1px solid # cdcdcd；
背景色：# f1f1f1
位置：固定；
底部：0;
显示器：flex
对齐-项目：居中；
z指数：20;
}
输入{
宽度：76vw
高度：9.33vw
背景色：# fff
边框半径：40rpx
左边距：2vw
填充：0 3vw
字体大小：28rpx
颜色：# 444;
}。leftMsg {
字体大小：35rpx
颜色：# 444;
行高：7vw
填充：2vw 2.5vw
背景色：# fff
左边距：-1.6 VW；
边框半径：10rpx
z指数：10;
}。rightMsg {
字体大小：35rpx
颜色：# 444;
行高：7vw
填充：2vw 2.5vw
背景色：# 96EB6A
边距-右侧：-1.6 VW；
边框半径：10rpx
z指数：10;
}
/*向左*/。三角形_边框_左侧{
宽度：0;
高度：0;
边框宽度：10px 30px 30px 0；
边框样式：纯色；
边框-颜色：透明#fff透明透明；
/*透明黄透明透明*/
边距：40px自动；
位置：相对；
}
/*向右*/。三角形_边框_右侧{
宽度：0;
高度：0;
边框宽度：0px 30px 20px 13px
边框样式：纯色；
边框-颜色：透明透明透明# 96EB6A
/*透明透明透明黄*/
边距：40px自动；
位置：相对；
}
小程序配置文件代码所在路径/pages/contact/contact.json
{
navigationBarTitleText ":"柯作客服，
使用组件:{
}
}
小程序业务逻辑代码所在路径/pages/contact/contact.js
//pages/contact/contact.js
const app=getApp()；
var inputVal=
var msgList=[]；
var窗口宽度=wx。getsysteminfosync().窗口宽度；
var窗口高度=wx。getsysteminfosync().窗口高度
var键高=0；
/**
* 初始化数据
*/
函数initData(that) {
//输入框的内容
输入val=
//消息列表，包含客服和用户的聊天内容
msgList=[{
演讲者："服务器",
内容类型：文本，
内容：嗨，亲爱的小主，终于等到您啦！欢迎来到柯作店铺，很荣幸为您服务。
},
{
演讲者："客户",
内容类型：文本，
内容： 你高兴的太早了
}
]
that.setData({
msgList，
输入值
})
}
页面({
/**
* 页面的初始数据
*/
数据：{
scrollHeight: 100vh ，
输入底部：0
},
/**
* 生命周期函数-监听页面加载
*/
加载：函数（选项){
//初始化websocket连接
这个。chat()；
//监听心跳的方法
这个。websocketxin()；
//聊天方法
initData(this)；
//监听消息
wx.onSocketMessage(res={
//追加到消息列表里
msglist。推(JSON。parse(RES . data))
输入val=
this.setData({
msgList，
输入值
});
})
},
//页面卸载时间
onUnload(){
wx。关闭套接字()；
},
/**
* 获取聚焦
*/
重点：功能(e) {
键高=e . detail。身高；
this.setData({
滚动高度：(窗口高度-键高度) px
});
this.setData({
toView: msg- (msgList.length - 1)，
inputBottom: keyHeight px
})
//计算味精高度
//calScrollHeight(this，key height)；
},
//失去聚焦（软键盘消失)
模糊：函数(e) {
this.setData({
scrollHeight: 100vh ，
输入底部：0
})
this.setData({
toView: msg- (msgList.length - 1)
})
},
/**
* 发送点击监听
*/
发送点击：函数(e) {
//客户发的信息
让客户sg={
uid: 10，
演讲者："客户",
内容类型：文本，
内容：e。细节。价值
};
//关闭心跳包
this.webSocketXin(60000，false)
//发送给websocket
wx.sendSocketMessage({
数据：JSON.stringify(customerMsg)，
成功：res={
//重启心跳包
this.webSocketXin(40000，true)
}
})
//追加到消息列表里
msgList.push(customerMsg)
输入val=
this.setData({
msgList，
输入值
});
},
/**
* 退回上一页
*/
toba click:function(){
wx.navigateBack({})
},
/**
* websocket
*/
聊天(){
//进行连接服务器端编程语言(专业超文本预处理器的缩写)的（电源)插座
wx.connectSocket({
//wss协议相当于你要有一个安全套接层证书，https
//ws就相当于不实用证书超文本传送协议(超文本传输协议的缩写)
网址： ws://study.lishuo.net ，
成功：函数(){
console.log(websocket连接成功~)
},
失败：函数(){
console.log(websocket连接失败~)
}
})
},
/**
* 监听websocket心跳连接的方法
*/
webSocketXin(time=60000，status=true){
定义变量计时；
if(status==true){
timing=setInterval(function () {
console.log(当前心跳已重新连接);
//循环执行代码
wx.sendSocketMessage({
数据：JSON.stringify({
类型："活动"
}),
失败(资源){
//关闭连接
wx。关闭套接字()；
//提示
wx.showToast({
标题： 当前聊天已断开，
图标："无"
})
间隙(计时);
console.log(当前心跳已关闭);
}
});
},时间)//循环时间，注意不要超过一分钟
}否则{
//关闭定时器
间隙(计时);
console.log(当前心跳已关闭);
}
}
})
2、服务端代码（PHP代码）微信_websocket.php
？服务器端编程语言(专业超文本预处理器的缩写)
//创建WebSocket服务器对象，监听0.0.0.0:9502端口
$ ws=new Swoole web socket Server( 0。0 .0 .0 ,9511);
//监听WebSocket连接打开事件
$ws-on(打开，函数($ws，$request) {
echo $request-fd .我连接上了；
});
//监听WebSocket消息事件
$ws-on(消息，函数($ws，$frame) {
//将前台的json字符串转换成数组
$ params=JSON _ decode($ frame-data，true)；
//判断是否是心跳消息，如果是
if(isset($ params[ type ])isset($ params[ type ])== active ){
Echo“这是心跳监测消息”；
}否则{
//首先判断当前用户是否正在连接。
if (isset($params[uid])！empty($params[uid]==666)) {
//转到用户表查询当前用户fd
$ FD=2；
}否则{
$ FD=1；
}
//客户服务id
$ws-push($fd，json_encode($params，JSON _ UNESCAPED _ UNICODE))；
}
});
//侦听WebSocket连接关闭事件
$ws-on(Close ，函数($ws，$fd) {
echo“客户端-{$fd}已关闭 n”；
});
$ ws-start()；
五、代码已经编写完了
1.将服务器代码上传到Linux操作系统。
2.然后切到这个目录运行php微信_websocket.php
总结
关于如何使用微信小程序和php实现即时通讯聊天功能的这篇文章到此为止。更多相关微信小程序php即时通讯聊天内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
