• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序:前端防止用户重复提交&即时消息(IM)重复发送问题解决 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

背景:

最近参与开发的小程序,涉及到即时消息(IM)发送的功能;

聊天界面如下,通过键盘上的【发送】按钮,触发消息发送功能

 

 

 

问题发现:

 功能开发完毕,进入测试流程;测试工程师反馈说:

 

在Android手机上,在极短的时间内频繁点击键盘上的【发送】按钮,消息会重复发送;IOS上该问题不太明显

 

本以为是普通的防重复提交问题,于是自然想到通过设定flag/js加锁的方式解决该问题,于是开始优化代码:

 

项目基本代码:

 

wxml:

<input type="text" value="{{msgValue}}"  confirm-type="send" bindconfirm="sendMsg" bindinput="bindKeyInput" placeholder="请输入聊天内容" />

  

JS:

  bindKeyInput(e) {
        this.setData({
            msgValue: e.detail.value.replace(/^\s+|\s+$/g, "")
        });
    },
    sendMsg() {
        let self = this;
        let msg = self.data.msgValue;
        if (msg && self.data.sendMsgState) {
            self.data.sendMsgState = false
            app.globalData.nim.sendText({
                scene: \'p2p\',
                to: self.data.doctorId,
                text: msg,
                done(error, msg) {
                    if (!error) {
                        //消息发送成功
                        self.setData({
                            msgValue: \'\'
                        })
                    } else {
                        //消息发送失败
                        wx.showToast({
                            title: \'消息发送失败,请稍后再试\',
                            icon: \'none\',
                            duration: 1500,
                            mask: true
                        })
                    }
                }
            })
        }
    }

  

 

1# 设定flag/js加锁

 

//在页面初始数据data中,声明“锁”: sendMsgState

data: {
    sendMsgState: true
}

//在发送消息方法中,符合消息发送条件的时候,把sendMsgState的值置为false;
//并在消息发送成功之后,将消息发送框的value置空的之后,将sendMsgState设为true
sendMsg() {
        let self = this;
        let msg = self.data.msgValue;
        if (msg && self.data.sendMsgState) {
            self.data.sendMsgState = false
            app.globalData.nim.sendText({
                scene: \'p2p\',
                to: self.data.doctorId,
                text: msg,
                done(error, msg) {
                    if (!error) {
                        //消息发送成功,置空输入框;然后把sendMsgState重新设置为true
                        self.setData({
                            msgValue: \'\'
                        }, () => {
                            self.data.sendMsgState = true
                        })
                    } else {
                        //消息发送失败
                        wx.showToast({
                            title: \'消息发送失败,请稍后再试\',
                            icon: \'none\',
                            duration: 1500,
                            mask: true
                        })
                    }
                }
            })
        }
    }

  

测试结果:

 Android手机上依然存在该问题,且很容易复现。

 

分析原因:

在极短的时间内,频繁点击键盘上的发送按钮;此时:锁(sendMsgState)还没来得及置为false,发送内容输入框的值还没有被清空;

但发送事件已经被有效触发多次,导致了发送消息的重复。

 

 

2# 在方案一设定flag/js加锁的基础上,增加连续点击按钮事件间隔少于1s,或者连续两次发送内容相同都停止发送的补充规则

 

    2.1:增加连续点击按钮事件间隔少于1s

             经验证:正常的消息发送使用流程,连续两次的消息发送间隔都是超过1s的;间隔小于1s的行为,可判定为重复提交:

            具体做法:

            步骤一:在data中注册lastSendTime,设置值为空;触发发送事件sendMsg的时候,把当前时间保存到变量currentTime;

      步骤二:判断当前时间currentTime与上次发送时间的差值是否小于1000;如果是,则发送事件连续触发时间短于1s,停止发送;

            步骤三:消息发送成功之后,在置空内容输入框的setData回调方法中,将lastSendTime的值更新为:currentTime;

 

   2.2:如果当前发送的消息内容和上一次保存在data中的msgValue相同,则可判断连续两次消息重复

             因为每次发送成功,data中msg都会被置空;而内容为空的时候,又是不允许发送的;

             所以,在短时间内,如果当前发送的消息内容和上一次保存在data中的msgValue相同,则可判断连续两次消息重复

 

 

最终优化方案:

 

   sendMsg() {
        let self = this;
        let msg = self.data.msgValue;
        // 防止两次点击操作间隔太快
        let currentTime = new Date();
        if ((currentTime - this.data.lastSendTime < 1000) || (msg === self.data.msg)) {
            //发送事件连续触发时间短于1s,或连续两次发送内容相同,则返回
            return;
        }
        if (msg && self.data.sendMsgState) {
            self.data.sendMsgState = false
            app.globalData.nim.sendText({
                scene: \'p2p\',
                to: self.data.doctorId,
                text: msg,
                done(error, msg) {
                    if (!error) {
                        self.setData({
                            msgValue: \'\'
                        }, () => {
                            self.data.sendMsgState = true
                            self.data.lastSendTime = currentTime
                        })
                    } else {
                        //消息发送失败
                        wx.showToast({
                            title: \'消息发送失败,请稍后再试\',
                            icon: \'none\',
                            duration: 1500,
                            mask: true
                        })
                    }
                }
            })
        }
    }

  

综上所述:

在单一的flag/js加锁无效的情况下;通过添加额外的规则补充校验,最终方案如下:

 

 
在发送内容msg有效及flag/js锁为true的基础上;
发送事件sendMsg连续两次触发时间间隔大于或等于1s,及连续两次发送内容不相同的情况下,才允许消息被发送;
 

 

 

 最终测试结果:无论是Android,还是IOS都可以正常发送消息,无消息重复发送情况发生了

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序开发常见问题分析发布时间:2022-07-18
下一篇:
小程序-微信聊天功能开发详解发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap