【亲自实践总结】微信小程序局域网通信之UDP通信demo（协议分析 + 客户端小程序代码）

一、WebSocket 概述

这个内容在上一篇文章中已经详细的介绍过了，如果你没有看过，欢迎移步【亲自实践总结】微信小程序WebSocket通信之TCP通信demo

---

二、UDP协议（用户数据报协议）简述

想看关于 TCP 协议的相关内容，请移步至 【亲自实践总结】微信小程序WebSocket通信之TCP通信demo

• UDP 提供一对一、一对多、多对一、多对多、无拥塞控制以及无连接的网络服务，该服务对消息中传输的数据提供了不可靠的、最大努力的传送。这就可能导致它不并不能保证数据报的安全到达，也不能保证所传送的数据报的顺序是否正确。
• 在有些情况下，UDP 可能会变得非常有用，因为UDP具有TCP望尘莫及的速度优势。由于TCP中植入了各种安全保障功能，这就导致TCP在实际执行的过程中会占用大量的系统开销，这无疑使速度收到了严重影响。反观UDP，由于排除了信息可靠传递机制，将安全和排序等功能移交给上层应用来完成，这就极大的降低了它的执行时间，使速度得到了保证。
• UDP 将数据及源和目的封装成数据报中，不需要建立连接。
• UDP 的每一个数据报的大小限制在 64K 之内。
• UDP 通信是不区分客户端和服务器端的，只分发送端和服务端。
• 使用 UDP 的应用：域名系统（DNS）、视频流、IP语音、聊天室

---

三、基于udp通信的客户端代码（微信小程序）

在这里我只在首页简单写了一个按钮，进行 UDP Socket 实例 的创建。

参考文档：微信小程序 · UDPSocket

<!--index.wxml-->
<view class="container">
  <button bindtap="send"> 发射 UDP 服务 </button>
</view>

<view class="res_container"> 
  {
     {
     udpResData}}
</view>


// index.js
//获取应用实例
const app = getApp()
let Utf8ArrayToStr = require('../../utils/Utf8ArrayToStr.js');

Page({
     
  data: {
     
    udpResData: ''
  },
  // 点击处理事件
  send: function(e) {
     

    // 向指定的 IP 和 port 发送消息
    this.udp.send({
     
      address: '172.17.3.8',
      port: '3641',
      message: 'hello, how are you'
    })
  },

  // UDP 接收到数据的事件处理函数，参数res={message,remoteInfo}
  onUdpMessage: function(res) {
     
    console.log(res);

    if(res.remoteInfo.size > 0) {
     
      console.log('onUdpMessage() 接收数据 ' + res.remoteInfo.size + ' 字节：' + JSON.stringify(res, null, '\t'));
      
      // 接收onMessage 收到的message是ArrayBuffer缓冲，不能直接输出，要另转String处理
      // 此工具类可以解决 uint8Array转String 中文乱码的问题
      let messageStr = Utf8ArrayToStr.Utf8ArrayToStr(new Uint8Array(res.message))

      // 更新接收内容
      this.setData({
     
        udpResData: 'udp接收到的内容: ' + messageStr
      })
    }
  },

  // 页面加载完成事件由系统调用
  onLoad: function () {
     
    // 新建udp实例
    this.udp = wx.createUDPSocket()

    // udp绑定本机
    this.udp.bind()

    // 指定接收事件处理函数,监听收到消息的事件
    this.udp.onMessage(this.onUdpMessage) 

    console.log('页面 index 加载完成事件onLoad()')
  },
})

至此，小程序的 UDP demo 代码就已经完成了。

由于接收 onMessage 收到的 message 是 ArrayBuffer 类型，不能直接输出，要另转 String 处理，但是转换会造成 中文乱码的问题，所以下面我提供一个工具类供大家使用。

// Utf8ArrayToStr.js
function Utf8ArrayToStr(array) {
     
  var out, i, len, c;
  var char2, char3;

  out = "";
  len = array.length;
  i = 0;
  while (i < len) {
     
    c = array[i++];
    switch (c >> 4) {
     
      case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
        out += String.fromCharCode(c);
        break;
      case 12: case 13:
        char2 = array[i++];
        out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
        break;
      case 14:
        char2 = array[i++];
        char3 = array[i++];
        out += String.fromCharCode(((c & 0x0F) << 12) |
          ((char2 & 0x3F) << 6) |
          ((char3 & 0x3F) << 0));
        break;
    }
  }
  return out;
}

module.exports = {
     
  Utf8ArrayToStr: Utf8ArrayToStr
}

---

由于udp 通信是不区分客户端与服务端的，所以只需要知道需要通信的 IP 与端口号即可进行通信。

---

一个简单的基于微信小程序的 udp 通信轻松实现。如果觉得对你有帮助，欢迎点赞转发，有任何问题欢迎评论区留言讨论。