uniapp封装websokcet并全局使用

在使用uniapp开发一个IM即时通讯系统时，需要用到websocket协议，uniapp提供了websocket的api,但是使用还是有点不太方便，在网上查找一番之后发现没有符合自己预期的，因此借鉴网上的并修改成自己想要的。

具体代码如下：
ws.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 = "你的后端wsUrl"

let socketTask = null

//这个参数是防止重连失败之后onClose方法会重复执行reconnect方法，导致重连定时器出问题
//连接并打开之后可重连，且只执行重连方法一次
let canReconnect = false

//封装的对象，最后以模块化向外暴露，
//init方法 初始化socketTask对象
//completeClose方法 完全将socketTask关闭（不重连）
//其他关于socketTask的方法与uniapp的socketTask api一致
let ws = {
	socketTask: null,
	init,
	completeClose
}

function init() {
	socketTask = uni.connectSocket({
		url: wsUrl,
		complete: ()=> {}
	})
	socketTask.onOpen((res) => {
		console.log("ws连接成功")
		clearInterval(heartBeatInterval)
		clearInterval(reconnectInterval)
		isOpenSocket = true
		canReconnect = true
		//开启心跳机制
		heartBeat()
	})
	socketTask.onMessage((res) => {
		//自定义处理onMessage方法
		console.log(res)
	})
	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() {
			console.log("消息发送成功")
		}
	});
}

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

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

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

这个$ws并不是最终用来操作的对象，$ws内还有一个socketTask对象，并且$ws对象中还有两个方法,init方法用来初始化socketTask,以及completeClose方法，用来彻底关闭websocket连接（不会重连）

当你在某个vue页面需要使用socketTask的话，需要调用$ws.init()，因为已经将ws挂载到Vue上了，所以在vue页面可以使用this.$ws.init()

为什么不是在main.js就把socketTask对象初始化呢？

因为大部分情况下socketTask对象是需要在一定条件下才初始化的，比如在登录之后，才需要使用。而不是一打开APP就去连接后端的websocket服务器了。

当然，如果需要在main.js中把socketTask对象初始化，可以直接在main.js中调用init方法

关于socketTask的api具体可以去uniapp的官方文档找一找https://uniapp.dcloud.io/api/request/websocket