小程序中里的bindinput_性能测试之微信小程序websocket协议

   最近复习性能测试，也想看看小程序聊天页面中的信息底层是怎么实现的，今天试着写了写。

   WebSocket协议，客户端和服务端都可以主动的推送消息，只要建立链接就能推送消息。

前置条件，需要安装小程序编译器。

页面效果：

后端代码，大家一看就知道，主要这是springboot工程，你懂的怎么配置与启动。

/** * @author liwen * @Title: Mywebsocket * @Description: 服务端 * @date 2019/12/24 / 13:00 */@ServerEndpoint("/chatWebsocket")@Componentpublic class Mywebsocket {    @DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss")    private Date sendDate;    public Date getSendDate() {        sendDate = new Date();        return sendDate;    }    private static final Logger logger = LoggerFactory.getLogger(Mywebsocket.class);    /**     * 当前在线连接数     */    private static AtomicInteger onlineSize = new AtomicInteger(0);    private static Set webSocketSet = new ConcurrentSet();    private Session session;    @OnOpen    public void onOpen(Session session) {        this.session = session;        webSocketSet.add(this);        addOnlineSize();        logger.info("有客户端连接 当前在线人数:" + getOnlineSize());        try {            Msg msg = new Msg();            sendMessage("你已成功连接"+"code:200");        } catch (IOException e) {            e.printStackTrace();        }    }    @OnClose    public void onClose() {        logger.info("关闭");        webSocketSet.remove(this);        subOnlineSize();        logger.info("有客户端关闭连接，当前在线人数为:" + getOnlineSize());    }    @OnMessage    public void onMessage(String message, Session session) {        logger.info("接收客户端消息 :" + message);        if (session.isOpen()) {            //群发消息            for (Mywebsocket item : webSocketSet) {                try {                    Thread.sleep(1000);                } catch (InterruptedException e) {                    e.printStackTrace();                }                //群发                synchronized (session) {                    item.sendInfoToAll(message);                }            }        }    }    @OnError    public void onError(Session session, Throwable error) {        error.printStackTrace();    }    public void sendMessage(String message) throws IOException {        if (session.isOpen()) {            this.session.getAsyncRemote().sendText(message);        }    }    public void sendInfoToAll(String message) {        webSocketSet.parallelStream().forEach(item -> {            try {                if (session.isOpen()) {                    HashMap hashMap = new HashMap<>();                    hashMap.put("content", "7DGroup欢迎您的到来");                    hashMap.put("data", getSendDate());                    hashMap.put("message", message);                    item.sendMessage(JSON.toJSONString(hashMap));                }            } catch (IOException e) {                e.printStackTrace();            }            logger.info("群发消息 " + message);        });    }    public int getOnlineSize() {        return onlineSize.get();    }    public void addOnlineSize() {        onlineSize.addAndGet(1);    }    public void subOnlineSize() {        onlineSize.addAndGet(-1);    }

小程序代码：

主要逻辑代码为：

Page({    // 初始页面数据    data: {        scrollTop: 0,        list: []    },    // 监听页面加载    id: 0,    onLoad: function () {        wx.connectSocket({            url: 'ws://127.0.0.1:8081/chatWebsocket'        });        wx.onSocketMessage(msg => {            var data = JSON.parse(msg.data.toString());            data.id = this.id++;            data.role = 'server';            var list = this.data.list;            list.push(data);            this.setData({                list: list            });            this.rollingBottom()        })    },    // 发送内容    count: 0,    massage: '',    send: function () {        // 判断发送内容是否为空        if (this.message) {          wx.sendSocketMessage({            data: this.message,          });            // 我自己的消息            console.log(this.data.list);            var list = this.data.list;            list.push({                id: this.count++,                content: this.message,                role: 'me'            });            this.setData({                list: list            });            this.rollingBottom()        } else {            // 弹出提示框            wx.showToast({                title: '消息不能为空哦~',                icon: 'none',                duration: 2000            })        }    },    // 监听input值的改变    bindChange(res) {        this.message = res.detail.value    },    // 页面卸载，关闭连接    onUnload() {        wx.onSocketClose();        wx.showToast({            title: '连接已断开~',            icon: 'none',            duration: 2000        })    },    // 聊天内容始终显示在最低端    rollingBottom(e) {        wx.createSelectorQuery().selectAll('.list').boundingClientRect(rects => {            rects.forEach(rect => {                this.setData({                    scrollTop: rect.bottom                })            })        }).exec()    }});

页面布局

class=    <view class="message">    <form>      <input type="text" cursor-spacing="50" placeholder="请输入聊天内容..." bindinput="bindChange">input>    form>  view>    <button type="primary" bindtap="send" formType="reset" size="small" button-hover="blue">发送button>  <view wx:if="{{show}}">{{text}}view>        <view class="wrap">        <scroll-view scroll-y class="chat" scroll-top="{{scrollTop}}">            <view class="list">                <view class="chat-news" wx:for="{{list}}" wx:key="{{item.id}}">                                        <block wx:if="{{item.role === 'me'}}">                                                <view class="news-lf">                            <text class="new-txt">{{item.content}}text>                            <image class="new-img" src="/images/0.png">image>                        view>                    block>                                        <block wx:else>                        <view>                            <image class="new-img" src="/images/1.png">image>                            <text class="new-txt new-text">{{item.content}}text>                        view>                    block>                view>            view>        scroll-view>    view>view>

通过上面代码就能把小程序聊天页面跑起来；

打开Jmeter新建WebSocket Sampler(如果没有就安装下)

编写脚本：

增加结果查看数

增加监听器Summary Report

总结：

    做性能测试代码能力还需要有一些，否则自己想做一点东西搞不定，挺难过的，做性能测试相信你们比我强。