微信小程序UDP通信，注意点 接收 onMessage 收到的message是ArrayBuffer缓冲，不能直接输出，要另转String处理

Posted 2021-03-10 覃隆强

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 较果图