微信小程序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 较果图