小程序与服务器通信webSocket和UDPSocket

UDPSocket 官方文档链接UDPSocket

webSocket 官方文档链接 WebSocket 任务

先用webSocket 测试成功后,由于WSS的问题最后决定用UDPSocket,两个都记录一下。

UDPSocket

项目里主要就使用了以下几个方法, 先用wx.createUDPSocket创建UDP Socket 实例,就能调用里面的方法(前提是都要在小程序后台配置域名,这里不多说)。

onListening 监听开始监听数据包消息的事件,这里不知道可以用在什么地方(欢迎指教),不用也没啥影响 ==

由于只在一个页面上使用,就不封装了,几个关键的变量直接作为全局变量写在js前面。直接代码

// js
var UDPSocket 
var portPage({data: {show: false,MCUID:'',recyclingAmount:0,},onLoad(options) {// console.log(options.MCUID)this.setData({MCUID: options.MCUID,})this.createUDPSocket(true) },onShow() {if(!UDPSocket){ this.createUDPSocket(true)}},//创建UDFSocketcreateUDPSocket(isStar){UDPSocket = wx.createUDPSocket()isStar = isStar?isStar:false//首次调用标志isStarif((!UDPSocket) && (!isStar)){wx.showModal({title: 'UDFSocket未创建',content: '重新连接',showCancel: true,complete: (res) => {if(res.confirm){this.createUDPSocket()}}})return}else if(!UDPSocket){return}// UDPSocket 创建后port = UDPSocket.bind(4561) //返回绑定成功的端口号//监听接收数据this.UDPonMessage()//发送心跳this.UDPheartbeat()//10秒发动一次心跳,转一下this,不然会报错heartbeatTimer = setInterval(this.UDPheartbeat.bind(this),10*1000)},//发送UDPsend(data){data = this.formatData(data)UDPSocket.send({address: '消息的地址',port: port,message: data,})},//心跳UDPheartbeat(){console.log("进来心跳")let data = {CommandType:0}this.UDPsend(data)},//监听接收信息UDPonMessage(){UDPSocket.onMessage((e) => {console.log('收到的信息————————',e)// message是收到的信息,类型是ArrayBuffer,要自己转换let message = this.ArrayBufferFunc(e.message)console.log("转换后的信息-------",message)//这里处理自己的逻辑if(message.CommandType == 1){this.setData({show: true,recyclingAmount: 1,})}})},// 开始回收startRecycling(){console.log('点击开始回收',UDPSocket,Boolean(UDPSocket))if(!UDPSocket){this.createUDPSocket()return}let data = {MCUID: this.data.MCUID,CommandType:1 }this.UDPsend(data)},//结束回收closeDialog(){this.setData({show: false,recyclingAmount: 0,})},//关闭连接UDPclose(){if(!UDPSocket){return}clearInterval(heartbeatTimer)UDPSocket.close()UDPSocket = nullheartbeatTimer = null},//处理发送数据formatData(obj){let today = String(new Date().getFullYear()) + (new Date().getMonth()+ 1) + new Date().getDate() let randomNumber = Math.floor(Math.random() * 100000)let RequestID = today + randomNumberobj.RequestID = RequestIDobj.PlayerID = wx.getStorageSync('PlayerID')// console.log(RequestID,obj)let keysArr = Object.keys(obj).sort()let splicingStr = keysArr.reduce((splicingStr,key,index)=>{if(index == 0){splicingStr =  key + "=" + obj[key]}else {splicingStr = splicingStr + "&" + key + "=" + obj[key]}return splicingStr},'')splicingStr = splicingStr +  "&SecretKey=CD463959-6080-41B3-BE48-A8BB63DE866A"let SignKeyValue = md5.hex_md5(splicingStr)obj.SignKey = SignKeyValue// console.log(keysArr)// console.log(splicingStr)// console.log(obj)console.log("处理后的JSON数据",JSON.stringify(obj))return JSON.stringify(obj)},//ArrayBuffer处理ArrayBufferFunc(buffer){let str = String.fromCharCode.apply(null, new Uint8Array(buffer))return JSON.parse(str)},onHide(){console.log('onHide')this.UDPclose()},onUnload(){console.log('onUnload')this.UDPclose()},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

webSocket

官方推荐用SocketTask 来管理,上代码

// pages/eggRecycle/eggRecycle.js
const md5 = require('../../utils/md5.js')
var SocketTask = null;
//心跳定时器
var heartbeatTimer = null; Page({data: {isTask: false,// 连接是否成功show: false,MCUID:'',recyclingAmount:0,},onLoad(options) {// console.log(options.MCUID)this.setData({MCUID: options.MCUID,})},onShow() {//创建连接this.connectSocket()},//心跳heartbeat(){console.log("进来心跳")let data = {CommandType:0,}this.send(data)heartbeatTimer = setInterval(()=>{this.send(data)},10*1000)},// 创建连接connectSocket() { let isTask= falseSocketTask =  wx.connectSocket({url: 'ws://124.222.224.186:8800', //网上的测试地址header: {'content-type': 'application/json'},success: (res => {console.log('创建连接成功', res)fail: (err => {console.log('创建连接失败',err)wx.showModal({title: '创建连接失败'+ err,content: '重新连接',showCancel: false,complete: (res) => {that.connectSocket()}})})})if(ifTask){that.setData({isTask:true,})this.onOpen()this.onMessage()this.onError()this.onClose()}},// 监听 WebSocket 连接打开事件onOpen() {SocketTask.onOpen((res) => {console.log('监听连接打开', res)//心跳this.heartbeat()})},//发送信息send(sendMessage) {let that = thisSocketTask.send({data: this.formatData(sendMessage),success(res) {},fail(err) {}})},// 接收到服务器的消息事件onMessage() {SocketTask.onMessage((data) => {console.log('接受到的服务器信息', data)})},//监听 WebSocket 连接关闭事件onClose() {SocketTask.onClose((data)=>{console.log('监听连接关闭',data)SocketTask = null})},//关闭事件close(){if(!this.data.isTask){return}clearInterval(heartbeatTimer)SocketTask.close()heartbeatTimer = null},// 监听 WebSocket 错误事件onError(){SocketTask.onError((err)=>{console.log('监听 WebSocket 错误事件', err)})},//处理数据formatData(obj){// SecretKey=CD463959-6080-41B3-BE48-A8BB63DE866Alet today = String(new Date().getFullYear()) + (new Date().getMonth()+ 1) + new Date().getDate() let randomNumber = Math.floor(Math.random() * 100000)let RequestID = today + randomNumberobj.RequestID = RequestIDobj.PlayerID = wx.getStorageSync('PlayerID')// console.log(RequestID,obj)let keysArr = Object.keys(obj).sort()let splicingStr = keysArr.reduce((splicingStr,key,index)=>{if(index == 0){splicingStr =  key + "=" + obj[key]}else {splicingStr = splicingStr + "&" + key + "=" + obj[key]}return splicingStr},'')splicingStr = splicingStr +  "&SecretKey=CD463959-6080-41B3-BE48-A8BB63DE866A"let SignKeyValue = md5.hex_md5(splicingStr)obj.SignKey = SignKeyValue// console.log(keysArr)// console.log(splicingStr)// console.log(obj)console.log("处理后的JSON数据",JSON.stringify(obj))return JSON.stringify(obj)},onHide(){console.log('onHide')this.close()},onUnload(){console.log('onUnload')this.close()},openDialog(){//启动回收let data = {MCUID: this.data.MCUID,CommandType:1 }console.log("发送启动")this.send(data)this.setData({show: true,})},//回收记录getRecord(){wx.navigateTo({url: '../orderRecord/orderRecord?active=3',})},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/5960.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

HTMLCSS:爱上班的猫咪

这段HTML和CSS代码是一个SVG动画的示例&#xff0c;它描述了一个包含猫咪和笔记本电脑的复杂场景 HTML <div class"content"><div class"container"><svg id"bongo-cat" xmlns"http://www.w3.org/2000/svg" xmlns:x…

使用SearXNG-搭建个人搜索引擎(附国内可用Docker镜像源)

介绍 SearXNG是聚合了七十多种搜索服务的开源搜索工具。我们可以匿名浏览页面&#xff0c;不会被记录和追踪。作为开发者&#xff0c;SearXNG也提供了清晰的API接口以及完整的开发文档。 部署 我们可以很方便地使用Docker和Docker compose部署SearXNG。下面给出Docker部署Se…

基于前后端分离架构,SaaS云平台与私有云部署的智慧校园源码,java电子班牌源码

基于前后端分离架构&#xff0c;SaaS云平台与私有云部署的智慧校园源码&#xff0c;java电子班牌源码&#xff0c;自主研发&#xff0c;自主版权&#xff0c;上百个学校应用案例&#xff0c;支持二次开发。 在信息技术飞速发展的今天&#xff0c;教育领域也迎来了一场革命性的变…

java.lang.NoClassDefFoundError: kotlin/jvm/JvmInline

springboot项目&#xff0c;调用接口时&#xff0c;报这个错误&#xff0c;跟踪断点发现数据库也查询到了数据&#xff0c;就是在返回时报错了&#xff0c;后来一看是pom.xml中引入了 <dependency><groupId>com.fasterxml.jackson.module</groupId><artif…

yolov8涨点系列之替换幽灵卷积GhostConv

文章目录 核心思想主要步骤优势yolov8.yaml文件增加CBAMyolov8.yamlyolov8.yaml将Conv卷积替换成GhostConv 幽灵卷积&#xff08;Ghost Conv&#xff09;是一种新颖的卷积操作方法&#xff0c;旨在解决传统卷积神经网络中参数量和计算量过大的问题&#xff0c;尤其适用于资源受…

MongoDB Shell 基本命令(三)聚合管道

管道含义 类似Linux中的管道&#xff0c;前一个命令的输出作为后一个命令的输入。 显示网络连接、路由表和网络接口统计信息 netstat -ano -netstat:network statistics 网络统计 -a:显示所有连接和监听端口&#xff0c;包括所有活动的TCP和UDP连接。 -n:以数字形式显示地址…

C++重启/秋招已保底备战春招

C面向对象高级开发&#xff08;上&#xff09;学习笔记 第三节&#xff1a; 问题1&#xff1a;C中对构造函数使用初始列和函数体中赋值结果是一样的&#xff0c;但是为什么使用初始列的形式更好 解答&#xff1a;最重要的还是1和2&#xff0c;效率更高避免调用默认构造函数&…

云渲染怎么用?一片看懂云渲染渲染农场渲染100操作指南

就拿“渲染 100”云渲染来说吧&#xff0c;它的使用教程是这样的&#xff1a; 1.安装客户端 在渲染之前要准备好安装“渲染 100”云渲染客户端&#xff0c;注册个账号然后登录客户端。 您可以在浏览器里打开渲染 100 云渲染的官网&#xff1a;xuanran100.com/?ycode5858, 在…

私有化视频平台EasyCVR海康大华宇视视频平台视频诊断技术是如何实时监测视频质量的?

在现代视频监控系统中&#xff0c;确保视频流的质量和稳定性至关重要。随着技术的进步&#xff0c;视频诊断技术已经成为实时监测视频质量的关键工具。这种技术通过智能分析算法对视频流进行实时评估和处理&#xff0c;能够自动识别视频中的各种质量问题&#xff0c;并给出相应…

ECRS工时分析软件:工业工程优化利器,引领生产工序革新

在竞争日益激烈的工业领域&#xff0c;生产效率的提升成为企业持续发展的关键。为此&#xff0c;工业工程学中的程序分析原则应运而生&#xff0c;其中最为核心的便是ECRS四大原则——取消、合并、调整顺序和简化。这些原则为生产工序的优化提供了有力的指导&#xff0c;旨在消…

端侧小模型新星,SmolLM2 1.7B击败了Llama 3.2、Qwen 2.5

SmolLM2开源了&#xff1a;更快、更好、更便宜&#xff0c; 包含三个尺寸&#xff1a;135M、360M 和 1.7B。 端侧小型语言模型新星——SmolLM2 1.7B击败了Qwen 2.5 1.5B和Llama 3.2 1B&#xff1a; Apache 2.0许可 训练于11万亿个令牌 在FineWeb-Edu、DCLM、The Stack以及新的…

[LeetCode-45] 基于贪心算法的跳跃游戏 II-最少跳跃次数的求解(C语言版)

/* 题目出处&#xff1a;LeetCode 题目序号&#xff1a;45. 跳跃游戏 II 题目叙述&#xff1a;给定一个长度为 n 的整数数组 nums。初始位置为 nums[0]。每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转…

数据结构 —— 红黑树

目录 1. 初识红黑树 1.1 红黑树的概念 1.2 红⿊树的规则 1.3 红黑树如何确保最长路径不超过最短路径的2倍 1.4 红黑树的效率:O(logN) 2. 红黑树的实现 2.1 红黑树的基础结构框架 2.2 红黑树的插⼊ 2.2.1 情况1&#xff1a;变色 2.2.2 情况2&#xff1a;单旋变色 2.2…

第J9周:Inception v3算法实战与解析(pytorch版)

>- **&#x1f368; 本文为[&#x1f517;365天深度学习训练营]中的学习记录博客** >- **&#x1f356; 原作者&#xff1a;[K同学啊]** &#x1f4cc;本周任务&#xff1a;&#x1f4cc; 了解并学习InceptionV3相对与InceptionV1有哪些改进的地方 使用Inception完成天气…

什么是 AWS PrivateLink

您可以使用 Amazon VPC 定义虚拟私有云&#xff08;VPC&#xff09;&#xff0c;这是一个逻辑隔离虚拟网络。您可以在 VPC 中启动 AWS 资源。您可以允许 VPC 中的资源连接到该 VPC 外部的资源。例如&#xff0c;向 VPC 添加互联网网关以允许访问互联网&#xff0c;或添加 VPN 连…

vue2 -- el-form组件动态增减表单项及表单项验证

需求 在数据录入场景(如订单信息录入)中,可根据实际情况(如商品种类增加)动态添加表单项(如商品相关信息)。包含必填项验证和数据格式验证(如邮箱、电话格式),防止错误数据提交。 效果 代码一 <template><div>

旧衣回收小程序:提高回收效率,扩大服务范围

近年来&#xff0c;旧衣回收作为一种新兴回收模式&#xff0c;逐渐走入了大众的生活中&#xff0c;在回收市场中形成了新的商业模式&#xff0c;也为大众带来了新的创业选择。 随着社会生活的快速发展&#xff0c;人们的生活水平不断提高&#xff0c;为旧衣市场发展提供了基础…

电子电气架构 --- Trace 32(劳特巴赫)多核系统的调试

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所有人的看法和评价都是暂时的,只有自己的经历是伴随一生的,几乎所有的担忧和畏惧,都是来源于自己的想象,只有你真的去做了,才会发现有多快乐。…

使用C++和QT开发应用程序入门以及开发实例分享

目录 1、搭建开发环境&#xff08;VS2010和QT4.8.2&#xff09; 2、创建一个QT窗口 3、在QT窗口中添加子窗口 4、QT界面布局 5、QT信号&#xff08;SIGNAL&#xff09;和槽&#xff08;SLOT&#xff09; 6、最后 C软件异常排查从入门到精通系列教程&#xff08;专栏文章列…

1553B总线协议

参考地址 MIL-STD-1553B时分制指令/响应多路传输数据总线采用半双工传输方式。 1553B总线协议概述 1553B总线协议是一种军用标准&#xff0c;主要用于飞机上的设备间的信息传输。这种协议由美国军方制定&#xff0c;被广泛应用于航空、航天和军事领域的电子联网系统中。1553B…