SignalR connection 400 error (Bad Request) - reactjs

Question

I'm trying build a SignalR proof of concept where two applications are involved; one is a web single-page application and the other one is a server-side RESTful web api. The technology/framework being used is ReactJs, ASP.NET Web API 2 (.NET Framework 4.6, NOT .NET Framework Core) and SignalR.
The Web API
This is how I have SignalR wired-up in the server application. When the application starts, I map SignalR to the application pipeline...
public static void ConfigureSignarlR(IAppBuilder app)
{
app.MapSignalR<ChatConnection>("/signalr", new Microsoft.AspNet.SignalR.HubConfiguration
{
EnableDetailedErrors = true
});
}
The ChatConnection class is an implementation of PersistentConnection that does nothing special...
public class ChatConnection : PersistentConnection
{
protected override Task OnReceived(IRequest request, string connectionId, string data)
{
return base.OnReceived(request, connectionId, data);
}
protected override Task OnConnected(IRequest request, string connectionId)
{
return base.OnConnected(request, connectionId);
}
public override Task ProcessRequest(HostContext context)
{
return base.ProcessRequest(context);
}
}
and then I have a very simple hub...
public class ChatHub : Hub
{
public void Send(string name, string message)
{
Clients.All.broadcastMessage(name, message);
}
}
The Client App
For the client application I'm using the #aspnet/signalr-client npm package...this is how I create and start the connection...
initialize = () => {
const hubCon = new HubConnection("http://api.domain/signalr");
hubCon.start()
.then(() => console.log("Connection established..."))
.catch(err => console.log(err))
}
Things to be noticed
Both the API and the client app are hosted on the same local IIS server but with different host names (using host files)
When using the browser to navigate to http://api.domain/signalr/hubs, I get a 400 (Bad Request) response when the message following message Protocol error: Unknown transport.
When attempting to connect from the client app, I get the same error message
The ProcessRequest method is the only one that gets hit when debugging the ChatConnection class
Question(s)
What did I miss here? Or how can I get this PoC to work?
The question is quite broad because I seriously have no clue of what's going on here

Answer 1

After a bit of digging and reading through SignalR documentation I realized that I was doing everything wrong. Basically, SignalR implements two different connection patterns:
Hubs: a high-level API built on top of the Persistent connection API
Persistent connections
A client cannot communicate with a persistent connection endpoint using a Hub proxy (or at least not the way I was doing it). So, what I did was:
Kept the PersistentConnection but overrided the OnReceived method so it can broardcast to all clients
protected override async Task OnReceived(IRequest request, string connectionId, string data)
{
await Connection.BroadCast("message to broadcast");
}
Removed the "signalr\hubs" script reference because it's not needed
Registered the connection on start up (server-side)
app.MapSignalR<ChatConnection>("/chat");
Finnaly, on the client side, initialize the connection and register all necessary callbacks
this.connection = window.$.connection(process.env.REACT_APP_API_BASE_URI + "/chat");
this.connection.logging = true;
this.connection.received((data) => {
console.log("Received some data:")
console.log(data)
});
this.connection.start(() => {
console.log("Connection opened")
console.log("connectionId = " + this.connection.id)
});