之前百度看了很多种 还有uniapp自带的方法
个人觉得uniapp的方法还是比较简单,上代码
app.vue文件
data() {
return {
show: false, //投诉弹窗
timeout: 5000, //
timeoutObj: null,
tokenUser: "",
};
},
created() {
//我这里是登陆之后根据token判断连接websocket
this.tokenUser = uni.getStorageSync("token");
if (this.tokenUser !== "") {
this.connectWebsocket();
}
},
methods: {
//wx连接
connectWebsocket() {
uni.showLoading({
title: "connect...",
});
if ("WebSocket" in window) {
console.log("您的浏览器支持 WebSocket!");
let socketUrl = uni.getStorageSync("socketUrl");
//创建一个 WebSocket 连接
uni.connectSocket({
url: `${socketUrl}?token=${this.tokenUser}`,
success: (res) => {
console.log("连接成功 connectSocket=", res);
},
fail(err) {
console.log("连接失败 connectSocket=", err);
},
});
//监听WebSocket连接打开事件。
uni.onSocketOpen((res) => {
console.log("连接成功");
uni.hideLoading();
});
//监听WebSocket错误 连接出错加了定时器重连
uni.onSocketError((res) => {
console.log("WebSocket连接打开失败,请检查!");
setTimeout(() => {
this.connectWebsocket();
}, 3000);
});
this.onSocketMessage(); // 监听服务器返回的消息
} else {
// 浏览器不支持 WebSocket
console.log("您的浏览器不支持 WebSocket!");
}
},
//监听服务器返回的消息
onSocketMessage() {
// 消息
this.timeout = 5000;
this.timeoutObj = null;
//监听WebSocket接受到服务器的消息事件
uni.onSocketMessage((res) => {
uni.hideLoading();
this.getSocketMsg(res.data); // 监听到有新服务器消息
});
},
//监听到有新服务器消息处理
getSocketMsg(reData) {
//我的处理消息代码
//接收的参数发送给需要的页面处理 这里可以用vuex,之前没有想到使用vuex很简单,有空再优化一下
this.$bus.$emit("wxResData", reData);
this.reset(); // 检测心跳reset,防止长时间连接导致连接关闭
},
//检测心跳重置
reset() {
clearInterval(this.timeoutObj);
this.start(); // 启动心跳
},
//心跳包
start() {
let jsonData = JSON.stringify({
action: "ping",
time: currentTime(),
});
console.log("开始start心跳包3s后发信息");
this.timeoutObj && clearTimeout(this.timeoutObj);
this.timeoutObj = setInterval(() => {
uni.sendSocketMessage({
data: jsonData,
success: (res) => {
console.log("连接中....", res);
},
fail: (err) => {
console.log("连接失败打印....");
clearTimeout(this.timeoutObj);
this.tokenUser = uni.getStorageSync("token");
if (this.tokenUser !== "") {
this.connectWebsocket();
}
},
});
}, this.timeout);
},
},
版权声明:本文为qq_40796623原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。