SignalR and React Connection

Viewed 2984

I am building a chat application and am trying to connect my React Client-side with a SignalR server. I'm trying to test it so that I can connect the server and the client first before i apply and get the messages. However whenever I try to connect, I will get "failed in connecting to the signalr server"

These are my code: Code for the Hub

[HubName("chatHub")]
public class ChatHub : Hub
{
    // private ApiAi apiAi;
    //  private AIServiceException aiService;
    // private AIDataService aiDataService;


    //ChatBot keithBot = new ChatBot();
    public void Send(string name, string message)
    {

        Clients.All.broadcastMessage(name, message);

        if (ChatBot.BotIsRetrievingDoc())
        {
            ChatBot.getDocumentInformation(message);
        } 
        else
        {
            ChatBot.sendMessageToBot(message);
        }

        replyFromBot();

    }

Code for the startup

public class Startup
{

    public void Configuration(IAppBuilder app)
    {

        // Any connection or hub wire up and configuration should go here
        app.Map("/signalr", map =>
        {
            map.UseCors(CorsOptions.AllowAll);

            new HubConfiguration() { EnableJSONP = true };
            map.RunSignalR();
        });
    }
}

Code for the React client

import $ from 'jquery';
    window.$ = window.jQuery = require("jquery");
    require('ms-signalr-client');

    var _hub;
    var ChatProxy;
    var ChatServerUrl = "http://localhost:52527/";
    var ChatUrl = ChatServerUrl + "signalr";



   class App extends Component {
      componentWillMount() {
        _hub = $.hubConnection(ChatUrl, {
        useDefaultPath: false
       });

        ChatProxy = _hub.createHubProxy('ChatHub');
        ChatProxy.on("Send", function(name, message) {
          console.log(name + " " + message);
        });
        _hub.start({ jsonp: true })
        .done(function() {
          console.log("Connected to Signalr Server");
        })
        .fail(function() {
          console.log("failed in connecting to the signalr server");
        });

      }

I'm not sure how to debug it or where it went wrong. I've read that maybe it requires some time to connect. I've also read articles where I should wait for a callback. However, I do not understand how it could not connect at all.

My plan is to connect it to redux eventually, but I can't figure out how. I've read this article https://medium.com/@lucavgobbi/signalr-react-redux-5a100a226871 . But i'm still having a lot of trouble just connecting it.

How can I connect my client to the server?

0 Answers
Related