性能工具之JMeter 微信小程序 WebSocket 脚本入门

简介: 【5月更文挑战第12天】性能工具之JMeter 微信小程序 WebSocket 脚本入门

前言

今天试着写了写小程序聊天页面中的信息底层是怎么实现的,而 WebSocke t协议,客户端和服务端都可以主动的推送消息,只要建立链接就能推送消息。

准备 demo

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

页面效果如下图:
image.png

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

/**
 * @author 7DGroup
 * @Title: Mywebsocket
 * @Description: 服务端
 * @date 2019/12/24 / 13:00
 */

@ServerEndpoint("/chatWebsocket")
@Component
public 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 压测

打开 JMeter 新建 WebSocket Sampler(如果没有就安装下)
image.png

编写脚本:
image.png

增加结果查看数:
image.png

增加监听器 Summary Report

image.png

总结

这是一个很简单的示例,带着大家入门如何做脚本。

目录
相关文章
|
26天前
|
前端开发 Java Linux
性能工具之 Jmeter 通过 SpringBoot 工程启动
【5月更文挑战第22天】性能工具之 Jmeter 通过 SpringBoot 工程启动
36 8
性能工具之 Jmeter 通过 SpringBoot 工程启动
|
25天前
|
监控 数据可视化 测试技术
性能工具之JMeter+InfluxDB+Grafana打造压测可视化实时监控
【5月更文挑战第23天】性能工具之JMeter+InfluxDB+Grafana打造压测可视化实时监控
69 6
性能工具之JMeter+InfluxDB+Grafana打造压测可视化实时监控
|
28天前
|
JSON JavaScript Java
性能工具之Jmeter压测Thrift RPC服务
【5月更文挑战第21天】性能工具之Jmeter压测Thrift RPC服务
32 1
|
7天前
|
小程序
微信小程序快速入门 - 10分钟入门
微信小程序快速入门 - 10分钟入门
6 0
|
29天前
|
IDE Java Maven
性能工具之Jmeter扩展配置元件插件
【5月更文挑战第20天】性能工具之Jmeter扩展配置元件插件
35 1
|
7月前
|
Java 测试技术 Apache
用JMeter做接口压力测试
JMeter是Apache组织开发的基于Java的压力测试工具,它是用 Java 语言编写的
74 0
|
7月前
|
测试技术
JMeter压力测试简单例子
JMeter压力测试简单例子
80 0
|
9月前
|
XML 前端开发 测试技术
使用 jMeter 对 SAP Spartacus 进行并发性能测试
使用 jMeter 对 SAP Spartacus 进行并发性能测试
|
4天前
|
XML JSON 测试技术
JMeter 响应断言详解:提升测试精度的利器
**摘要:** Apache JMeter的响应断言用于验证性能和功能测试中的系统响应。常见的断言类型包括文本、JSON、XPath、XML、响应代码和时间断言。配置断言涉及添加采样器、选择断言类型及设定相关参数。最佳实践建议选择合适断言类型、减少断言数量、使用正则表达式,并结合前置和后置处理器。实例演示了如何配置文本、JSON和响应代码断言来验证登录接口的成功响应。响应断言确保了测试的准确性与效率。
9 0
|
9天前
|
监控 数据可视化 Java
掌握 JMeter 插件管理器:提升性能测试的利器
Apache JMeter 是一款强大的性能测试工具,其灵活性和扩展性使其在性能测试领域广受欢迎。JMeter 插件管理器(JMeter Plugins Manager)为用户提供了一个方便的平台来安装、更新和管理各种插件,从而大大扩展了 JMeter 的功能。
17 0

热门文章

最新文章