SignalR and React Connection

I am creating a chat app and trying to connect my React client side with a SignalR server. I am trying to test it so that I can connect the server and client first before applying and receiving messages. However, whenever I try to connect, I get "could not connect to signalr server"

This is my code: Code for 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 to run

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

      

React client 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");
        });

      }

      

I'm not sure how to debug it or where it went wrong. I read that maybe it takes a while to connect. I also read articles where I should wait for a callback. However, I don't understand how it could not connect at all.

My plan is to combine it with the cut in the end, but I can't figure out how. I read this article https://medium.com/@lucavgobbi/signalr-react-redux-5a100a226871 . But I still have a lot of problems just plugging it in.

How do I connect my client to the server?

+3


source to share





All Articles