Autodesk Viewer Proxy搭配streamingV2的推荐用法及问题咨询

核心问题拆解 #

你遇到的两个问题本质是原代理方案未适配StreamingV2的WebSocket依赖：

• 原教程仅处理HTTP请求，未实现WebSocket的转发逻辑，导致浏览器与APS的WebSocket连接握手失败后直接关闭，拖慢模型加载
• StreamingV2的WebSocket初始握手消息需要携带Bearer令牌，但原代理只在HTTP握手阶段处理授权，没修改WebSocket帧内容，导致令牌为空

推荐的NodeJS代理实现步骤 #

1. 扩展代理以支持WebSocket转发

StreamingV2依赖WebSocket传输模型数据流，必须在代理中添加WebSocket转发逻辑：

• 监听HTTP服务器的upgrade事件，识别WebSocket请求
• 建立客户端与APS StreamingV2端点的WebSocket连接，双向转发消息

2. 修复WebSocket初始消息的令牌填充

StreamingV2的初始WebSocket消息（handshake类型）需要携带有效Bearer令牌，代理需拦截并修改该消息：

• 解析客户端发送的第一个WebSocket消息，检查是否为握手请求
• 若消息中无authorization字段，填充为Bearer {你的访问令牌}后再转发给APS
• 后续消息直接转发，不干扰实时数据流

3. 配置Viewer指向代理的WebSocket端点

在Viewer初始化时，指定自定义的streamingEndpoint，让WebSocket请求指向代理地址，避免直接请求APS服务器。

关键代码示例 #

代理服务器核心逻辑

const http = require('http');
const WebSocket = require('ws');
const url = require('url');
const { createProxyMiddleware } = require('http-proxy-middleware');

// 原有HTTP代理逻辑（处理模型、静态资源等）
const httpProxy = createProxyMiddleware({
  target: 'https://developer.api.autodesk.com',
  changeOrigin: true,
  headers: {
    'Authorization': `Bearer ${YOUR_ACCESS_TOKEN}`
  }
});

const server = http.createServer((req, res) => {
  httpProxy(req, res);
});

// WebSocket代理逻辑
const wss = new WebSocket.Server({ noServer: true });

server.on('upgrade', (request, socket, head) => {
  const pathname = url.parse(request.url).pathname;
  if (pathname === '/streaming-ws') {
    wss.handleUpgrade(request, socket, head, (ws) => {
      wss.emit('connection', ws, request);
    });
  }
});

wss.on('connection', (clientWs) => {
  // 连接到APS StreamingV2端点
  const apsWs = new WebSocket('wss://streaming.autodesk.com/v2');

  // 拦截并修改客户端初始握手消息
  let isFirstMsg = true;
  clientWs.on('message', (data) => {
    if (isFirstMsg) {
      try {
        const msg = JSON.parse(data);
        if (msg.type === 'handshake') {
          msg.authorization = `Bearer ${YOUR_ACCESS_TOKEN}`;
          apsWs.send(JSON.stringify(msg));
        } else {
          apsWs.send(data);
        }
      } catch (err) {
        apsWs.send(data);
      }
      isFirstMsg = false;
    } else {
      apsWs.send(data);
    }
  });

  // 转发APS的响应到客户端
  apsWs.on('message', (data) => {
    clientWs.send(data);
  });

  // 同步连接关闭状态
  clientWs.on('close', () => apsWs.close());
  apsWs.on('close', () => clientWs.close());
});

server.listen(3000);

Viewer初始化配置

Autodesk.Viewing.Initializer({
  env: 'AutodeskProduction',
  getAccessToken: (callback) => {
    // 令牌由代理填充，此处返回空即可
    callback('', '');
  },
  streamingEndpoint: 'ws://localhost:3000/streaming-ws'
}, () => {
  // 初始化Viewer实例
  const viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('viewer'));
  viewer.start();
  // 加载模型等后续操作
});

额外注意事项 #

• 确保代理服务器配置了正确的CORS头，允许WebSocket连接跨域
• 实现令牌自动刷新逻辑，避免令牌过期导致WebSocket连接中断
• 用浏览器开发者工具的Network > WS标签排查连接状态和消息内容，验证令牌是否正确填充

内容的提问来源于stack exchange，提问作者vd334