1.  websocket.js   封装代码

//是否已经连接上ws
let isOpenSocket = false
//心跳间隔,单位毫秒
let heartBeatDelay = 3000
let heartBeatInterval = null
//心跳时发送的消息文本
let heartBeatText = "PING"
//最大重连次数
let reconnectTimes = 10
let reconnectInterval = null
//重连间隔,单位毫秒
let reconnectDelay = 3000 let wsUrl = "ws://xxxxxxxxxxxx" //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连接成功",res)}
})
socketTask.onOpen((res) => {
console.log("WebSocket连接已打开",res)
clearInterval(heartBeatInterval)
clearInterval(reconnectInterval)
isOpenSocket = true
canReconnect = true
//开启心跳机制 向websocket发送数据,json格式,参数:sceneId
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)
uni.getSystemInfo({
success: function (res) {
console.log('设备id----',res.deviceId);//设备id
uni.setStorageSync('deviceId', res.deviceId)
let obj = {
sceneId:res.deviceId
}
send(JSON.stringify(obj));
}
}); }, 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

2. 使用时在main.js引入并绑定在Vue的prototype上,这样就可以做到全局变量了
main.js

import ws from 'ws.js' //找好自己的路径
Vue.prototype.$ws = ws

3. 页面调用

比如在 A页面调用

onLoad() {
let _this = this;
_this.$ws.init()//初始化websocket
}

4. 里面封装的  send方法等也都可以用  // this.$ws.send(JSON.stringify(obj))

更多参考链接

uniapp中websokcet封装和使用的更多相关文章

  1. uniapp中拿到base64转blob对象,或base64转bytes字节数组,io操作写入字节流文件bytes

    1. uniAPP中拿到附件的base64如何操作,如word文件 /*** 实现思路:* 通过native.js的io操作创建文件,拿到平台绝对路径* 再通过原生类进行base64解码,拿到字节流b ...

  2. Java中的封装

    在前面的一些日子里,一只都在学习C#语言,使用C#在做一些小项目的,今天转到了Java的学习,还是感觉有点的不习惯,没有以前的中文界面的,全是英文.写起代码来都一直保持着C#中的编码的习惯,但是学习J ...

  3. C++内存中的封装、继承、多态(下)

    上篇讲述了内存中的封装模型,下篇我们讲述一下继承和多态. 二.继承与多态情况下的内存布局 由于继承下的内存布局以及构造过程很多书籍都讲得比较详细,所以这里不细讲.重点讲多态. 继承有以下这几种情况: ...

  4. C++内存中的封装、继承、多态(上)

    C++内存中的封装.继承.多态(上) 继我的上一篇文章:浅谈学习C++时用到的[封装继承多态]三个概念 此篇我们从C++对象内存布局和构造过程来具体分析C++中的封装.继承.多态. 一.封装模型的内存 ...

  5. Uni-app中Class绑定与Style绑定

    为了节约性能,我们将Class与Style的表达式通过compiler硬编码到uni-app中 支持语法和转换效果如下: Class支持语法: <view :class="{ acti ...

  6. Struts2把数据封装到集合中之封装到Collection中

    数据封装到集合中,可以封装到集合中,也可以封装到Map中.该篇博客主要讲解数据封装到集合中的封装到Collection中. 1. 封装复杂类型的参数(集合类型 Collection .Map接口等) ...

  7. 如何在Javascript中利用封装这个特性

    对于熟悉C#和Java的兄弟们,面向对象的三大思想(封装,继承,多态)肯定是了解的,那么如何在Javascript中利用封装这个特性呢? 我们会把现实中的一些事物抽象成一个Class并且把事物的属性( ...

  8. 2018.2.2 JavaScript中的封装

    JavaScript中的封装 1.封装的概念 通过将一个方法或者属性声明为私用的,可以让对象的实现细节对其他对象保密以降低对象之间的耦合程度,可以保持数据的完整性并对其修改方式加以约束,这样可以使代码 ...

  9. 优雅的在WinForm/WPF/控制台 中使用特性封装WebApi

    优雅的在WinForm/WPF/控制台 中使用特性封装WebApi 说明 在C/S端作为Server,建立HTTP请求,方便快捷. 1.使用到的类库 Newtonsoft.dll 2.封装 HttpL ...

随机推荐

  1. 『现学现忘』Docker相关概念 — 8、虚拟化技术和容器技术的关系

    目录 1.云计算中虚拟化技术和容器技术到的关系 2.虚拟机和容器对比 3.虚拟化技术和容器技术区别 1.云计算中虚拟化技术和容器技术到的关系 通过一个关于房间和住人的小问题,我们来初步的理解一下虚拟化 ...

  2. centos网卡配置修改

    centos网卡配置文件一般位于:/etc/sysconfig/network-scripts/ 文件名一般为:ifcfg-eno或者ifcfg-eth0类似的文件,可以先用ip addr 命令或者是 ...

  3. LGP5312题解

    压 位 T r i e 入 门 练 习 题(确信) 题意很清楚( 让我们先来想一想,如果没有排序操作的话,这道题应该怎么做. 我们维护一个 \(x\) 表示从开始到现在一共异或上了 \(x\),在序列 ...

  4. 关于C#窗体应用程序的一点总结

    1.在窗体Form在Form_Load函数中写了过多的界面初始化语句导致界面卡顿时 解决方法为:将一些初始化语句写在public Form()函数中,会大大加快程序的初始化加载速度. 2.为butto ...

  5. chap8-fluent python

    浅拷贝 VS 深拷贝 # In[] # list 生成一个新的引用对象,只是用alst完成初始化 alst = [1,2,3,4,5] blst=list(alst) alst.append(6) p ...

  6. buffer 和 cache (转)

    Cache是把最常用的工具放在手边, Buffer是你家的垃圾桶,你平时的垃圾先扔在垃圾桶里,等垃圾桶满了再扔垃圾. Cache的存在原因是对资源调用的空间局部性,你现在在看一本数学书,那么极有可能你 ...

  7. [SWPU2019] NETWORK

    [SWPU2019]Network(TTL隐写) 1.题目概述 2.解题过程 文档中的数字代表什么呢?会不会是RGB? 看了一下以前做过的题目,好像并不是 那是什么呢?百度告诉我这是TTL隐写,哇,长 ...

  8. ActiveMQ 笔记—01

  9. asp.net多语言网站的完整解决方案

    应用场景:通过前端切换网站使用英语.中文两种语言. 解决思路:ResourceManager会通过当前线程区域性信息,读取对应的Resource文件,从而达到切换语言的效果,其实质是是在切换当前线程的 ...

  10. json.dumps参数之解

    宝藏参数,懂的都懂^-^ 说明:编译后print()打印内容,此内容以字符串紧凑输出,且无顺序,中文不可读..   应用:使用pycharm做接口测试时,print()打印出的接口下行,如下图:   ...