2024-03-29 vue-native-websocket

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)

2024-03-29 vue-native-websocket

推荐阅读更多精彩内容