vue 封装websocket可设置请求头

Vue封装WebSocket时，可以通过设置请求头来实现自定义的需求。

具体实现步骤如下：

1. 在Vue项目中创建一个WebSocket.js文件，封装WebSocket。

2. 在WebSocket.js中，通过new WebSocket(url)创建WebSocket连接，并设置请求头。

3. 在Vue组件中，引入WebSocket.js，并创建WebSocket实例。

代码实现示例：

WebSocket.js文件：

export default class WebSocketClient {
  constructor(url, headers) {
    // 创建WebSocket实例
    this.webSocket = new WebSocket(url);

    // 设置请求头
    for (let key in headers) {
      this.webSocket.setRequestHeader(key, headers[key]);
    }
  }
}

Vue组件：

<template>
  <div>
    <button @click="connect">连接</button>
  </div>
</template>

<script>
import WebSocketClient from './WebSocket.js';

export default {
  name: 'WebSocketTest',
  data() {
    return {
      webSocket: null
    }
  },
  methods: {
    connect() {
      // 创建WebSocket实例
      this.webSocket = new WebSocketClient('ws://localhost:8080', {
        'Authorization': 'Bearer token'
      });
    }
  }
}
</script>

在上面的示例中，我们可以看到，通过设置请求头的方式，可以实现自定义的需求。需要注意的是，不同的后端框架可能对请求头的设置方式有所不同，需要根据具体情况进行设置。