[网络协议]关于微信小程序使用UDP实现局域网通讯及UDP模块的封装

距离我上一次发物联网类前端的教程好久了

前段时间刚刚实现了以下小程序使用UDP进行了局域网的控制

做的时候发现网上对应的教程比较少或者有的看着有点头晕

特此不要脸的发一篇教程，写得不好多多包涵。咱话不多说，直接开写！！！

首先，老规矩，先上图：

上图为小程序开放文档截图

我们乍一看发现，一堆api，看着就头晕了，实质上我们并不会把全部api用完，接下来先介绍一遍我们需要用到的api

1.wx.createUDPSocket()

首先，这个api的官方介绍为：一个 UDP Socket 实例

所以我们可以这样使用

this.obj= wx.createUDPSocket();

这样，我们就可以得到一个UDP Socket的实例了，之后我们只需要调用obj.XXX即可使用对应的方法。

2.UDPSocket.bind(number port)

既然我们想通讯，就必须要绑定一个端口，而这个便是绑定端口的api

官方的介绍为：绑定一个系统随机分配的可用端口，或绑定一个指定的端口号

同样，我们使用的方法也很简单

this.obj.bind(num)

其中，num为我们指定绑定的端口号，也可以不传，不传的话就会绑定一个随机的端口

同时，这个是会有一个成功的回调的，我们可以这样写

  const port = this.obj.bind(num)
  console.log('连接成功' + port + '端口');

这样就会将我们的回调打印出来了。

3.UDPSocket.onListening(function callback)

到了我们最重要的环节了，开始监听信息

官方的介绍为：监听开始监听数据包消息的事件

如果你以为这个api是监听数据的api就大错特错了，这个api是一个方法监听

使用的方法呢，也是和上面的差不多

this.obj.onListening((res) => {
      console.log(res);
    })

4.UDPSocket.onMessage(function callback)

这个api函数便是监听数据的api，我们可以通过这个函数来对我们接收到的数据进行一个监听以及处理

官方介绍为：监听收到消息的事件

我们的使用方式也不难

    this.obj.onMessage((res) => {
        console.log(res);
    })

其中回调的res便是我们要的数据，注意其中res内有

remoteinfo：发送端的地址信息

localinfo：接收端地址信息

message：收到的信息

其中我们收到的信息为字节数组，需要进行转化后方可使用

不会的可以去我的论坛：meinaodai.top下载我封装的方法了使用哦

4.UDPSocket.send(Object object)

接收信息的我们介绍了，接下来就到了我们的发送信息了，我们在局域网内发送信息便是使用这个api

官方介绍为：向指定的 IP 和 port 发送消息。基础库 2.9.0 起支持广播 (指定地址为 255.255.255.255)。

我们使用呢和上面的有点不太一样，这次我们需要传递参数了

    this.obj.send({
      address: '255.255.255.255',
      port: 20015, //你需要发送的端口号
      message //你需要发送的信息
    })

这样咋一看是不是觉得没啥，但是需要注意的是

message只支持?string/ArrayBuffer

说白了就是，你只能发送字符串或者字节数组

关于字节数组有时间我也会出一篇教程前端如何处理字节数组的

5.UDPSocket.onError(function callback)

这个看名字估计大家都知道是啥了，这个是用来监听你的错误信息的

希望大家控制台永远不会出现这个api的回调

 this.obj.onError((err) => {
      console.log(err)
    })

?6.UDPSocket.close()

到了最后一个了，便是我们的关闭api

这个使用起来就简单多了

this.obj.close()

?上面便是我们使用UDP要用到的api

有些人可能不明白，官网的api不是有很多吗？怎么才用了6个

因为我们绑定端口不仅仅只有bind这一个方法

UDPSocket.connect(Object object)

UDPSocket.write()

这两个与bind和send的方法相同

其次还有另外的六个方法简单来说便是：

UDPSocket.onClose(function callback)：监听关闭事件

UDPSocket.offClose(function callback)：取消监听关闭事件

UDPSocket.offError(function callback)：取消监听错误事件

UDPSocket.offListening(function callback)：取消监听开始监听数据包消息的事件

UDPSocket.offMessage(function callback)：取消监听收到消息的事件

还有一个UDPSocket.setTTL(number ttl)的api我没有用到，所以没有深入了解

如果你看完上面的介绍你会用了的话，可以尝试一下按自己的思路来对UDP进行封装

接下来的话便是UDP的封装思路

（本人也是个菜鸟，如果那个地方有更好的写法希望大佬可以指点一下）

首先，我们可以先export一个class类，名字的话我们就叫UDPSocket吧

export class UDPSocket {}

接下来就可以开始我们的填空之路了

第一步，先定义一个构造器

export class UDPSocket {
  constructor() {
    this.connection = {};
  }
}

?然后我们来创建我们第一个方法，连接端口

export class UDPSocket {
  constructor() {
    this.connection = {};
  }
//绑定端口
  establish(monitor) {
    this.connection = wx.createUDPSocket();
    // 绑定指定端口
    const port = this.connection.bind(monitor)
    console.log('连接成功' + port + '端口');
  }
}

创建一个establish的方法，monitor传入我们指定的端口号，进行UDP实例的创建和端口连接

第二步，监听函数

我的思路是：定义一个方法，将监听方法的api和监听消息的api以及监听错误的api放一起，将消息以及错误回调出去。

export class UDPSocket {
  constructor() {
    this.connection = {};
  }
  // 创建一个UDP实例
  establish(monitor) {
    console.log(monitor);
    this.connection = wx.createUDPSocket();
    // 绑定指定端口
    const port = this.connection.bind(monitor)
    console.log('连接成功' + port + '端口');
  }
  // 监听端口函数
  onListening(success, failure, open, cmd, mac) {
    // 开启监听
    this.connection.onListening((res) => {
      open(res)
      console.log(res);
    })
    // 监听回调函数
    this.connection.onMessage((res) => {
      console.log(res);

//以下为我对数据的处理，使用到了我的一个tool.js,里面包含了对字节数组的处理
//需要的可以到我的个人博客获取www.meinaodai.top

      // 做空包筛查
      if (res.message) {
        var packet = tool.analysis(res.message)
        // 做数据空包处理
        if (packet) {
          // 做数据筛查
          // console.log(tool.Screening(packet, cmd, mac));
          success(tool.Screening(packet, cmd, mac))
          console.log(packet);
          console.log('------------------------');
        }
      }
    })
    // debug
    this.connection.onError((err) => {
      failure(err)
    })
  }
}

?这样我们监听的方法就写好了，通过传入的参数进行筛查以及传入函数将收到的数据回调出去。

第三步，发送消息

发送消息这个方法说难不难，说简单也不简单

难点在于你只能发送字符串或者字节数组，当然如果你一开始就是要发送字符串的话那就很简单，

如果你要发送我们普通的arr数组就要对其进行转换

export class UDPSocket {
  constructor() {
    this.connection = {};
  }
  // 创建一个UDP实例
  establish(monitor) {
    console.log(monitor);
    this.connection = wx.createUDPSocket();
    // 绑定指定端口
    const port = this.connection.bind(monitor)
    console.log('连接成功' + port + '端口');
  }
  // 监听端口函数
  onListening(success, failure, open, cmd, mac) {
    // 开启监听
    this.connection.onListening((res) => {
      open(res)
      console.log(res);
    })
    // 监听回调函数
    this.connection.onMessage((res) => {
      console.log(res);

//以下为我对数据的处理，使用到了我的一个tool.js,里面包含了对字节数组的处理
//需要的可以到我的个人博客获取www.meinaodai.top

      // 做空包筛查
      if (res.message) {
        var packet = tool.analysis(res.message)
        // 做数据空包处理
        if (packet) {
          // 做数据筛查
          // console.log(tool.Screening(packet, cmd, mac));
          success(tool.Screening(packet, cmd, mac))
          console.log(packet);
          console.log('------------------------');
        }
      }
    })
    // debug
    this.connection.onError((err) => {
      failure(err)
    })
  }
  // 发送消息
  send(message) {
    this.connection.send({
      address: '255.255.255.255',
      port: 20015,
      message
    })
  }
}

传入我们的message直接进行发送即可

第四步，关闭UDP的连接

这个我就不过多的解释了，大家看代码吧

export class UDPSocket {
  constructor() {
    this.connection = {};
  }
  // 创建一个UDP实例
  establish(monitor) {
    console.log(monitor);
    this.connection = wx.createUDPSocket();
    // 绑定指定端口
    const port = this.connection.bind(monitor)
    console.log('连接成功' + port + '端口');
  }
  // 监听端口函数
  onListening(success, failure, open, cmd, mac) {
    // 开启监听
    this.connection.onListening((res) => {
      open(res)
      console.log(res);
    })
    // 监听回调函数
    this.connection.onMessage((res) => {
      console.log(res);

//以下为我对数据的处理，使用到了我的一个tool.js,里面包含了对字节数组的处理
//需要的可以到我的个人博客获取www.meinaodai.top

      // 做空包筛查
      if (res.message) {
        var packet = tool.analysis(res.message)
        // 做数据空包处理
        if (packet) {
          // 做数据筛查
          // console.log(tool.Screening(packet, cmd, mac));
          success(tool.Screening(packet, cmd, mac))
          console.log(packet);
          console.log('------------------------');
        }
      }
    })
    // debug
    this.connection.onError((err) => {
      failure(err)
    })
  }
  // 发送消息
  send(message) {
    this.connection.send({
      address: '255.255.255.255',
      port: 20015,
      message
    })
  }
  // 关闭搜索事件
  UDPclose() {
    this.connection.close()
    console.log('UDP关闭');
  }
}

到这里，我们的UDP的连接方法封装就结束了，在项目中我们即可引入使用

使用方式也很简单

var UDP = require("./UDP.js")   
   // UDP实例创建
    this.UDPSocket = new UDP.UDPSocket();
    // 连接端口
    this.UDPSocket.establish(20016)
    // 请求设备上报状态
    this.udpsend()
    // 开始监听
    this.UDPSocket.onListening(res => {
      if (res) {
        console.log(res);
      }
    }, err => {
      // debug
      console.log(err);
    }, open => {
      console.log(open);
    },
//这两个参数为筛查条件，用于过滤无用或者不合法的信息，不需要的可传空值
    '', getApp().globalData.item.mac)

?以上便是我开发局域网通讯的开发思路

如果帮助到你的话就帮忙点个赞吧

如果哪里写错了也欢迎留言给我改正

大家共同进步

创作挑战赛

新人创作奖励来咯，坚持创作打卡瓜分现金大奖