<script>
export default {
data() {
return {
websock: null,
}
},
methods: {
threadPoxi(){ //
//
const agentData = "mymessage";
//ws
if (this.websock.readyState === this.websock.OPEN) {
this.websocketsend(agentData)
}
// 300
else if (this.websock.readyState === this.websock.CONNECTING) {
let that = this;//this
setTimeout(function () {
that.websocketsend(agentData)
}, 300);
}
// 500
else {
this.initWebSocket();
let that = this;//this
setTimeout(function () {
that.websocketsend(agentData)
}, 500);
}
},
initWebSocket(){ //weosocket
//ws
const wsuri = process.env.WS_API + "/websocket/threadsocket";
this.websock = new WebSocket(wsuri);
this.websock.onmessage = this.websocketonmessage;
this.websock.onclose = this.websocketclose;
},
websocketonmessage(e){ //
const redata = JSON.parse(e.data);
console.log(redata.value);
},
websocketsend(agentData){//
this.websock.send(agentData);
},
websocketclose(e){ //
console.log("connection closed (" + e.code + ")");
}
},
created(){
this.initWebSocket()
}
}
</script>
I saw this article on the Internet about how to use websocket, in vue to use his code. He was able to create a websocket service successfully, but he often reported the following error when refreshing the page
Uncaught DOMException: Failed to execute "send" on "WebSocket": Still in CONNECTING state.
I guess that the readyState is still not open when this section of setTimeout () is executed. I try to set the time a little longer as if the probability of occurrence is much lower, but this does not seem to be a good solution
// 300
else if (this.websock.readyState === this.websock.CONNECTING) {
let that = this;//this
setTimeout(function () {
that.websocketsend(agentData)
}, 300);
}
// 500
else {
this.initWebSocket();
let that = this;//this
setTimeout(function () {
that.websocketsend(agentData)
}, 500);
}