微信小程序数据拼接_微信小程序使用原生WebSokcet实现断线重连及数据拼接
以前做小程序为了应急找了个插件去链接WebSokcet,文章传送门。
回过头在新项目中再次使用时出现了些许问题,不一一赘述。遂决定好好用一下原生的WebSokcet。
一、说明
1.小程序原生的WebSokcet没有断线重连机制,这个是他的不足之处。
2.小程序新的版本库已经支持存在多个 WebSokcet 连接。
官方说明:基础库 1.7.0 之前,一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该连接,并重新创建一个 WebSocket 连接。基础库版本 1.7.0 及以后,支持存在多个 WebSokcet 连接,每次成功调用 wx.connectSocket 会返回一个新的 SocketTask。
二、实际例子:
首先你需要socket地址url: let url = 'wss://http://xxx.xxx.com/?xxx=xxx'
注意:1.小程序管理后台添加socket域名的时候不能出现端口;2.如果使用了appID,协议必须是 wss;3.socket服务端映射的端口仅支持 80 和 443,和公众号一个尿性。
接下来放例子:
1、socket.js
const app = getApp();
let url = 'wss://xxx.xxx.com/?xxx=xxx'
export const connect = function (cb) { // 定义一个方法
wx.connectSocket({ // 创建一个 WebSocket 连接
url: url,
fail (err) {
if (err) {
console.log('%cWebSocket连接失败', 'color:red', err)
app.globalData.socketConnectFail = true // 定义一个全局变量,当链接失败时改变变量的值
}
}
})
wx.onSocketOpen(function (res) { // 监听WebSocket连接打开事件。
console.log('WebSocket打开成功');
wx.sendSocketMessage({ // 通过 WebSocket 连接发送数据,需要先 wx.connectSocket,并在 wx.onSocketOpen 回调之后才能发送。
data: String2Base64(), // 用于订阅的参数,视具体情况而定
success (data) {
console.log('WebSocket发送消息:', data.errMsg)
},
fail (err) {
console.log('Err', err)
}
})
})
wx.onSocketMessage(function (res) { // 监听WebSocket接受到服务器的消息事件。
console.log('WebSocket接收到消息:', ArryBuffer2Json(res.data));
cb(ArryBuffer2Json(res.data)); // 将接收到的消息进行回调,如果是ArryBuffer,需要进行转换
})
wx.onSocketError(function (res) { // 监听WebSocket错误。
console.log('WebSocket连接打开失败')
})
wx.onSocketClose(function (res) { // 监听WebSocket关闭。
console.log('WebSocket关闭');
})
};
function ArryBuffer2Json (data) { // ArryBuffer转换成Json
try {
var encodedString = String.fromCharCode.apply(null, new Uint8Array(data));
var decodedString = decodeURIComponent(atob(encodedString));
return JSON.parse(decodedString);
} catch (err) {
console.log(err);
return false;
}
}
function String2Base64 () { // 用于订阅的参数,视具体情况而定
var packet = {};
packet["cmd"] = "subscribe";
packet["reqNo"] = "" + new Date().getTime();
packet["params"] = {token: token, channelId: 'xcx', columnIds: "1"};
return stringToUint(JSON.stringify(packet))
}
function stringToUint (string) {
var string = base64_encode(encodeURIComponent(string)),
charList = string.split(''),
uintArray = [];
for (var i = 0; i < charList.length; i++) {
uintArray.push(charList[i].charCodeAt(0));
}
return new Uint8Array(uintArray);
}
function base64_encode (str) { // base64转码
var c1, c2, c3;
var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
var i = 0, len = str.length, string = '';
while (i < len) {
c1 = str.charCodeAt(i++) & 0xff;
if (i == len) {
string += base64EncodeChars.charAt(c1 >> 2);
string += base64EncodeChars.charAt((c1 & 0x3) << 4);
string += "==";
break;
}
c2 = str.charCodeAt(i++);
if (i == len) {
string += base64EncodeChars.charAt(c1 >> 2);
string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
string += base64EncodeChars.charAt((c2 & 0xF) << 2);
string += "=";
break;
}
c3 = str.charCodeAt(i++);
string += base64EncodeChars.charAt(c1 >> 2);
string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
string += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
string += base64EncodeChars.charAt(c3 & 0x3F)
}
return string
}
2、index.js
let openSocket = require('../../config/socket.js');
const app = getApp();
data: {
motto: 'Hello World',
articleData: []
},
onLoad: function () {
let that = this;
openSocket.connect(function (data) { // WebSocket初始化连接
let result = data.data
if (result) {
that.setData({articleData: [result].concat(that.data.articleData)}) // 将获得的socket推送消息拼接到当前文章列表的最前面
}
});
if (app.globalData.socketConnectFail) { // WebSocket断线重连
setInterval(() => {
openSocket.connect(function (data) {
let result = data.data
if (result) {
that.setData({articleData: [result].concat(that.data.articleData)})
}
});
}, 1000)
}
}
3、app.js
globalData: {
socketConnectFail: false
}
微信小程序数据拼接_微信小程序使用原生WebSokcet实现断线重连及数据拼接相关推荐
- 【V2.0】基于运动步数API的自动更新系统(支持断线重连、数据补偿)
[V2.0]基于运动步数API的自动更新系统(支持断线重连.数据补偿) 前文: https://blog.csdn.net/weixin_53403301/article/details/122882 ...
- 微信小程序数据拼接_微信小程序 数据预拉取
数据预拉取 预拉取能够在小程序冷启动的时候通过微信后台提前向第三方服务器拉取业务数据,当代码包加载完时可以更快地渲染页面,减少用户等待时间,从而提升小程序的打开速度 . 使用流程 1. 配置数据下载地 ...
- php 小程序 运动步数_【小程序+ thinkphp5】 获取微信运动数据
配置.请参看上篇文章.这里直接上代码 PHP 代码: //获取微信运动数据: public functiontest(){$code = input("code");$signat ...
- 微信小程序python自动化测试_微信小程序的自动化测试框架
微信小程序的自动化测试框架 微信发布了小程序的自动化测试框架Minium,提供了多种运行验证方式,其特点: 支持一套脚本,iOS & Android & 模拟器,三端运行 提供丰富的页 ...
- 快手小店电脑版_微信PC版更新!支持在小程序中使用微信支付 | 一周资讯
小程序1. 微信PC版更新,支持在小程序中使用微信支付.12月19日,微信PC端推出内测版2.7.2.73,新版本支持以下新功能:新增看一看精选内容,新的订阅号浏览体验,支持在小程序中使用微信支付.( ...
- php 小程序 运动步数_微信小程序步数运动-收益讲解
不得不佩服,步数小程序的厉害之处. 把闲散的运动步数,转化成一种可量化的社交货币,流动保存起来,探索出一种门槛低,又健康的经济模式. 对用户,真金白银的刺激,免费步数换取/抵现商品,红包,充值卡等. ...
- java小程序详解_微信小程序登录Java后台接口(详解,附示例代码)
首先看一下官方文档 地址:微信小程序官方文档API登录接口 我们先对官方给的时序图进行简单的分析 1.当小程序调用wx.login()时,会获得一个code(临时登录凭证),然后我们需要用wx.req ...
- 超市微信小程序怎么做_微信小程序便利店怎么开?便利店和百货超市怎么开发小程序?...
微信小程序便利店怎么开?便利店和百货超市怎么开发小程序?下面跟随小编一起来看看吧! 现在很多商家还在小程序是什么,流行的说法是开店到微信,创建一个互联网离线模式,将近五公里的小程序显示出来,只要别人用 ...
- 拼团小程序源码_微信小程序拼团系统为什么很多商家开发
问大家一个问题,你有收到过朋友的微信小程序拼团消息吗?相信不少的人都收到过,但是一些不太了解小程序的人,对拼团系统还不太了解,西安小程序开发青云在线小编告诉您,小程序拼团模式也叫做团购模式,同样一款产 ...
最新文章
- 如何改变android5.1音量进度条,HTML5音频audio属性
- SpringBoot:class path resource [xxxx.xml] cannot be opened because it does not exist
- 八十七、探究最短路问题:Dijkstra算法
- VTK:绘制带有rgb的单元格颜色用法实战
- innovus停止当前命令_从命令行停止node.js程序
- 命令模式(3)-宏命令
- 物联网卡11位和13位号码的区别在于哪
- oracle的merge into 的用法
- php 苹果支付验证,PHP实现Apple应用内购服务端验证
- Seven Kinds of Testers - 七种类型的测试
- 【图像边缘检测】基于matlab蚁群聚类图像边缘检测【含Matlab源码 728期】
- 如何快速获取CSDN积分
- FCM算法与K-means 算法
- nserror 自定义错误_iOS NSError详解 NSError错误code对照表 自定义、定制NSError 一看就懂...
- 【SDCC 2016现场】数据库/大数据技术实战专场实录(下)
- 计算机表格简单教程视频教程,电脑如何制作表格步骤 教你制作简单的excel表格...
- mininet sflow 资料和经验
- OpenCV-霍夫线变换
- cs ss ds es
- 电信isag接口java_使用ag-grid进行国际化
热门文章
- 促销海报灵感素材,不卖出去都难
- 华为业务板块_复盘丨华为Mate30发布 电子板块再爆涨停潮
- android 浮动文字提示,怎么在Android中实现一个自由拖动并显示文字的悬浮框
- python语言中最基本的概念_Python 学习之路-基本的概念(三)
- 决策树 随机森林 xgboost_推荐收藏 | 决策树、随机森林、bagging、boosting、Adaboost、GBDT、XGBoost总结...
- C++ 各种数据类型转换总结(不断更新中.....)
- https://sysdig.com/blog/
- 正则化检测TR069的参数路径是否合法
- 端到端O-RAN用例测试
- Linux Socket C语言网络编程:UDP Socket