uniapp封装websocket以及心跳检测、重连

websocket 封装

在所需文件夹下建立websocketUtils.js文件,封装代码如下:

javascript 复制代码
class websocketUtils {
	constructor(openId, time) {
		this.url = `wss://****` //ws地址 拼接一下 此处用的是openId
		this.data = null
        this.isOpenSocket = false //避免重复连接
		this.timeout = time //隔多久执行检测 单位秒(s)
		this.heartbeatInterval = null //检测服务器端是否还存活
		this.reconnectTimeOut = null //重连之后隔多久才再次重连
		try {
			return this.connectSocketInit()
		} catch (e) {
			console.log('===========连接错误捕获catch====================',e);
			this.isOpenSocket = false
			this.reconnect();
		}
	}
	// 创建websocket连接
	connectSocketInit() {
		this.socketTask = uni.connectSocket({
			url: this.url,
      header: {
        //头部可以添加所需字段如token
        'content-type': 'application/json'
      },
			success:()=>{
				console.log("============正准备建立websocket中================");
				// 返回实例
				return this.socketTask
			},
		});
		this.socketTask.onOpen((res) => {
			console.log("==============WebSocket连接正常=============");
			clearTimeout(this.reconnectTimeOut)
			clearInterval(this.heartbeatInterval)
			this.isOpenSocket = true;
			this.start();
			// 只有连接正常打开中 ,才能正常收到消息
			this.socketTask.onMessage((res) => {
				console.log(res.data,'===============接收===onMessage===============')
            //全局注册uniapp事件,在任何页面都能接受到
        uni.$emit('socketMessage', res)
			});
		})
		// 监听失败,再次打开 判断主动重连
		// uni.onSocketError((res) => {
		// 	console.log('==========WebSocket连接打开失败哦===============');
		 //	this.isOpenSocket = false;
		 //	this.reconnect();
		// });
		//  socket关闭了会执行 此处
		this.socketTask.onClose((e) => {
			console.log("========已经被关闭了====================",e)
			this.isOpenSocket = false;
            // 加了flag判断是否为手动(用户主动关闭)
			e && e.reason == 'user' ? '' : this.reconnect();
		})
	}
	//发送消息
	send(value){
		//  连接正常打开时 ,才能正常成功发送消息
		this.socketTask.send({
			data: value,
			async success() {
				console.log("===========消息发送成功===============");
			},
		});
	}
	//开启心跳检测
	start(){
    this.data={value:"发送心跳内容",method:"发送心跳方法名称"}
		this.heartbeatInterval = setInterval(()=>{
			console.log('======start====开启心跳检测====',this.data)
			this.send(JSON.stringify(this.data));
		},this.timeout * 1000)
	}
	//重新连接
	reconnect(){
		//停止发送心跳
		clearInterval(this.heartbeatInterval)
		//如果不是人为关闭的话,进行重连
		if(!this.isOpenSocket ){
			this.reconnectTimeOut = setTimeout(()=>{
				this.connectSocketInit();
			},3000)
		}
	}
  // 关闭 WebSocket 连接
  closeSocket(reason = '关闭') {
    const _this = this
    this.socketTask.close({
      reason,
      success() {
        _this.data = null
        _this.isOpenSocket = false
        _this.socketTask = null
        clearTimeout(_this.reconnectTimeOut)
        clearInterval(_this.heartbeatInterval)
        console.log('===============关闭 WebSocket 成功===================')
      },
      fail() {
        console.log('===================关闭 WebSocket 失败=====================')
      }
    })
  }
	//将获取的消息导出外部
	exportMessage(callback) {
		this.socketTask.onMessage((res) => {
      console.log(res,'===============exportMessage============')
			return callback(res)
		})
	}
}
 
 
module.exports = websocketUtils 

页面引入使用

全局引入:

1.在main.js中引入,并全局注册

javascript 复制代码
//引入websocket文件
import websocketUtils from '@/utils/websocketUtils.js'

//挂载并开启websocket
Vue.prototype.$socketUtils = new websocketUtils("*******",10)

2.指定页面中使用

javascript 复制代码
// 发送消息
let data={value:"发送的value"}
this.$socketUtils.send(JSON.stringify(data));

// 接收消息
this.$socketUtils.exportMessage(res=>{
	console.log(res);
})
单页面使用引入:
javascript 复制代码
<!--  页面  -->
<template>
  <view class='e-about-operation-wrap'>
  </view>
</template>

<script>
  import websocketUtils  from '@/utils/websocketUtils.js'
  const app = getApp()
  export default {
    name: 'ESign',
    components: {},
    data() {
      return { };
    },
    onLoad: function(option) {
    },
    onShow: function() {
      //在uniapp全局中定义了socketWBObj变量
      app.globalData.socketWBObj = new websocketUtils(this.user.loginInfo.openId,10)
      //监听获取消息
      uni.$on('socketMessage', this.wbSocketGetMsg)
      //方法获取收到的消息
      app.globalData.socketWBObj.exportMessage(res => {
		console.warn(res);
	  })
    },
    onHide: function() {
      
    },
    onUnload(e) {
     
    },
    created() {},
    mounted() {
    },
    methods: {
      wbSocketGetMsg(res){
        const _this = this
        console.log(res,'======wbSocketGetMsg==========')
        // 关闭连接
        if (app.globalData.socketWBObj) {
           app.globalData.socketWBObj.closeSocket('user')
        }
      }
    },
    watch: {},
    computed: {},
  }
</script>
<style lang='scss' scoped>
.e-about-operation-wrap{
  
}
</style>
相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具5 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer085 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test6 小时前
js下载excel示例demo
前端·javascript·excel
Yaml46 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理