Why is the SignalR client(@microsoft/signalr) seems like trying to connect to the root URL instead of only what I supplied?

[eSPiYa]

My set-up is both the angular app(no .NET) and my ASP.NET Core(.NET 8.0) Web API are behind nginx which serves as reverse proxy. I mapped the SignalR hubs in /hub/ in Nginx.

In the Angular side, I only have one service for this

import { Injectable } from '@angular/core';
import * as signalR from '@microsoft/signalr';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class AppSignalRService {
  private hubConnection: signalR.HubConnection;

  constructor() {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .withUrl('/hub/realtimehub') // SignalR hub URL
      .build();
  }

  startConnection(): Observable<void> {
    return new Observable<void>((observer) => {
      this.hubConnection
        .start()
        .then(() => {
          console.log('Connection established with SignalR hub');
          observer.next();
          observer.complete();
        })
        .catch((error: any) => {
          console.error('Error connecting to SignalR hub:', error);
          observer.error(error);
        });
    });
  }

  receiveMessage(): Observable<string> {
    return new Observable<string>((observer) => {
      this.hubConnection.on('ReceiveMessage', (message: string) => {        
        observer.next(message);
      });
    });
  }

  sendMessage(message: string): void {
    this.hubConnection.invoke('SendMessage', message);
  }
}

All 3 applications are running through Docker. Both Angular and Web API aren't exposed, only through Nginx. The Angular app is running on Port 4200 and Web API on 8080 in their own containers.

I can connect properly to the hub and it works fine. But I'm bothered with the log that it says WebSocket connection to 'wss://localhost/' failed and WebSocket connection to 'wss://localhost:4200/' failed. Why is it trying to connect to the root URL?

Here is the log

{"notify":"init_tab"}
client:529 WebSocket connection to 'wss://localhost/' failed: 
setupWebSocket @ client:529
(anonymous) @ client:524Understand this error
app-signalr.service.ts:14 [2024-08-23T05:03:01.097Z] Information: Normalizing '/hub/realtimehub' to 'https://localhost/hub/realtimehub'.
core.mjs:30083 Angular is running in development mode.
Utils.js:148 [2024-08-23T05:03:01.233Z] Information: WebSocket connected to wss://localhost/hub/realtimehub?id=f--e3_ZI4W_A8W7NskfMvw.
app-signalr.service.ts:22 Connection established with SignalR hub
client:529 WebSocket connection to 'wss://localhost:4200/' failed: 
setupWebSocket @ client:529
fallback @ client:502
(anonymous) @ client:545Understand this error
client:505 [vite] failed to connect to websocket.
your current setup:
  (browser) localhost/ <--[HTTP]--> localhost:4200/ (server)
  (browser) localhost:/ <--[WebSocket (failing)]--> localhost:4200/ (server)
Check out your Vite / network configuration and https://vitejs.dev/config/server-options.html#server-hmr .

[engineering87]

Hi @eSPiYa,
I don't think those wss://localhost and wss://localhost:4200 errors are from SignalR, they’re probraly from the Angular dev server’s HMR client trying to open a WebSocket to refresh the page when code changes.
Since your app is served behind Nginx in Docker and not directly from the dev server, those connections fail but they don’t affect your SignalR hub (which is already connecting fine to /hub/realtimehub).
In a production build, the HMR client isn’t included, so the warnings disappear. You shiuld try to disable the live reload in dev enviroment to test.