title: SignalR and React Connection
body: <p>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"</p>
  
  <p>These are my code:
  Code for the Hub</p>
  
  <pre><code>[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></pre>
  
  <p>Code for the startup</p>
  
  <pre><code>public class Startup
  {
  
      public void Configuration(IAppBuilder app)
      {
  
          // Any connection or hub wire up and configuration should go here
          app.Map("/signalr", map =&gt;
          {
              map.UseCors(CorsOptions.AllowAll);
  
              new HubConfiguration() { EnableJSONP = true };
              map.RunSignalR();
          });
      }
  }
  </code></pre>
  
  <p>Code for the React client</p>
  
  <pre><code>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");
          });
  
        }
  </code></pre>
  
  <p>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. </p>
  
  <p>My plan is to connect it to redux eventually, but I can't figure out how. I've read this article <a href="https://medium.com/@lucavgobbi/signalr-react-redux-5a100a226871" rel="nofollow noreferrer">https://medium.com/@lucavgobbi/signalr-react-redux-5a100a226871</a> . But i'm still having a lot of trouble just connecting it. </p>
  
  <p>How can I connect my client to the server?</p>