性能測試之微信小程式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（如果沒有就安裝下）