?1.新建一個(gè)工具類js文件

2. 把我封裝的代碼復(fù)制進(jìn)去

//引入vuex,因?yàn)槲倚枰褂胿uex存儲得到的數(shù)據(jù)
import store from "@/store/index.js"
// 連接
let socketTask = null
// 是否主動關(guān)閉連接
let meClose = false
// 地址 寫你的后端連接地址
let url = "ws://192.168.1.2:8888/ws/"
let token = null
// 重連定時(shí)器
let Time = null
// 心跳定時(shí)器
let XTime = null
// 開啟連接
const sokcet = () => {
    // 我這個(gè)項(xiàng)目需要在連接的時(shí)候帶token，不需要可以只寫url地址
	token = uni.getStorageSync("token") //token
	// console.log(url + token);
	//判斷是否有websocet對象，有的話清空
	if (socketTask) {
		uni.closeSocket()
		socketTask = null;
	}
	// 進(jìn)行連接
	socketTask = uni.connectSocket({
		url: url + token, //僅為示例，并非真實(shí)接口地址。不需要帶token可以只寫url地址
		success(data) {
			clearInterval(Time) //關(guān)閉定時(shí)器
			clearInterval(XTime) //關(guān)閉心跳定時(shí)器
			console.log("創(chuàng)建連接!");
			// 監(jiān)聽是否連接
			uni.onSocketOpen((res) => {
				console.log('連接成功！獲取離線信息');
				sendMsg("1000")
				clearInterval(Time) //關(guān)閉定時(shí)器
				clearInterval(XTime) //關(guān)閉心跳定時(shí)器
				// 5秒發(fā)送一次心跳//后端檢測是否在線
				XTime = setInterval(() => {
					// console.log("心跳");
					sendMsg("2000")
				}, 5000)
			});
		}
	});

	// 監(jiān)聽連接失敗
	uni.onSocketError((err) => {
		console.log('連接失敗，請檢查');
		if (!meClose) {//判斷是否主動關(guān)閉進(jìn)行重新連接
			reconnect()
		}
	})
	// 監(jiān)聽連接關(guān)閉close
	uni.onSocketClose((e) => {
		console.log('連接關(guān)閉！', meClose);
		if (!meClose) {//判斷是否主動關(guān)閉進(jìn)行重新連接
			reconnect()
		}
	})
	// 監(jiān)聽收到信息
	uni.onSocketMessage((res) => {
		let data = JSON.parse(res.data)
		// 接收數(shù)據(jù)后回調(diào)
		console.log('服務(wù)器內(nèi)容:', data);
        // 我存儲數(shù)據(jù)到vuex
		// 全部消息列表
		// store.commit("login/pushList", data)
		// 提醒消息列表 
		// store.commit("login/unshiftMessage", data)
		// 存儲到本地
		// store.commit("login/setvuex")
		// uni.onPushMessage((res) => {
		// 	// 后臺提醒內(nèi)容 需要后端配置，也可以不要
		//if (uni.getStorageSync("uuid") != data.senderId) {
			//let name = data.names ? data.names : "新消息"
			//let text = data.payload.text ? data.payload.text : "你有一條新消息待查看"
			// console.log(name);
			// console.log(text);
			//uni.createPushMessage({
			//	title: name,
			//	content: text,
			//	sound: "system",
			//	icon: "/static/images/logobc.png",
			//	 payload:{
			//	這里地方你可以隨意組合你想要的數(shù)據(jù)，uni.onPushMessage會監(jiān)聽到你組合的數(shù)據(jù)。
			//	 },
		//		success: (res => {
		//			 console.log('成功創(chuàng)建')
		//		}),
		//	})
		//}
		// console.log("收到推送消息：", JSON.parse(res.data)) //監(jiān)聽推送消息
		// })

	});
}
// 重新連接
const reconnect = () => {
	console.log("開始斷線重連?。。。。。。。。。?！");
	// 確保已經(jīng)關(guān)閉后再重新打開
	uni.closeSocket()
	socketTask = '';
	console.log("重新連接中...");
	// console.log(url + token);
	sokcet(url + token)
}
//向后端發(fā)送信息
const sendMsg = (msg) => {
	msg = JSON.stringify(msg)
	// console.log(msg);
	//通過 WebSocket 連接發(fā)送數(shù)據(jù)
	uni.sendSocketMessage({
		data: msg,
		success() {
			// console.log("成功");
		},
		fail() {
			console.log("失敗");
			uni.showLoading({
				title: "加載中..."
			})
			setTimeout(() => {
				uni.hideLoading()
			}, 1000)
			if (!meClose) {
				reconnect()
			}
		},
	});
}
// 手動關(guān)閉連接
const stop = () => {
	// 主動關(guān)閉連接
	meClose = true
	uni.closeSocket({
		success() {
			console.log("手動關(guān)閉成功！");
			clearInterval(Time) //關(guān)閉定時(shí)器
			clearInterval(XTime) //關(guān)閉心跳定時(shí)器
			// 確保已經(jīng)關(guān)閉
			socketTask = null;
		}
	})
}
// 導(dǎo)出方法
export const websocetObj = {
	sokcet, //連接
	stop, //關(guān)閉
	sendMsg //發(fā)送
};

我是用uniapp 的api封裝的 在外面也可以直接用uniapp的api操作

只有在開始調(diào)用連接需要用封裝的方法調(diào)用

在需要使用封裝的方法的頁面?引入js

?? ?import {
?? ??? ?websocetObj
?? ?} from "@/API/websocket.js"

?完善重連

在app.vue的onShow生命周期發(fā)送心跳檢測是否連接(寫在這個(gè)生命周期可以提高連接速度)

// 發(fā)送一次心跳，沒有成功就觸發(fā)重新連接
??websocetObj.sendMsg("2000")

調(diào)用連接方法

//請求連接
?websocetObj.sokcet()

關(guān)閉連接

?// 關(guān)閉連接
??websocetObj.stop()

?發(fā)送消息

sendTextMessage() { //發(fā)送消息
?? ??? ??? ??? ?if (this.content.trim() != '') {
?? ??? ??? ??? ??? ?let date = new Date()
?? ??? ??? ??? ??? ?let jsondata = {
?? ??? ??? ??? ??? ??? ?groups: 0,
?? ??? ??? ??? ??? ??? ?payload: {
?? ??? ??? ??? ??? ??? ??? ?text: this.content,
?? ??? ??? ??? ??? ??? ??? ?tpUrl: "",
?? ??? ??? ??? ??? ??? ??? ?spUrl: ""
?? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ??? ?receiverId: this.frienduuid,
?? ??? ??? ??? ??? ??? ?senderId: this.user.uuid,
?? ??? ??? ??? ??? ??? ?names: this.user.names,
?? ??? ??? ??? ??? ??? ?avatar: this.user.avatar,
?? ??? ??? ??? ??? ??? ?status: "success",
?? ??? ??? ??? ??? ??? ?timestamp: date.getTime(),
?? ??? ??? ??? ??? ??? ?type: "text"
?? ??? ??? ??? ??? ?};

? ? ? ? ? ? ? ? ? ? ?// 使用封裝方法發(fā)送
?? ??? ??? ??? ??? ?// websocetObj.sendMsg(jsondata)

? ? ? ? ? ? ? ? ? ? // 使用uniapp 原生方法發(fā)送(我使用原生方法是因?yàn)橄爰右粋€(gè)消息發(fā)送失敗提醒)
?? ??? ??? ??? ??? ?let msg = JSON.stringify(jsondata);
?? ??? ??? ??? ??? ?uni.sendSocketMessage({
?? ??? ??? ??? ??? ??? ?data: msg,
?? ??? ??? ??? ??? ??? ?success: () => {
?? ??? ??? ??? ??? ??? ??? ?//發(fā)送成功的方法
?? ??? ??? ??? ??? ??? ??? ?console.log("給" + this.title + "消息發(fā)送成功");
?? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ??? ?fail() {
?? ??? ??? ??? ??? ??? ??? ?uni.showToast({
?? ??? ??? ??? ??? ??? ??? ??? ?title: '消息發(fā)送失敗，請檢查網(wǎng)絡(luò)',
?? ??? ??? ??? ??? ??? ??? ??? ?icon: 'none'
?? ??? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ?// 調(diào)用滾動到最下面的方法
?? ??? ??? ??? ??? ?this.scrollToBottom();
?? ??? ??? ??? ??? ?// 清空輸入框
?? ??? ??? ??? ??? ?this.content = "";
?? ??? ??? ??? ?}
?? ??? ??? ?},

?這個(gè)就是斷線重連的過程 自動檢測到服務(wù)器斷線然后自動重新連接，中間報(bào)錯(cuò)是正常的沒有連接到的報(bào)錯(cuò)，直到連接成功獲取離線消息表示連接好了

?封裝思想：

通過uniapp提供的API方法進(jìn)行封裝

斷線重連機(jī)制：

通過發(fā)送心跳檢測是否能夠發(fā)送成功判斷是否連接

?有不理解的地方歡迎私信或者評論問?。?/strong>文章來源地址http://www.zghlxwxcb.cn/news/detail-670987.html

到了這里，關(guān)于uniapp websocket 封裝斷線重連的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！