您现在的位置是:首页 > 网站制作 > uni-appuni-app
uni-app websocket 封装
三七2022-10-18【uni-app】人已围观
简介即时通讯长链接
1. 创建websocket.js
//是否已经连接上ws
let isOpenSocket = false
//心跳间隔,单位毫秒
let heartBeatDelay = 10000
let heartBeatInterval = null
//心跳时发送的消息文本
let heartBeatText = 2 //每次心跳请求的数据
//最大重连次数
let reconnectTimes = 10
let reconnectInterval = null
//重连间隔,单位毫秒
let reconnectDelay = 3000
let wsUrl = 'wss//menghn.com' + 2 //ws请求 或者 wss
let socketTask = null
//这个参数是防止重连失败之后onClose方法会重复执行reconnect方法,导致重连定时器出问题
//连接并打开之后可重连,且只执行重连方法一次
let canReconnect = false
//封装的对象,最后以模块化向外暴露,
//init方法 初始化socketTask对象
//completeClose方法 完全将socketTask关闭(不重连)
//其他关于socketTask的方法与uniapp的socketTask api一致
let ws = {
socketTask: null,
init,
completeClose,
send
}
function init() {
socketTask = uni.connectSocket({
url: wsUrl,
complete: (res)=> {console.log("WebSocket连接成功")}
})
socketTask.onOpen((res) => {
console.log("WebSocket连接已打开",res)
clearInterval(heartBeatInterval)
clearInterval(reconnectInterval)
isOpenSocket = true
canReconnect = true
//开启心跳机制 向websocket发送数据,json格式,参数:sceneId
send(2)//2是心跳请求的数据
heartBeat()
})
socketTask.onMessage((res) => {
// 每次返回的数据不一样,需要加入判断
console.log('收到服务器内容',JSON.parse(res.data))
let result = JSON.parse(res.data)
//这边可以根据推送的数据, 做相应的 do somethings, 根据自己需求, 下面只是例子..
// token存在,说明,小程序用户点击了授权(比如推送的数据有token,那就做什么事xxxx
// if(result.token){
// uni.setStorageSync('token', result.token)
// uni.setStorageSync('userInfo', JSON.stringify(result.userInfo))
// }
// // client_id存在,说明连websocket接成功
// if(result.msg=="连接成功"){
// uni.setStorageSync('client_id', result.data.client_id);
// }
// // JSON.parse(res.data).msg=="已归还导览机", 已归还导览机,清空用户缓存
// if(result.msg=="已归还导览机"){
// // 返回首页,清空数据
// uni.clearStorageSync();
// uni.navigateBack({
// delta: 100
// })
// }
})
socketTask.onClose(() => {
if(isOpenSocket){
console.log("ws与服务器断开")
}else{
console.log("连接失败")
}
isOpenSocket = false
if(canReconnect){
reconnect()
canReconnect = false
}
})
ws.socketTask = socketTask
}
function heartBeat() {
heartBeatInterval = setInterval(() => {
// console.log(heartBeatText)
send(JSON.stringify(heartBeatText));
}, heartBeatDelay)
}
// 发送消息
function send(value) {
ws.socketTask.send({
data: value,
async success(res) {
console.log("消息发送成功",res)
}
});
}
function reconnect() {
//停止发送心跳
clearInterval(heartBeatInterval)
//如果不是人为关闭的话,进行重连
if (!isOpenSocket) {
let count = 0;
reconnectInterval = setInterval(() => {
console.log("正在尝试重连")
init();
count++
//重连一定次数后就不再重连
if(count >= reconnectTimes){
clearInterval(reconnectInterval)
console.log("网络异常或服务器错误")
}
}, reconnectDelay)
}
}
function completeClose(){
//先将心跳与重连的定时器清除
clearInterval(heartBeatInterval)
clearInterval(reconnectInterval)
canReconnect = false
ws.socketTask.close()
}
module.exports = ws
//
// this.$ws.init()//初始化websocket
// this.$ws.completeClose()//停止
//在js文件使用引入文件
//import ws from '@/utils/websocket.js'
//使用ws.init()//初始化websocket
//是否已经连接上ws
let isOpenSocket = false
//心跳间隔,单位毫秒
let heartBeatDelay = 10000
let heartBeatInterval = null
//心跳时发送的消息文本
let heartBeatText = 2 //每次心跳请求的数据
//最大重连次数
let reconnectTimes = 10
let reconnectInterval = null
//重连间隔,单位毫秒
let reconnectDelay = 3000
let wsUrl = 'wss//menghn.com' + 2 //ws请求 或者 wss
let socketTask = null
//这个参数是防止重连失败之后onClose方法会重复执行reconnect方法,导致重连定时器出问题
//连接并打开之后可重连,且只执行重连方法一次
let canReconnect = false
//封装的对象,最后以模块化向外暴露,
//init方法 初始化socketTask对象
//completeClose方法 完全将socketTask关闭(不重连)
//其他关于socketTask的方法与uniapp的socketTask api一致
let ws = {
socketTask: null,
init,
completeClose,
send
}
function init() {
socketTask = uni.connectSocket({
url: wsUrl,
complete: (res)=> {console.log("WebSocket连接成功")}
})
socketTask.onOpen((res) => {
console.log("WebSocket连接已打开",res)
clearInterval(heartBeatInterval)
clearInterval(reconnectInterval)
isOpenSocket = true
canReconnect = true
//开启心跳机制 向websocket发送数据,json格式,参数:sceneId
send(2)//2是心跳请求的数据
heartBeat()
})
socketTask.onMessage((res) => {
// 每次返回的数据不一样,需要加入判断
console.log('收到服务器内容',JSON.parse(res.data))
let result = JSON.parse(res.data)
//这边可以根据推送的数据, 做相应的 do somethings, 根据自己需求, 下面只是例子..
// token存在,说明,小程序用户点击了授权(比如推送的数据有token,那就做什么事xxxx
// if(result.token){
// uni.setStorageSync('token', result.token)
// uni.setStorageSync('userInfo', JSON.stringify(result.userInfo))
// }
// // client_id存在,说明连websocket接成功
// if(result.msg=="连接成功"){
// uni.setStorageSync('client_id', result.data.client_id);
// }
// // JSON.parse(res.data).msg=="已归还导览机", 已归还导览机,清空用户缓存
// if(result.msg=="已归还导览机"){
// // 返回首页,清空数据
// uni.clearStorageSync();
// uni.navigateBack({
// delta: 100
// })
// }
})
socketTask.onClose(() => {
if(isOpenSocket){
console.log("ws与服务器断开")
}else{
console.log("连接失败")
}
isOpenSocket = false
if(canReconnect){
reconnect()
canReconnect = false
}
})
ws.socketTask = socketTask
}
function heartBeat() {
heartBeatInterval = setInterval(() => {
// console.log(heartBeatText)
send(JSON.stringify(heartBeatText));
}, heartBeatDelay)
}
// 发送消息
function send(value) {
ws.socketTask.send({
data: value,
async success(res) {
console.log("消息发送成功",res)
}
});
}
function reconnect() {
//停止发送心跳
clearInterval(heartBeatInterval)
//如果不是人为关闭的话,进行重连
if (!isOpenSocket) {
let count = 0;
reconnectInterval = setInterval(() => {
console.log("正在尝试重连")
init();
count++
//重连一定次数后就不再重连
if(count >= reconnectTimes){
clearInterval(reconnectInterval)
console.log("网络异常或服务器错误")
}
}, reconnectDelay)
}
}
function completeClose(){
//先将心跳与重连的定时器清除
clearInterval(heartBeatInterval)
clearInterval(reconnectInterval)
canReconnect = false
ws.socketTask.close()
}
module.exports = ws
//
// this.$ws.init()//初始化websocket
// this.$ws.completeClose()//停止
//在js文件使用引入文件
//import ws from '@/utils/websocket.js'
//使用ws.init()//初始化websocket
Tags:
很赞哦! ()