【uniApp】 webSocket 封装和uni.request封装及使用方式

websocket

import meApi from '@/common/meApi.js'
//是否已经连接上ws
let isOpenSocket = false
//心跳间隔，单位毫秒
let heartBeatDelay = 3000
let heartBeatInterval = null
//心跳时发送的消息文本
let heartBeatText = ""
//最大重连次数
let reconnectTimes = 10
let reconnectInterval = null
//重连间隔，单位毫秒
let reconnectDelay = 3000

// let wsUrl = "ws://XXXX.SERVER"
let wsUrl = meApi.ws_device

let socketTask = null

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

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

function init(agentData, messageCallback) { // 两个参数：发送不同的标识&处理接收消息
	var socketTask = uni.connectSocket({
		url: wsUrl,
		complete: () => {}
	})

	socketTask.onOpen((res) => {
		console.log("ws连接成功")
		clearInterval(heartBeatInterval)
		clearInterval(reconnectInterval)
		isOpenSocket = true
		canReconnect = true
		//send(JSON.stringify(agentData));
		send(agentData)
		//开启心跳机制
		// heartBeat()
	})


	socketTask.onMessage((res) => {
		//自定义处理onMessage方法
		// console.log(res)
		onWsMessage(res, messageCallback) //


	})
	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 onWsMessage(event, messageCallback) { // 处理接收消息
	const jsonStr = event.data
	//writeToScreen('onWsMessage接收到服务器的数据: ', jsonStr)
	var msg = JSON.parse(jsonStr);
	messageCallback(msg)
}

function send(value) {
	ws.socketTask.send({
		data: value,
		async success() {
			console.log("消息标识发送成功", value)
		}
	});
}

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

/**
 * USE
 * 
	 onLoad(){
		 let token = uni.getStorageSync('access_token');
		 this.$ws.init(token, (data) => {
			this.handlerWebSocketMsg(data)
		 })
	 }
 
 	methods: {
		//处理websocket返回的消息
		handlerWebSocketMsg(msg) {
			if (msg.msg_type === 'A') {
				if (msg.imei === this.Info.imei) {
					this.message = msg
				}
			}
			if (msg.msg_type === 'B') {}
			if (msg.msg_type === 'C') {
				uni.navigateTo({
					url: '../login/login'
				})
			} else {
		
			}
		},
	}
 */

uni.request

// request.js
// 通常可以吧 baseUrl 单独放在一个 js 文件了
// const baseUrl = 'http://xxx.xxx.4.xxxx:8093/chemApp'
const baseUrl = ''
//const token = uni.getStorageSync('access_token')

const request = (options = {}) => {

	options.header = {
		'Authorization': uni.getStorageSync('access_token'),
		"Content-Type": "application/x-www-form-urlencoded"
	}
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseUrl + options.url || '',
			method: options.type || 'GET',
			data: options.data || {},
			header: options.header || {}
		}).then(data => {
			let [err, res] = data;
			resolve(res);
		}).catch(error => {
			reject(error)
		})
	});
}

const get = (url, data, options = {}) => {

	options.type = 'GET';
	options.data = data;
	options.url = url;
	return request(options)
}

const post = (url, data, options = {}) => {
	options.type = 'POST';
	options.data = data;
	options.url = url;
	return request(options)
}


export default {
	request,
	get,
	post
}



/*
* USE
*
import meRequest from '@/common/meRequest.js'
	
initViewData(deviceId) {
	uni.showLoading({
		title: this.$t('common').loading
	})
	meRequest.post(meApi.post_detail, {
		deviceId
	}).then(res => {
		uni.hideLoading()
		if (res.data.code === 1000) {
		}
	})
},
*/