CODEWITHSUNDEEP
c#reactjssignalr
xSkrappy
xSkrappy

Reputation: 747

Implementing SignalR on my React App

I have read various tutorials and watched videos , I tried all of them and nothing seems to work.

My suspicion is this 

<script src="/Scripts/jquery-1.10.2.min.js"></script> 
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js</script> 
<script src = "/Scripts/jquery.signalR-2.3.0.min.js"></script> 
<!-- <script src="http://localhost:9092/signalr/hubs"></script> --> 
 <script src="~/signalr/hubs"></script>

the line of code: 

 <script src="~/signalr/hubs"></script>

causes this error :

hubs:1 Uncaught SyntaxError: Unexpected token <

I have tried using this as a substitute:

 <script src="http://localhost:9092/signalr/hubs"></script>

But the problem is that it cannot see my hub. Based from the tutorials they say that I must be able to navigate to : 

/signalr/hubs or /signalr/signalr/hubs

but both throws me to an error page of 404 by the way here is the code on my server :

Startup.cs

            app.Map("/signalr", map =>
        {
            var hb = new HubConfiguration()
            {
                EnableJSONP = true,
                EnableJavaScriptProxies = true,
                EnableDetailedErrors = true
            };
            map.RunSignalR(hb);
        });
        app.MapSignalR();

And trying to access it on my component : 

    componentDidMount() {

    var connection = $.hubConnection();
    // var hubConnection = connection.createHubProxy('Chat');

    connection.url = '~/signalr';
    connection.start({})
    .done(function (a) {
        console.log('================',a)
        console.log('Now connected, connection ID=' + connection.id);
        console.log(connection);
        console.log(connection.chatHub);
        //$.connection.chat.server.tachChatHub();
        connection.chatHub.server.tachChatHub();
    })
    .fail(function (e) { console.error('Could not connect ' + e); });
}

It says that connection is established , and gives me a connection id. But when I am logging connection.chatHub , it says undefined thus i cannot trigger the function inside...

here is the code for the hub: 

    public class ChatHub : Hub
{
    public void TachChatHub(string name, string message)
    {
        Clients.All.addNewMessageToPage(name, message);
    }
}

Any Thoughts about this? I can't make it work...

EDIT:

After Tons of research , I had found out that after runnign the signalR should make a folder named "signalr" yet , it doesn't make on mine. Maybe I am Missing something here...

Upvotes: 4

Views: 2410

Answers (1)

xSkrappy
xSkrappy

Reputation: 747

Fixed the issue regarding Negotiate Made the connection start Like this :

   $.connection.hub.start({withCredentials:false})  
    .done(() => {
        console.log('Connected')
    })
    .fail((e) => { 
        console.log('Could not connect ' + e); 
    });

Apparently my previous cors setup is blocking it thus i need not to pass in credential to the server for the CORS Setup be hooked to the previous setup.

now Everything is working as what I Expected :)

Upvotes: 3

Related Questions