专栏首页7DGroup性能测试之微信小程序websocket协议

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

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

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

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

页面效果:

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

/**
 * @author liwen
 * @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新建WebSocket Sampler(如果没有就安装下)

编写脚本:

增加结果查看数

增加监听器Summary Report

总结:

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

本文分享自微信公众号 - 7DGroup(Zee_7DGroup)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java代码审计汇总系列(七)——XSS

    xss漏洞是指对于和后端有交互的地方没有做参数的接收和输入输出过滤,导致恶意攻击者可以插入一些恶意的js语句来获取应用的敏感信息,黑盒系列可见:浏览器解析...

    Jayway
  • 纯代码屏蔽WordPress后台无用项让你的后台更加简洁

    根据自己的需要,将下面代码添加到当前主题functions.php或functions-diy.php文件中

    沈唁
  • Blazor - .NET Core平台的SPA开发框架快速上手

    可以看出,Blazor是微软试图推出一个拜托现有的ASP.NET WebForm,MVC这类混合开发模型下的,应对当前单页WEB应用和前后端分离趋势的一次尝试。

    李郑
  • Spring Boot 2 实战:以 War 包的形式部署

    Spring Boot 提供了内置的 tomcat、undertow、jetty 三种 Servlet Web 容器。让我们开箱即用,可以迅速以 JAR 启动一...

    码农小胖哥
  • Spring Boot 如何构建多模块项目

    比起传统复杂的单体工程,使用 Maven 的多模块配置,可以帮助项目划分模块,鼓励重用,防止 POM 变得过于庞大,方便某个模块的构建,而不用每次都构建整个项目...

    江南一点雨
  • 如何让你的网站支持苹果系列的深色Dark模式

    我也是直接换上了 iPad 的深色模式,mbp 使用正常的浅色模式,访问自己网站的时候发现一个问题,就是下面这个引用样式有些问题

    沈唁
  • 渗透测试服务讲解汇总 对甲方网站信息的搜集工作

    在对客户网站以及APP进行渗透测试服务前,很重要的前期工作就是对网站,APP的信息进行全面的收集,知彼知己,才能更好的去渗透,前段时间我们SINE安全公司收到某...

    技术分享达人
  • Window权限维持之BITS Jobs利用

    Windows操作系统包含各种实用程序,系统管理员可以使用它们来执行各种任务。这些实用程序之一是后台智能传输服务(BITS),它可以促进文件到Web服务...

    洛米唯熊
  • 2020年,如何避免网站被百度算法降权?

    对于2019年的SEO工作人员,我们心里是五味杂陈,几乎每天网站都在变动,排名在高高低低中起伏,很多网站被降权,过了一段时间又恢复。

    蝙蝠侠IT
  • 我做的到底是不是数据分析?【简明版】

    “你做过什么分析,介绍一下”是个面试时经常被问的问题。很多同学答完以后被怼,更多的同学没有自信回答。为啥?因为大家平时都在范嘀咕:“我可能做了个假的数据分析。到...

    接地气的陈老师

扫码关注云+社区

领取腾讯云代金券