websocket vue添加请求头

### 在 Vue 中通过 WebSocket 添加请求头

由于标准 `WebSocket` API 不支持直接设置 HTTP 请求头，因此无法在创建 WebSocket 实例时传递自定义头部信息。不过可以通过以下几种方式间接实现这一需求：

#### 方法一：URL 参数携带身份验证信息或其他必要数据
可以在建立连接的 URL 中附加查询参数来传输必要的认证令牌或其它配置项。

let token = "your-auth-token";
let url = `${config.wsUrl}?token=${encodeURIComponent(token)}`;
this.ws = new WebSocket(url);

这种方法适用于简单的场景，在握手阶段能够被服务器解析并处理这些参数[^1]。

#### 方法二：利用 Subprotocol 或 STOMP 协议扩展功能
如果应用允许更复杂的交互模式，则可以选择基于更高层次的消息协议如STOMP (Simple Text Oriented Messaging Protocol)，它通常配合 SockJS 库一起工作，并且提供了更好的灵活性用于发送订阅命令以及管理会话状态等操作。

安装依赖库：

npm install --save sockjs-client stompjs

初始化客户端实例并向服务器发起连接请求的同时附带所需的身份验证凭证或者其他元数据作为心跳帧的一部分发送给服务端进行校验:

import Stomp from 'stompjs';
import SockJS from 'sockjs-client';

const socket = new SockJS('/ws-endpoint');
const client = Stomp.over(socket);

client.connect({}, function(frame){
  console.log('Connected: ' + frame);
  
  // 发送带有 header 的消息到指定目的地
  client.send("/app/hello", {"Authorization": "Bearer your_token_here"}, JSON.stringify({name:"test"}));
});

这种方式不仅解决了添加请求头的需求，还增强了应用程序之间的通信能力[^3]。

#### 方法三：借助第三方库增强原生 WebSocket 功能
对于某些特定情况下可能需要更加灵活的方式来定制化 WebSocket 行为，这时可以考虑采用一些成熟的开源项目比如 `websocket-subprotocols` 来帮助完成这项任务。这类工具往往提供了一套完整的解决方案，使得开发者能够在不改变现有架构的前提下轻松集成高级特性。

需要注意的是，无论采取哪种策略都应确保前后端之间就所使用的机制达成一致，以便正确无误地建立起安全可靠的实时通讯通道[^4]。