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