微信小程序聊天系统搭建

本文主要介绍基于公司的一个微信小程序项目socket聊天系统的搭建,前后端代码,服务器配置均由一个人完成,难度不大;

本文目录:

1、搭建HTTPS和wss环境;

2、定义前后端通信json协议;

3、聊天系统搭建;

4、注意事项。

环境准备

一、搭建HTTPSwss环境

具体搭建过程请查看我的另外一篇文章《微信小程序服务器环境搭建--suse版》,由于wss域名不能带端口,所以建议用Nginx进行代理转发。

二、定义前后端通信json协议

152736d3w6gbd69wjdj5wg.png

其中token用来验证消息来源合法性,fd为当前socket连接资源ID,from为对方socket连接资源ID,cmd定义当前操作。

三、聊天系统搭建

1、服务端

采用TP5和swoole扩展,新建一个socket模块专门处理socket,目录结构如下

152743yh1h3q9fheweeqqp.png

分为服务端server.php和客户端client.php,服务端以cli形式运行,具体代码请参考swoole源码包中的ssl样例;

运行命令如下(先切换到服务器程序代码的public目录 ):

php index.php socket/server/index

客户端其实是一个web端的websocket,源码包中同样有提供样例。请自行查看,此处不贴出源码。

2、小程序客户端

简单封装下微信提供的socket接口,用于处理连接成功,发送消息,连接失败自动重连等公用操作,目录结构如下

152745yuijaecuujzzalxa.png

发送方法封装参考:

152748ssrsvxrxwdysdzu1.png

3、保证cli程序100%可用

编写shell脚本如下:

count=`ps -fe |grep "socket/server" | grep -v "grep" | grep "master" | wc -l`

echo $count

if [ $count -lt 1 ]; then

ps -eaf |grep "socket/server" | grep -v "grep"| awk '{print $2}'|xargs kill -9

sleep 2

ulimit -c unlimited

/opt/app/php/bin/php /opt/web/think/public/index.php socket/server/index

echo "restart";

echo $(date +%Y-%m-%d_%H:%M:%S) >/opt/script/log/restart.log

fi

启用crontab

crontab -e

加入一行:

*/1 * * * * /opt/script/check_server.sh #每隔一分钟检测下脚本

crontab -l

四、注意事项

1、如果使用TP5的帮助函数model出现下面的错误,是数据库连接过期导致,把连接过期时间设置长点,但是总有过期的时候,所以建议改用mongodb

152750bik2x20f0ov2lpvp.png

2、微信小程序真机环境不予许指定端口,那上面的服务器配置就没有什么用,解决办法是:停用Apache的ssl模块,改用Nginx作为反向代理,具体方法参考我之前写的文章。亲测可用

3、如果用Nginx作为反向代理遇到会话很容易过期,有两种办法,一个是设置代理超时时间为一个很长的时间;一个是客户端做个心跳检测.这两种办法会增加服务器内存消耗,但是没有办法只有折中考虑。

转载于:https://my.oschina.net/u/3396785/blog/879590

微信小程序聊天界面通常通过`wxchatrecord`组件和自定义的UI设计来实现。以下是基本步骤: 1. **引入组件**:首先,在项目的`pages`目录下新建或打开需要聊天功能的页面文件(如`chat.js`),然后引入`wxchatrecord`组件,如果尚未引入,则需在`app.json`中配置允许访问录音权限。 ```javascript import wxchatrecord from '@open-wx/components/wxchatrecord'; ``` 2. **添加组件**:将`wxchatrecord`组件添加到页面的WXML结构中,并设置相应的属性,例如录音按钮、消息列表等。 ```html <view class="chat-container"> <view class="chat-header">聊天记录</view> <wxchatrecord :audioRecorder="false" @record-end="handleRecordEnd"></wxchatrecord> <scroll-view class="message-scroll" scroll-y="true"> <!-- 消息列表 --> </scroll-view> </view> ``` 3. **处理事件**:编写JavaScript代码来处理用户操作,如开始录音、发送消息等。例如,`handleRecordEnd`函数会在录音结束时触发,可以在这里处理音频数据并将其显示在聊天记录里。 ```javascript Page({ data: { messages: [] }, handleRecordEnd(e) { const audioData = e.detail; // 这里可以对音频进行处理,比如转换成文字,然后添加到messages数组中 this.addMessageToHistory(audioData); }, addMessageToHistory(audioData) { // 添加消息到聊天记录 } }) ``` 4. **渲染消息**:利用循环遍历`messages`数组,动态渲染每个消息到WXML中,可以包括文本、时间戳以及头像等信息。 5. **完善交互**:为了支持文本输入和发送,还可以添加`input`组件用于接收用户的输入,监听键盘事件进行消息发送,以及加载更多历史消息等功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值