uni-app框架websocket测试发现：【APP端无法点击返回上一个页面关闭websoket连接】
解决方案 ：前端代码如下
<template>
<view class="websockets">
<button type="primary" @tap="clickRequest">点击发送请求</button>
<button type="primary" @tap="leave">离开页面</button>
</view>
</template>
<script>
export default {
onLoad() {
// 进入这个页面的时候创建websocket连接【整个页面随时使用】
this.connectSocketInit();
},
data() {
return {
socketTask: null,
// 确保websocket是打开状态
is_open_socket: false
}
},
// 关闭websocket【必须在实例销毁之前关闭,否则会是underfined错误】
beforeDestroy() {
this.closeSocket();
},
methods: {
// 进入这个页面的时候创建websocket连接【整个页面随时使用】
connectSocketInit() {
// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
this.socketTask = uni.connectSocket({
url: "ws://119.28.180.110:9099/echo", //假地址 换成自己的服务器的地址
success(data) {
console.log("websocket连接成功");
},
});
// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
this.socketTask.onOpen((res) => {
console.log("WebSocket连接正常打开中...！");
this.is_open_socket = true;
// 注：只有连接正常打开中 ，才能正常成功发送消息
this.socketTask.send({
data: "uni-app发送一条消息",
async success() {
console.log("消息发送成功");
},
});
// 注：只有连接正常打开中 ，才能正常收到消息
this.socketTask.onMessage((res) => {
console.log("收到服务器内容：" + res.data);
});
})
// 这里仅是事件监听【如果socket关闭了会执行】
this.socketTask.onClose(() => {
console.log("已经被关闭了")
})
},
// 关闭websocket【离开这个页面的时候执行关闭】
closeSocket() {
this.socketTask.close({
success(res) {
this.is_open_socket = false;
console.log("关闭成功", res)
},
fail(err) {
console.log("关闭失败", err)
}
})
},
clickRequest() {
if (this.is_open_socket) {
// websocket的服务器的原理是:发送一次消息,同时返回一组数据【否则服务器会进去死循环崩溃】
this.socketTask.send({
data: "请求一次发送一次message",
async success() {
console.log("消息发送成功");
},
});
}
},
}
}
</script>
