ASP.NET Core 7中WebSocket连接频繁关闭问题排查求助

1. 直接打开HTML文件的核心限制 #

直接双击本地HTML文件（使用file://协议）时，浏览器会因跨域安全策略拦截WebSocket请求——WebSocket使用ws:///wss://协议，与file://属于不同源，必然触发连接失败。

解决方式：

• 将HTML文件放入ASP.NET Core项目的wwwroot目录，由Web服务器托管静态文件
• 在Program.cs中添加静态文件中间件（注意顺序要在路由配置之前）：

  var app = builder.Build();
  app.UseWebSockets();
  app.UseStaticFiles(); // 启用静态文件托管
  app.UseRouting();
  app.UseAuthorization();
  app.MapControllers();
  app.Run();
  

• 启动项目后，通过http://localhost:<端口>/your-page.html访问页面

2. HTML文件路径校验 #

若已放入wwwroot仍无法访问：

• 确认文件层级，比如wwwroot/ws-demo.html对应的访问路径是http://localhost:5000/ws-demo.html
• 检查Program.cs是否未对静态文件添加额外路径限制（如自定义文件目录）

3. WebSocket后端配置检查 #

• 确保Program.cs中UseWebSockets()中间件顺序正确：必须在UseRouting()和MapControllers()之前
• 验证控制器端点路由与前端连接地址匹配，比如控制器路由为[Route("api/quote/ws")]，前端连接地址应为ws://localhost:<端口>/api/quote/ws
• 检查控制器内WebSocket逻辑是否存在提前关闭连接的问题，正确示例：

  [ApiController]
  [Route("api/[controller]")]
  public class QuoteController : ControllerBase
  {
      [HttpGet("ws")]
      public async Task HandleWebSocket()
      {
          if (!HttpContext.WebSockets.IsWebSocketRequest)
          {
              HttpContext.Response.StatusCode = StatusCodes.Status400BadRequest;
              return;
          }
  
          using var webSocket = await HttpContext.WebSockets.AcceptWebSocketAsync();
          var buffer = new byte[1024 * 4];
          var random = new Random();
  
          try
          {
              while (webSocket.State == WebSocketState.Open)
              {
                  // 模拟发送x、y数值
                  var payload = JsonSerializer.Serialize(new { x = random.Next(100), y = random.Next(100) });
                  var bytes = Encoding.UTF8.GetBytes(payload);
                  await webSocket.SendAsync(
                      new ArraySegment<byte>(bytes),
                      WebSocketMessageType.Text,
                      endOfMessage: true,
                      CancellationToken.None);
                  await Task.Delay(1000);
              }
          }
          catch (Exception ex)
          {
              Console.WriteLine($"WebSocket异常: {ex.Message}");
          }
          finally
          {
              if (webSocket.State != WebSocketState.Closed)
              {
                  await webSocket.CloseAsync(WebSocketCloseStatus.NormalClosure, "连接关闭", CancellationToken.None);
              }
          }
      }
  }
  

4. 前端连接代码校验 #

确保前端地址与后端一致，并添加错误日志便于排查：

<div>X值: <span id="x-val"></span></div>
<div>Y值: <span id="y-val"></span></div>

<script>
    // 替换为实际端口和路由
    const ws = new WebSocket('ws://localhost:5000/api/quote/ws');
    
    ws.onopen = () => console.log('WebSocket连接成功');
    ws.onmessage = (event) => {
        const data = JSON.parse(event.data);
        document.getElementById('x-val').textContent = data.x;
        document.getElementById('y-val').textContent = data.y;
    };
    ws.onerror = (err) => console.error('WebSocket错误:', err);
    ws.onclose = (event) => console.log('连接关闭，状态码:', event.code, '原因:', event.reason);
</script>

• 若项目启用HTTPS，需将地址改为wss://localhost:<端口>/api/quote/ws
• 确认端口号与launchSettings.json中applicationUrl配置一致

5. 快速验证后端可用性 #

用命令行工具wscat直接连接后端端点，排查是否为前端问题：

wscat -c ws://localhost:5000/api/quote/ws

若能持续收到x、y数值，说明后端正常，问题集中在前端访问方式或代码。

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