How do I Specify the Correct Back-End URL for SignalR 3.0 When I have Two Projects in my Solution? Currently Getting 404

Question

Getting this error in my SignalR project:

Failed to load resource: the server responded with a status of 404,

... fired some time after I invoke connection.start()

After succeeding with this tutorial, I modified it use two projects in a single solution, a back-end and a front-end.

• Back-end is a .NET Core Web API project
• Front-end is .NET Core Web Application

In the back-end startup.cs file, I attempt to specify the URL using 'ChatHub', like this:

app.UseEndpoints(endpoints => {
    endpoints.MapControllers();
    endpoints.MapHub<ChatHub>("/chatHub");
});

I placed the code above in the Startup.cs file of my back-end project. Also added services.AddSignalR(); in same file, in ConfigureServices method, per the tutorial.

I cut-and-pasted my Hub code from the tutorial.

Besides the error message above, the debugger further indicates:

• Information: Normalizing '/chatHub' to 'https://localhost:44365/chatHub'
• Error: Failed to complete negotiation with the server

I literally cut-and-pasted the JavaScript for my front-end, note the URL shown below on line 2, which should match the endpoint above:

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

//Disable send button until connection is established
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    var encodedMsg = user + " says " + msg;
    var li = document.createElement("li");
    li.textContent = encodedMsg;
    document.getElementById("messagesList").appendChild(li);
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

This code throws the error listed above. I tried some variations on the URL, including https://localhost:44365/BackEnd/ChatHub. No luck.

Then I tried splitting my solution and running each project separately. Revised my JavaScript to use the back-end port, like this:

var connection = new signalR.HubConnectionBuilder()
    .withUrl("https://localhost:44384/chatHub")
    .build();

But when I examined the browser, it indicated

Information: Normalizing '/chatHub' to 'https://localhost:*44365*/chatHub'.

Note the port it used is the wrong port, it is the port for the front-end.

Summary

I believe I took a working tutorial and modified it only by splitting it into two projects, but I can't figure-out the URL to connect to my back-end. I tried variations on the URL, for some reason it didn't use the correct port when I split-out the back-end project from my original solution

Answer 1

After succeeding with this tutorial, I modified it use two projects in a single solution, a back-end and a front-end.

To connect to Hub server from a separate SignalR JavaScript client application, you can refer to the following steps and code snippet.

Allow cross-origin SignalR connections in your Hub Server application (Back-end, a .NET Core Web API project).

app.UseCors(builder =>
{
    builder.WithOrigins("https://localhost:44365")
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowCredentials();
});

Specify Url to the hub on JavaScript client, like below.

var connection = new signalR.HubConnectionBuilder().withUrl("https://localhost:44384/chatHub").build();

Test Result