一、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 通信轻松实现。如果觉得对你有帮助,欢迎点赞转发,有任何问题欢迎评论区留言讨论。