websocket用法

WebSocket 是一种在客户端和服务器之间建立持久化连接的协议，允许双向通信。它适用于实时应用程序，如聊天应用、在线游戏或实时数据流。以下是 WebSocket 在 Vue.js 中的基本用法：

1. 建立 WebSocket 连接

首先，创建 WebSocket 连接：

const socket = new WebSocket('ws://your-server-url'); // 替换为你的 WebSocket 服务地址

2. 监听连接成功

监听 WebSocket 连接成功事件：

socket.onopen = function(event) {
  console.log('WebSocket connection established');
};

3. 接收消息

监听从服务器发送来的消息：

socket.onmessage = function(event) {
  console.log('Message from server:', event.data);
};

4. 发送消息

向服务器发送消息：

socket.send(JSON.stringify({ type: 'greeting', message: 'Hello, Server!' }));

5. 监听连接关闭

监听连接关闭事件：

socket.onclose = function(event) {
  console.log('WebSocket connection closed', event);
};

6. 处理错误

监听 WebSocket 错误事件：

socket.onerror = function(error) {
  console.error('WebSocket Error:', error);
};

7. 关闭 WebSocket 连接

当不再需要 WebSocket 连接时，可以手动关闭连接：

socket.close();

在 Vue 组件中使用 WebSocket

通常，你会在 Vue 组件中创建 WebSocket 连接，确保在组件销毁时关闭连接：

export default {
  data() {
    return {
      socket: null,
      message: ''
    };
  },
  mounted() {
    this.socket = new WebSocket('ws://your-server-url');
    
    this.socket.onopen = () => {
      console.log('WebSocket connection established');
    };

    this.socket.onmessage = (event) => {
      this.message = event.data; // 处理来自服务器的消息
    };

    this.socket.onerror = (error) => {
      console.error('WebSocket Error:', error);
    };

    this.socket.onclose = () => {
      console.log('WebSocket connection closed');
    };
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.close(); // 组件销毁时关闭连接
    }
  }
};

这样，你就可以在 Vue 组件中使用 WebSocket 进行实时通信。

8.实例：

//window.location.protocol 来判断当前页面是否使用 HTTPS 协议：
let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';  //判断是系统是哪个访问
connectWebSocket() {
      let self = this;

    // 获取当前页面的主机和端口console.log(window.location.host); // 输出类似 'www.example.com:8080'
      const websocketUrl = `ws://${location.host}/audioWebSocket/ws/data`;

      self.websocket = new WebSocket(websocketUrl);

      // 心跳检测定时器
      let heartbeatInterval = null;

      self.websocket.onopen = () => {
        console.log('WebSocket 连接已打开');
        // 连接成功后开始心跳检测
        heartbeatInterval = setInterval(() => {
          if (self.websocket.readyState === WebSocket.OPEN) {
            self.websocket.send(JSON.stringify({ type: 'heartbeat' }));
          }
        }, 30000); // 每30秒发送一次心跳消息

        // 可以在这里添加其他连接成功后的逻辑
      };

      self.websocket.onmessage = (event) => {
        let result = JSON.parse(event.data);
        if (result.sessionId) {
          self.sessionId = result.sessionId;
          console.log(self.sessionId, 'WebSocket 连接已打开', this.sessionId);
        } else {
          let mimeType = result.type + '/' + result.fileType;
          let base64Image = '';

          switch (this.fileType) {
            case 'video':
            case 'audio':
            case 'text':
              base64Image = '/navy' + result.fileUrl;
              break;
            default:
              base64Image = '/navy' + result.content;
              break;
          }

          let exceed = '';
          console.log('up33',this.uploadPageList)
          this.uploadPageList.forEach((item) => {
            if (item.uid == result.id) {
              this.ids.push(item.uid);
              item = Object.assign(item, result);
              item.check = false;
              item.scanning = false;
              item.isIdenty = true; // 识别完成，显示识别结果
              item.imgSrc = base64Image;
              item.time = getNowDate(result.createTime);
              item.reliability = (Number(item.reliability) * 100).toFixed(2);
              item.res = '查看报告';
              item.activ = false;
              item.raw = item.raw
              exceed = item;
            }
          });

          this.getScanInfo(this.ids, exceed);
          this.uploadList = JSON.parse(JSON.stringify(this.uploadList));
        }
      };

      self.websocket.onerror = (e) => {
        console.log('连接错误', e);
        self.reconnectWebSocket();
      };

      self.websocket.onclose = () => {
        console.log('WebSocket 连接已关闭');
        self.reconnectWebSocket();
      };

      // 自动重连函数
      self.reconnectWebSocket = () => {
        clearInterval(heartbeatInterval); // 清除心跳检测定时器
        setTimeout(() => {
          console.log('尝试重新连接 WebSocket...');
          self.connectWebSocket(); // 重新连接
        }, 3000); // 3秒后重试
      };
    },

beforeDestroy() {
    Bus.$off("changeType")
    if (this.websocket) {
      this.websocket.close();
    }
    clearInterval(heartbeatInterval);
  },