微信小程序UDP通信，注意點 接收 onMessage 收到的message是ArrayBuffer緩沖，不能直接輸出，要另轉String處理

1、WXML 頁面代碼

<!--index.wxml-->
<view class="container">
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
  <view class="alllightbtn">
    <view class=".lightbtn" bindtap="onlightTap" data-lightnum="Light 1">燈1</view>
    <view class=".lightbtn" bindtap="onlightTap" data-lightnum="Light 2">燈2</view>
    <view class=".lightbtn" bindtap="onlightTap" data-lightnum="Light 3">燈3</view>
    <view class=".lightbtn" bindtap="onlightTap" data-lightnum="Light 4">燈4</view>
    <view class=".lightbtn" bindtap="onlightTap" data-lightnum="Light 5">燈5</view>
    <view class=".lightbtn" bindtap="onlightTap" data-lightnum="Light 6">燈6</view>
    <view class=".lightbtn" bindtap="onlightTap" data-lightnum="Light 7">燈7</view>
    <view class=".lightbtn" bindtap="onlightTap" data-lightnum="Light 8">燈8</view>
  </view>
  <view class="rcvUdpContent" wx:if="{{udprcvshow>0}}">{{udpRcvdata}}</view>
</view>

 

2、WXSS 樣式代碼

/**index.wxss**/

.usermotto {
  margin: 20px 0px;
  background-color: #e9f2f7;
  border-top: solid 1px #0093dd;
  border-bottom: solid 1px #0093dd;
  width: 100%;
  text-align: center;
  padding: 10px;
}

.user-motto {
  font-size: 20px;
  font-weight: bold;
}

.alllightbtn {
  display: block;
  border: 1px solid #0093dd;
  text-align: center;
}

.lightbtn {
  border: 2px solid #0093dd;
  border-radius: 10px;
  padding: 30px 40px;
  margin: 10px;
  display: inline-block;
}

.lightbtn:active {
  background-color: #606060;
}

.rcvUdpContent {
  position: fixed;
  top: 10px;
  left: 0px;
  right: 0px;
  padding: 40px 20px;
  text-align: center;
  font-size: 24px;
  background: #eaf5ea;
  border-top: solid 1px #0093dd;
  border-bottom: solid 2px #0093dd;
}

 

3、js代碼-----注意點 接收 onMessage 收到的message是ArrayBuffer緩沖，不能直接輸出，要另轉String處理

//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    motto: 'UDP通信<->8路',
    udp: null,
    udpRcvdata:'udp recived data',
    udprcvshow:0,
  },
  //點擊燈按鈕事件處理函數
  onlightTap: function (light) {
    var senddata = 'click ' + light.currentTarget.dataset.lightnum
    console.log(senddata)

    this.udp.send({
      address: 'gzlema.cn',//ip:47.92.29.6
      port: 60000,
      message: senddata
    })
  },
  //UDP 接收到數據的事件處理函數，參數res={message,remoteInfo}
  onUdpMessage: function (res) {
    if (res.remoteInfo.size > 0) {
      console.log('onUdpMessage() 接收數據 ' + res.remoteInfo.size + ' 字節：' + JSON.stringify(res, null, '\t'))

      // 將 ArrayBuffer類型的res.message取出來
      let unit8Arr = new Uint8Array(res.message)
      let encodedString = String.fromCharCode.apply(null, unit8Arr)
      let decodedString = decodeURIComponent(escape((encodedString)))//沒有這一步中文會亂碼
      console.log('message:'+decodedString)
      // 將 ArrayBuffer類型的res.message取出來

      this.setData({ udpRcvdata: 'udp rcv: ' + decodedString}) // 更新str到UI

      this.setData({ udprcvshow: Number(this.data.udprcvshow)+2000})//延時統一加2秒
      console.log(this.data.udprcvshow)
      var pagethis = this
      setTimeout(function(){
        pagethis.setData({ udprcvshow: Number(pagethis.data.udprcvshow) - 2000 })//延時統一減2秒
        console.log(pagethis.data.udprcvshow)
      },2000) //只顯示2秒后隱藏
    }
  },
  //頁面加載完成事件由系統調用
  onLoad: function () {
    console.log('頁面 index 加載完成事件onLoad()')
    this.udp = wx.createUDPSocket() //新建udp實例
    this.udp.bind() //udp綁定本機
    this.udp.onMessage(this.onUdpMessage) //指定接收事件處理函數
  }
})

 

4 較果圖