前言

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

小程序API

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

相关技术难点

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

咨询了一下做嵌入式的朋友，他说硬件部分可以绑定一个固定的端口号。（这样的话可以通过mDNS和固定端口号把需要通信对象的ip/port拼出来。）

通信效果展示

由于没有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.jslet 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;}

原著是一个有趣的人,若有侵权,请通知删除