CODEWITHSUNDEEP
javascriptc#signalr
Marko Polo
Marko Polo

Reputation: 49

Cross-domain SignalR

Trying to make a cross-domain version of the Microsoft Getting started with SignalR: https://learn.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-5.0&tabs=visual-studio And I am experiencing a lot of problems. I already configured CORS on the server side. But the console shows me this:

GET http://10.50.2.87:8080/node_modules/signalr/dist/browser/signalr net::ERR_ABORTED 404 (Not Found)

Not really sure why it doesn't work. scripts.js file:

import * as  signalR from "./node_modules/signalr/dist/browser/signalr"

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

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

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // We can assign user-supplied strings to an element's textContent because it
    // is not interpreted as markup. If you're assigning in any other way, you 
    // should be aware of possible script injection concerns.
    li.textContent = `${user} says ${message}`;
});

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();
});

ChatHub class:

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

Configured the CORS like this:

services.AddCors(options =>
            {
                options.AddDefaultPolicy(builder => builder.WithOrigins("http://10.50.2.87:8080/")
                    .AllowAnyOrigin()
                    .AllowAnyHeader()
                    .AllowAnyMethod());
            });

And I added these two lines at the end of my html file:

<script src="/node_modules/@microsoft/signalr/dist/browser/signalr.js"></script>
    <script type="module" src="./scripts.js"></script>

The button on the page is active, which means that frontend is being connected to the hub on the server side, but when I click on it nothing happens.

Upvotes: 0

Views: 127

Answers (1)

Alex
Alex

Reputation: 710

<script src="/node_modules/@microsoft/signalr/dist/browser/signalr.js"></script>

The src here is the endpoint that is causing an error. The error is not found, which means it cannot find the js file, and that is normal because asp core is not going to share files from there unless you explicitly tell it to. The tutorial you linked says to use the js library like this:

<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

The js at the front is a js folder where the js file is located. If you follow the tutorial it will be put there. You can also put it there manually by putting it in wwwroot/js in your source.

Upvotes: 2

Related Questions