WebSocket 对象的 readyState 属性表示当前 WebSocket 的连接状态,它可能具有以下几种状态:
CONNECTING (0):表示正在建立连接。WebSocket 对象被创建之后,但连接还没有建立。
OPEN (1):表示连接已经建立并且可以进行通信。连接成功建立后,WebSocket 对象的 readyState 会变为 OPEN。
CLOSING (2):表示连接正在关闭。当客户端或服务器发起关闭连接的操作时,WebSocket 对象的 readyState 会变为 CLOSING。
CLOSED (3):表示连接已经关闭或者连接不能打开。当连接关闭后,WebSocket 对象的 readyState 会变为 CLOSED。
这些状态反映了 WebSocket 连接的整个生命周期,通过监控 readyState 的变化,可以很好地控制连接的建立、通信和关闭过程。在处理 WebSocket 连接时,根据不同的 readyState 状态进行相应的逻辑处理,以确保连接的稳定性和可靠性。
用这个插件vue-native-websocket 判断小助手有没有链接成功,正在链接,以及失败
mounted (){
setTimeout(()=>{
console.log('this.$socket.readyState: ', this.$socket.readyState);
if(this.$socket.readyState == 0){
this.$Notice.success({
title: '提示',
desc: '小助手正在链接,请稍后再试!'
})
}else if(this.$socket.readyState == 1){
this.$Notice.success({
title: '提示',
desc: '小助手已连接成功!'
})
}else{
this.$Notice.error({
title: '提示',
desc: '小助手已已断开链接!'
})
}
},2000)
},
安装完插件 vue-native-websocket
created() {
import Vue from 'vue';
import VueNativeSock from 'vue-native-websocket';
// 配置第一个WebSocket连接
// Vue.use(VueNativeSock, 'ws://127.0.0.1:12300/camera', {
Vue.use(VueNativeSock, 'ws://192.168.203.68:12300/camera', {
reconnection: true, //当 WebSocket 连接意外断开时,设置为 true 时表示允许自动重新连接。如果设置为 false,则连接断开后将不会尝试重新连接。
reconnectionAttempts: 5, //表示在放弃重新连接之前尝试重新连接的次数。例如,设置为 5 表示在尝试连接失败后,最多会尝试 5 次重新连接。
reconnectionDelay: 3000 //表示两次重新连接尝试之间的延迟时间(以毫秒为单位)。例如,设置为 3000 表示在每次重新连接尝试之间会等待 3 秒。
});
// 监听第一个WebSocket连接的消息
this.$socket.onmessage = (msg) => {
console.log('Received message from login: ' + msg.data);
console.log('222',this.$socket)
};
this.$socket.onclose = (event) => {
this.connectionError = 'WebSocket连接已关闭';
};
this.$socket.onerror = (error) => {
this.connectionError = 'WebSocket连接发生错误';
};
},
发送
// 发送消息到第一个WebSocket连接
sendMessage(type,message) {
this.$socket.send(JSON.stringify({type:type,content:message}));
},
调用send方法
在业务代码中调用this.sendMessage('1',obj)