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. laravel json封装

    目录文件下新建一个BaseConttoller控制器 <?php namespace App\Http\Controllers\Task\Task13; use App\Http\Control ...

  2. php使用kafka代码

    生产者 producer.php文件 <?php /** * Created by PhpStorm. * User: shiyibo * Date: 2019/2/24 * Time: 12: ...

  3. linux下oracle数据库的启动

    linux下oracle数据库的启动 一.切换oracle用户 命令:su - oracle 二.运行sqlplus命令,进入sqlplus环境 命令:sqlplus /nolog (nolog参数表 ...

  4. 淘宝 NPM 镜像站切换新域名啦

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 源起 淘宝 NPM 镜像站(npm.taobao.org)自 2014 年 正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前 ...

  5. redis不重启,切换到RDB备份到AOF备份

    redis不重启,切换RDB备份到AOF备份 确保redis版本在2.2以上 查看redis版本 redis-server -v 实验环境准备 本文是在redis4.0中,通过config set命令 ...

  6. 3、Lambda表达式

    Lambda表达式 Lambda表达式(lambda expression),是一种匿名函数,即没有函数名的函数. Lambda表达式不仅在C#中使用,在Java.Phtyon.C++ 中都有使用. ...

  7. JavaScript this的理解

    一直对js的this不怎么理解,最近看了JavaScript 语言精髓的相关章节,有点清晰的理解了,记录记录 /* 来自: JavaScript 语言精髓 方法:当一个函数被定义为对象的一个属性时,我 ...

  8. 你的图片可能是这样被CORB“拦截”的

    问题 最近学习一个uniapp+nodejs的项目,前端写了这样一个标签 <image :src="info.imgUrl" ></image> 按理说不应 ...

  9. 什么是 OAuth?

    OAuth 代表开放授权协议.这允许通过在 HTTP 服务上启用客户端应用程序(例 如第三方提供商 Facebook,GitHub 等)来访问资源所有者的资源.因此,您可 以在不使用其凭据的情况下与另 ...

  10. synchronized使用及原理解析

    修饰静态方法.实例方法.代码块 Synchronized修饰静态方法,对类对象进行加锁,是类锁. Synchronized修饰实例方法,对方法所属对象进行加锁,是对象锁. Synchronized修饰 ...