微信小程序websocket實例

效果展示

wxml

<button bindtap="webSocket">connect</button>
<rich-text>{{html}}</rich-text>

js

下面是js中除了生命周期函數之外的部分

var socketQueue = ["ready","to","send"];
function sendSocketMessage(msg) {
  wx.sendSocketMessage({
    data: msg,
  })
}
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    html:''
  },
  webSocket: function () {
    //這里需要用that記錄一下對象，否則下面用this操作的對象就不對了
    var that=this;
    //建立連接
    wx.connectSocket({
      url: 'ws://49.234.18.41:8866',
      header: {
        "content-type": "application/json"
      }
    })
    //監聽打開
    wx.onSocketOpen((result) => {
      console.log("webSocket已打開");
      for (let i = 0; i < socketQueue.length; i++) {
        //發送數據
        sendSocketMessage(socketQueue[i]); 
      }
      socketQueue = [];
        //清空數組
    })
    //監控失敗操作
    wx.onSocketError((result) => {
      console.log("webSocket打開失敗");
    })
    //監聽服務器返回的數據
    wx.onSocketMessage((result) => {
      console.log("收到服務器內容："+result.data);
      that.setData({
        html:result.data
      });
    })
  },
})