vue单页面 websocket连接

<template>
  <div>
    <!-- 你的页面内容 -->
    <button @click="sendMessage">发送消息</button>
    <input type="text" @change="sendMessage" v-model="inputValue">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      socket: null, // WebSocket连接实例
      reconnectAttempts: 0, // 重连尝试次数
      reconnectInterval: 1000, // 重连间隔时间，单位毫秒
    };
  },
  created() {
    this.initWebSocket();
  },
  methods: {
    initWebSocket() {
      const wsUrl = "ws://127.0.0.1:7788"; // WebSocket服务器地址
      this.socket = new WebSocket(wsUrl);

      this.socket.onopen = () => {
        console.log("WebSocket connected");
        this.reconnectAttempts = 0; // 重置重连尝试次数
      };

      this.socket.onmessage = (event) => {
        console.log("Received message:", event.data);
        // 处理接收到的消息
      };

      this.socket.onclose = () => {
        console.log("WebSocket disconnected");
        this.handleReconnect();
       //连接失败
      };
   
      this.socket.onerror = (error) => {
        console.error("WebSocket error:", error);
       //连接异常
        this.handleReconnect();
      };
    },
   //从新连接
    handleReconnect() {
      if (this.reconnectAttempts < 5) { // 最多重连尝试次数
        console.log(`Attempting to reconnect... (Attempt ${this.reconnectAttempts + 1})`);
        setTimeout(() => {
          this.initWebSocket();
          this.reconnectAttempts++;
        }, this.reconnectInterval);
      } else {
        console.log("Reconnection attempts exceeded limit, stopping reconnection attempts");
      }
    },
    sendMessage() {
      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        this.socket.send(this.inputValue);
      } else {
        console.error("WebSocket is not connected or closed");
      }
    },
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.close(); // 页面销毁前关闭WebSocket连接
    }
  },
};
</script>