Vue.js中如何点击按钮后再建立WebSocket连接？

Got it, let's get this sorted out! The key here is to move your WebSocket initialization logic out of the global main.js and into a method in your HelloWorld.vue component that only runs when the button is clicked. Here's a working implementation with explanations:

Full HelloWorld.vue Component Code #

<template>
  <div class="hello">
    <button 
      @click="connectWebSocket" 
      :disabled="isConnected"
    >
      {{ isConnected ? 'Connected' : 'Connect to WebSocket' }}
    </button>
    <div v-if="isConnected" class="connection-status">
      Connection active!
    </div>
    <div class="messages" v-if="messages.length">
      <h3>Received Messages:</h3>
      <ul>
        <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      wsInstance: null, // Store WebSocket instance for later use
      isConnected: false, // Track connection status
      messages: [] // Keep track of received messages
    }
  },
  methods: {
    connectWebSocket() {
      // Prevent duplicate connections
      if (this.isConnected || this.wsInstance) return

      // Replace with your actual WebSocket endpoint
      const wsUrl = 'ws://your-websocket-server-url'
      this.wsInstance = new WebSocket(wsUrl)

      // Handle connection open
      this.wsInstance.onopen = () => {
        console.log('WebSocket connected successfully')
        this.isConnected = true
      }

      // Handle incoming messages
      this.wsInstance.onmessage = (event) => {
        console.log('Received message:', event.data)
        this.messages.push(event.data)
      }

      // Handle connection errors
      this.wsInstance.onerror = (error) => {
        console.error('WebSocket error:', error)
        this.cleanupConnection()
      }

      // Handle connection close
      this.wsInstance.onclose = () => {
        console.log('WebSocket disconnected')
        this.cleanupConnection()
      }
    },
    cleanupConnection() {
      this.isConnected = false
      this.wsInstance = null
      // Optional: Clear messages if needed
      // this.messages = []
    },
    // Optional: Add a method to manually disconnect
    disconnectWebSocket() {
      if (this.wsInstance) {
        this.wsInstance.close()
      }
    }
  },
  // Clean up connection when component is destroyed
  beforeUnmount() {
    this.disconnectWebSocket()
  }
}
</script>

<style scoped>
.hello {
  padding: 2rem;
}
button {
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.connection-status {
  margin-top: 1rem;
  color: green;
}
.messages {
  margin-top: 1.5rem;
}
</style>

Key Points to Note: #

• No Automatic Initialization: We don't initialize the WebSocket in created or mounted hooks—instead, it's triggered only when the button is clicked via the connectWebSocket method.
• Track Connection State: The isConnected flag disables the button once connected to prevent duplicate connection attempts, and gives clear visual feedback to the user.
• Store the WebSocket Instance: Keeping wsInstance in data lets you interact with the connection later (send messages, disconnect manually, etc.).
• Error & Cleanup Handling: We've added cleanupConnection to reset state when the connection closes or errors out, and we clean up the connection when the component is unmounted to avoid memory leaks.
• Message Tracking: The messages array shows how you can handle incoming data once connected—adjust this based on your app's specific needs.

If you were running into issues before, it might have been because you were initializing the WebSocket outside of a method, or not properly tracking the instance/connection state. This implementation should fix those problems!

内容的提问来源于stack exchange，提问作者Nicolas Guérinet