Next.js(TypeScript)客户端连接Azure SignalR WSS收不到目标消息求助

核心排查方向 #

1. 确认SignalR协议适配问题 #

Azure SignalR基于SignalR专有协议运行，直接用原生WebSocket连接时，若未完成SignalR的握手流程、未遵循其消息格式，服务端不会将你纳入业务消息推送范围。参考实现大概率使用了官方的@microsoft/signalr客户端库，而非原生WebSocket。

• 替换为官方客户端尝试：

  import * as signalR from "@microsoft/signalr";
  
  const connection = new signalR.HubConnectionBuilder()
    .withUrl(wsUrl, {
      skipNegotiation: true,
      transport: signalR.HttpTransportType.WebSockets,
    })
    .build();
  
  // 替换为实际业务消息的方法名
  connection.on("targetBusinessMethod", (data) => {
    console.log("收到业务消息:", data);
  });
  
  connection.start()
    .then(() => console.log("SignalR连接成功"))
    .catch(err => console.error("连接失败:", err));
  

2. 排查Token与会话的绑定关系 #

同一账号但不同Token会被服务端视为独立会话，若业务消息仅推送给特定会话（比如参考实现的会话），则新Token对应的会话无法收到消息。

• 解码对比两个Token的Claim：用JWT解码工具查看参考实现和当前使用的Token，重点检查sid（会话ID）、nameidentifier等用户/会话绑定字段的差异。
• 确认Hub路径一致：Azure SignalR的URL需包含正确的Hub名称，确保你的wsUrl与参考实现的Hub路径完全匹配。

3. 修正WebSocket头信息 #

手动指定部分浏览器自动生成的头字段（如Sec-WebSocket-Key、Connection、Upgrade）可能导致服务端处理异常，建议只保留必要的自定义头：

const websocketInstance = new WebSocket(wsUrl, {
  headers: {
    Host: "******.signalr.net",
    "Accept-Language": "en-GB,en;q=0.5",
    "Accept-Encoding": "gzip, deflate, br, zstd",
    Origin: "********.com",
    "Sec-WebSocket-Extensions": "permessage-deflate",
    "Sec-Fetch-Dest": "empty",
    "Sec-Fetch-Mode": "websocket",
    "Sec-Fetch-Site": "cross-site",
    Pragma: "no-cache",
    "Cache-Control": "no-cache",
  }
});

4. 解析SignalR消息格式 #

原生WebSocket收到的SignalR消息是结构化的JSON帧，需解析后才能提取业务内容：

websocketInstance.on("message", async (data) => {
  const textData = data instanceof Blob ? await data.text() : data.toString();
  try {
    const signalRFrame = JSON.parse(textData);
    // SignalR消息格式通常为 [消息ID, 目标方法名, 参数数组, ...]
    console.log("解析后的SignalR帧:", signalRFrame);
    // 若存在业务方法名，可针对性处理
    if (signalRFrame[1] === "targetBusinessMethod") {
      console.log("业务消息内容:", signalRFrame[2]);
    }
  } catch (e) {
    console.log("非结构化消息:", textData);
  }
});

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