小程序UDP通信

前言

UDP通信分为单播 广播 组播,基础库2.7.0之后，小程序开始支持UDP通信，目前小程序只支持单播。

小程序API

小程序UDP通信这一块可以说是很简单了就一个UDPSocket实例。然后bind()方法绑定端口，send()方法发送数据，close()方法关闭通信，onMessage()方法监听消息等等，具体可以去看文档

相关技术难点

使用UDP通信时，如果是用于局域网内数据传输，这里有个难点就是，不知道本机及对应要通信设备在当前局域网内的ip及绑定的端口。如果是用于和服务器之间的数据传输的话，没想出具体应用场景...

通信效果展示

由于没有2台手机，所以用node.js代码充当了其中一台客户端，先看看客户端间通信截图。

client1.png
client2.png

Node.js端代码

通过dgram框架进行操作，这里由于演示，所以每次都简单地返回相同的数据。

const dgram = require('dgram');
const server = dgram.createSocket('udp4');
server.on('close',()=>{
    console.log('socket已关闭');
});
server.on('error',(err)=>{
    console.log(err);
});
server.on('listening',()=>{
    console.log('socket正在监听中...');
});
server.on('message',(msg,rinfo)=>{
    console.log(`receive message from ${rinfo.address}:${rinfo.port}`);
    console.log(`message=${msg}`)
    server.send('收到你的信息了',rinfo.port,rinfo.address)
});
server.bind('8060');

小程序端代码

代码比较简单，唯一需要注意的是，接收到udp消息时，数据是ArrayBuffter格式的，需要转成string显示。（这部分代码在js代码最下方）

// js代码
// pages/welcome/welcome.js
let util = require('../../utils/util.js')
Page({
 udpSocket:null,
 /**
  * 页面的初始数据
  */
 data: {
   messageList:[]
 },
 mydata:{
   message:'',
   remoteUrl: {
     ip: '',
     port: -1
   },
   isSend:false
 },
 addMessage(event){
   console.log(event)
   this.mydata.message = event.detail.value
 },
 sendMessage(){
   if (this.mydata.isSend){
     return ;
   }
   this.mydata.isSend = true
   let ip = this.mydata.remoteUrl.ip
   let port = this.mydata.remoteUrl.port
   let message = this.mydata.message
   if(message.trim() === ''){
     wx.showToast({
       title: '请输入内容',
     })
     return ;
   }
   udpSocket.send({
     address: ip,
     port: port,
     message: message
   })
   this.mydata.isSend = false
   let list = this.data.messageList
   let obj = {
     text: message,
     from : 2
   }
   list.push(obj)
   this.setData({
     messageList : list
   })
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
   this.initUdpSocket()
 },
 initUdpSocket(){
   udpSocket = wx.createUDPSocket();
   if(udpSocket === null){
     console.log('暂不支持')
     return ;
   }
   const locationPort = udpSocket.bind()
   this.setData({
     'locationUrl.port': locationPort
   })
   udpSocket.onListening(function(res){
     console.log('监听中...')
     console.log(res)
   })
   let that = this
   udpSocket.onMessage(function (res) {
     console.log(res)
     let str = util.newAb2Str(res.message)
     console.log('str==='+str)
     let list = that.data.messageList
     let obj = {
       text: str,
       from: 1
     }
     list.push(obj)
     that.setData({
       messageList: list
     })
   })
 },
 /**
  * 输入ip/端口号
  */
 addIp: function(event){
   this.mydata.remoteUrl.ip = event.detail.value
 },
 addPort: function (event){
   this.mydata.remoteUrl.port = event.detail.value
 },
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
 },
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 }
}

// util.newAb2Str代码
function newAb2Str(arrayBuffer){
 let unit8Arr = new Uint8Array(arrayBuffer);
 let encodedString = String.fromCharCode.apply(null, unit8Arr),
   decodedString = decodeURIComponent(escape((encodedString)));//没有这一步中文会乱码
 return decodedString;
}

相应的WXML和WXSS代码

<!-- wxml -->
<!--pages/welcome/welcome.wxml-->
<view>
  <view class='header'>
    <view>
      <text>本机端口:{{locationUrl.port}}</text>
    </view>
    <view class='headerItem'>
        <text>IP地址：</text>
        <input type='text' bindinput='addIp'></input>
      </view>
    <view class='headerItem'>
      <text>端口：</text>
      <input type='number' bindinput='addPort'></input>
    </view>
  </view>
  <view class='content'>
      <block wx:for="{{messageList}}" wx:key="{{index}}">
        <view wx:if="{{item.from === 1}}" class='fromLeft'>
          <text>{{item.text}}</text>
        </view>
        <view wx:else class='fromRight'>
          <text>{{item.text}}</text>
        </view>
      </block>
  </view>
  <view class='footer'>
    <input type='text' bindinput='addMessage'></input>
    <button bindtap='sendMessage'>发送</button>
  </view>
</view>


// wxss
/* pages/welcome/welcome.wxss */
.header{
  padding: 20rpx;
  border-bottom: solid 1px #dfdfdf;
}
.headerItem{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10rpx;
  height: 50rpx;
}

.headerItem > text{
  color: #333;
  width: 150rpx;
  font-size: 30rpx;
  text-align: right;
}

.headerItem  > input{
  border: solid 1px #dfdfdf;
}
.content{
  padding: 0 20rpx;
}

.content > view{
  margin-top: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.content > .fromLeft > text{
  padding: 10rpx;
  width: 690rpx;
  text-align: left;
  background-color: orangered;
  color: white;
}

.content > .fromRight > text{
  padding: 10rpx;
  width: 690rpx;
  text-align: right;
  background-color: #dfdfdf;
  color: white;
}

.footer{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0 20rpx;
  margin-top: 20rpx;
}

.footer > input{
  border: solid 2rpx #dfdfdf;
  border-radius: 4rpx;
  width: 500rpx;
  height: 70rpx;
  line-height: 70rpx;
  margin-right: 10rpx;
}

.footer > button{
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
}