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

2019 年 12 月 27 日
筆記

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

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（如果没有就安装下）