性能测试之微信小程序websocket协议

Posted 2021-04-25 7DGroup

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

   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<Mywebsocket> webSocketSet = new ConcurrentSet<Mywebsocket>();
 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<String, Object> 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()    }});

页面布局

<view class="container"> <!-- 聊天输入 --> <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 wx:wx:elif="{{}}"></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

总结：

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