vue websocket怎么添加表明身份

在Vue中使用WebSocket时，可以在连接WebSocket时添加一个身份验证的参数。例如，可以添加一个名为“token”的参数，将其设置为用户的身份验证令牌。在服务器端接收WebSocket连接时，可以验证令牌是否有效，以确定连接的用户身份。

以下是一个简单的Vue组件，演示如何连接WebSocket并添加身份验证参数：

<template>
  <div>
    <p v-if="connected">WebSocket已连接</p>
    <p v-else>WebSocket未连接</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      connected: false,
      socket: null,
      token: 'my-auth-token' // 身份验证令牌
    }
  },
  mounted() {
    this.connectWebSocket()
  },
  methods: {
    connectWebSocket() {
      // 添加身份验证参数
      const url = `ws://example.com/ws?token=${this.token}`
      this.socket = new WebSocket(url)

      this.socket.onopen = () => {
        this.connected = true
        console.log('WebSocket已连接')
      }

      this.socket.onclose = () => {
        this.connected = false
        console.log('WebSocket已关闭')
      }

      this.socket.onerror = (error) => {
        console.error('WebSocket发生错误:', error)
      }
    }
  }
}
</script>
``