部署多个Blazor交互式服务器应用出现WebSocket连接失败问题求助

问题根源 #

你遇到的WebSocket连接错误，本质是Blazor的SignalR客户端自动检测WebSocket端点时出现了端口/路径混淆——虽然两个应用在不同端口运行，但客户端可能错误复用了第一个应用的WebSocket端点信息，或者反向代理未正确转发第二个应用的WebSocket流量。而交互功能正常是因为Blazor会自动降级到Server-Sent Events或Long Polling这类备选传输方式。

解决方法 #

1. 硬编码WebSocket/SignalR端点（指定端口）

可以在客户端或服务端强制指定SignalR Hub的完整URL，避免自动检测错误：

• 客户端配置（推荐）：修改应用的_Host.cshtml，禁用Blazor自动启动，手动配置SignalR端点：

  <!-- 禁用自动启动 -->
  <script src="_framework/blazor.server.js" autostart="false"></script>
  <script>
      Blazor.start({
          configureSignalR: function (builder) {
              // 替换为你的域名+第二个应用的端口
              builder.withUrl("wss://xxx.xxx.xx:你的端口/_blazor");
          }
      });
  </script>
  

• 服务端配置：在Program.cs中指定SignalR Hub的URL：

  builder.Services.AddServerSideBlazor()
      .WithHubUrl("/_blazor", options =>
      {
          options.Url = new Uri("wss://xxx.xxx.xx:你的端口/_blazor");
      });
  

2. 配置反向代理（如Nginx）

如果通过Nginx反向代理暴露应用，必须确保每个应用的代理规则正确处理WebSocket升级请求：

server {
    listen 443 ssl;
    server_name xxx.xxx.xx;
    # SSL证书配置省略

    # 第一个应用代理规则
    location /app1 {
        proxy_pass http://localhost:端口1;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $remote_addr;
    }

    # 第二个应用代理规则
    location /app2 {
        proxy_pass http://localhost:端口2;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $remote_addr;
    }
}

通过不同路径区分应用，代理会正确转发WebSocket流量到对应端口。

3. 为每个应用设置独立的SignalR Hub路径

如果不想硬编码端口，可以给两个应用的SignalR Hub设置不同路径，避免端点冲突：

• 第一个应用Program.cs：

  app.MapBlazorHub("/app1-blazor");
  

• 第二个应用Program.cs：

  app.MapBlazorHub("/app2-blazor");
  

然后第二个应用的_Host.cshtml对应修改Hub URL：

<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
    Blazor.start({
        configureSignalR: function (builder) {
            builder.withUrl("/app2-blazor");
        }
    });
</script>

4. 验证防火墙和端口开放

确保Linux服务器防火墙（如ufw）开放了两个应用的端口，客户端能正常访问：

# 开放端口示例
sudo ufw allow 5000/tcp
sudo ufw allow 5001/tcp
sudo ufw reload

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