微信小程序使用WebSokcet实现相关请求
时间:2022-04-24
本文章向大家介绍微信小程序使用WebSokcet实现相关请求,主要内容包括一、说明、二、实际例子:、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
以前做小程序为了应急找了个插件去链接WebSokcet,文章传送门。
回过头在新项目中再次使用时出现了些许问题,不一一赘述。遂决定好好用一下原生的WebSokcet。
一、说明
1.小程序原生的WebSokcet没有断线重连机制,这个是他的不足之处。
2.小程序新的版本库已经支持存在多个 WebSokcet 连接。
官方说明:基础库 1.7.0 之前,一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该连接,并重新创建一个 WebSocket 连接。基础库版本 1.7.0 及以后,支持存在多个 WebSokcet 连接,每次成功调用 wx.connectSocket 会返回一个新的 SocketTask。
官方文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-socket.html#wxclosesocket
二、实际例子:
首先你需要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
}
- Linux基础(day66)
- 字符串的驻留(String Interning)
- 19.5 忘记Admin密码如何做
- 19.3/19.4/19.6 安装zabbix
- 欲火焚身,心静则凉--只靠冲动是不能长久地
- 深入理解C#3.x的新特性(4):Automatically Implemented Property
- 增加网卡注意点
- 深入理解C# 3.x的新特性(1): Anonymous Type
- Linux基础(day65)
- 18.12 keepalived + LVS
- 学会JS只是知道了“是什么”,并不意味着你会用JS做什么
- Linux基础(day68)
- 启动zabbix 报错
- 深入理解C# 3.x的新特性(2):Extension Method[上篇]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP实现的多进程控制demo示例
- 你可能不知道的一些linux文件权限管理办法
- Laravel框架路由与MVC实例详解
- python实现学生管理系统开发
- 使用 chkconfig 和 systemctl 命令启用或禁用 Linux 服务的办法
- PHP defined()函数的使用图文详解
- 详解在Linux中清空或删除大文件内容的5种办法
- php和redis实现秒杀活动的流程
- CentOS 7中搭建NFS文件共享存储服务的完整步骤
- PHP检测一个数组有没有定义的方法步骤
- Yii2.0框架模型多表关联查询示例
- Yii2.0框架模型添加/修改/删除数据操作示例
- thinkphp5.1框架容器与依赖注入实例分析
- 在CentOS VPS上通过SSH安装 MySQL的办法图解
- 详解PHP 7.4 中数组延展操作符语法知识点