一、TCPSocket.js 封装TCP协议文章来源:https://www.toymoban.com/news/detail-838404.html
class socket {
constructor() {
this.connection = {};
}
// 创建一个TCP实例
establish(monitor) {
this.connection = wx.createTCPSocket();
this.connection.connect({ address: "000.000.0.0", port: 6800 });
}
// 发送消息
connect(message) {
this.connection.onConnect(() => {
this.connection.write(message);
});
}
// 监听端口函数
onMessage(success, failure) {
this.connection.onMessage((res) => {
success(res)
});
this.connection.onError((err) => {
failure(err);
});
}
// 关闭搜索事件
TCPclose() {
setTimeout(() => {
// 3S后,关闭socket
this.connection.close(() => {
console.log("TCP关闭");
});
}, 3000);
}
}
const TCPSocket = new socket();
export default TCPSocket;
二、vue文件中使用TCP文章来源地址https://www.toymoban.com/news/detail-838404.html
<template>
<view class="zai-box">
<view class="container">
<text class="textName">{{ wifiSSID }}</text>
<input type="text" placeholder="请输入WLAN密码" v-model="password" />
</view>
<button
class="loginButton"
:loading="loadingWIfi"
:disabled="JSON.stringify(password.length) < 8 || loadingWIfi"
@click="settiing"
>
{{ loadingWIfi ? "连接中" : "连接" }}
</button>
</view>
</template>
<script>
import TCP from "@/common/util/TCPSocket.js";
export default {
data() {
return {
wifiSSID: "WIFI name",
password: "",
isFirst: true,
wifiCountInterval: null,
wifiCountDown: 0,
loadingWIfi: false,
};
},
onHide() {
this.clearInterval();
},
methods: {
settiing() {
this.loadingWIfi = true;
this.onConfirm();
},
onConfirm() {
this.wifiCountDown = 60;
this.startSMSTimer();
if (this.isFirst) {
// TCP实例创建
// 连接端口
TCP.establish();
this.isFirst = false;
}
// 请求设备上报状态
this.udpsend();
// 开始监听
TCP.onMessage(
(res) => {
if (!res) return;
// 关闭TCP连接
TCP.TCPclose();
console.log(res) // 查看返回数据
},
(err) => {
// debug
console.log(err, "err");
}
);
},
udpsend() {
const msgData = {
event: "network",
data: {
ssid: this.wifiSSID,
password: this.password,
},
};
TCP.connect(JSON.stringify(msgData));
},
startSMSTimer() {
this.wifiCountInterval = setInterval(() => {
this.wifiCountDown--;
if (this.wifiCountDown <= 0) {
clearInterval(this.wifiCountInterval);
this.wifiCountInterval = null;
// 响应超过60秒后的操作
// ........
}
}, 1000);
},
clearInterval() {
if (this.wifiCountInterval) {
clearInterval(this.wifiCountInterval);
this.wifiCountInterval = null;
}
},
},
};
</script>
<style scoped>
.zai-box {
padding: 0;
margin: 0;
}
.container {
padding: 30rpx;
margin: 0 0 20rpx;
font-size: 28rpx;
color: #20212b;
background-color: #fff;
text-align: left;
font-weight: 400;
}
.loginButton {
font-size: 36rpx;
width: 690rpx;
color: #fff;
background-color: #00a0e9;
border-radius: 44rpx;
margin: 60rpx auto 0;
border: none;
}
.loginButton[disabled] {
color: #fff;
background-color: #dfdfdf;
}
button::after {
border: none;
}
.textName {
display: block;
font-size: 28rpx;
font-weight: 500;
color: #20212b;
margin-bottom: 30rpx;
}
</style>
到了这里,关于uniapp 小程序AP配网的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!