微信小程序UDPScoket的使用

前言

最近在做一个交互的demo。由于没有服务器而且微信的云开发又收费了，所以想着有没有局域网通信的方法，结果看到了微信开发文档中看到了UDP通讯,简单了解了下发现可以实现我的需求

由于第一次使用UDP通信，加上最近没有跟进过小程序的API，开发中也遇到了不少问题和阻碍(如何获取当前客户端的局域网内网IP,如何解析消息arrarybuffer数据)。经过多种途径的努力总算是能够正常通讯了。记录下来也方便像我一样的新手能够快速使用起来。

一 、创建UDPsocket

需要先创建一个UDPsocket

const udpSocket =  wx.createUDPSocket()
// 调用bind（）方法为当前客户端绑定一个接口，可以传参数指定，也可以不传参数随机创建。
const port = UDPSocket.bind()

通过绑定可以指定或者生成一个端口号,这个在后期的通讯中是必不可少的。

二、 发送消息

创建和绑定比较基础,接下来就是重点的发送消息了：

// 通过send()方法传递参数中需要指定ip,端口号,消息内容等信息
 udpSocket.send({
    address: '192.168.193.2',//接收方的IP,获取方法后边讲
    port: 8848,//接收方的端口号,通过bind方法获取
    message: 'hello, how are you' //发送信息内容,支持 string/ArrayBuffer 两种
  })

三、接收消息

需要绑定接收消息的事件，才能接收和处理消息内容 通过绑定oMessage方法可以处理接收到的信息

 UDPSocket.onMessage((res) => {
    let {message, remoteInfo,localInfo} = res
    console.log('onMessage message===', message)
    ...
    
  }

四、解析消息

由于我们接收到的udp的信息格式是ArrayBuffer,没有办法直接使用,需要转换成字符串才行,所以还需要一个解读信息的方法:

export function bufferToJson(buffer) {
  // 创建视图
  var dataview = new DataView(buffer)
  var ints = new Uint8Array(buffer.byteLength)
  var str = ''
  for (var i = 0; i < ints.length; i++) {
    str += String.fromCharCode(dataview.getUint8(i))
  }
  return str
}

五、获取当前设备局域网IP 之前说过发送消息需要知道接收方的IP和端口号，那么接收方怎么知道自己的IP呢？ 还好小程序API提供了相关的接口

wx.getLocalIPAddress({
  success (res) {
    const localip = res.localip
  }
})

至此可以正常的进行通信测试了，希望对你有帮助,欢迎互相交流~