uni-app正确连接Websocket 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连接【整个页⾯随时使⽤】
},
data() {
return {
socketTask: null,
// 确保websocket是打开状态
is_open_socket: false
}
},
// 关闭websocket【必须在实例销毁之前关闭,否则会是underfined错误】
beforeDestroy() {
this.closeSocket();
},
methods: {
// 进⼊这个页⾯的时候创建websocket连接【整个页⾯随时使⽤】
connectSocketInit() {
// 创建⼀个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】 this.socketTask = tSocket({
url: "ws://119.28.180.110:9099/echo", //假地址 换成⾃⼰的服务器的地址
websocket和socketsuccess(data) {
console.log("websocket连接成功");
},
});
// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
Open((res) => {
console.log("WebSocket连接正常打开中...!");
this.is_open_socket = true;
// 注:只有连接正常打开中 ,才能正常成功发送消息
this.socketTask.send({
data: "uni-app发送⼀条消息",
async success() {
console.log("消息发送成功");
},
});
// 注:只有连接正常打开中 ,才能正常收到消息
Message((res) => {
console.log("收到服务器内容:" + res.data);
});
})
// 这⾥仅是事件监听【如果socket关闭了会执⾏】
Close(() => {
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>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论