dfrencham / ms-signalr-client

Unofficial package for the Microsoft SignalR client. Intented for comsumption with jspm.
21 stars 16 forks source link

Connection to SignalR #13

Closed kii-dot closed 5 years ago

kii-dot commented 7 years ago

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?

dfrencham commented 7 years ago

Your startup class needs to include OWIN references. For example:

using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.Map("/signalr", map =>
            {
               map.UseCors(CorsOptions.AllowAll);
               new HubConfiguration() { EnableJSONP = true };
               map.RunSignalR();
            });
        }
    }
}

Also, your ChatHub looks a little odd. It looks like you are trying to perform an asynchronous operation (have bot retrieve message, then send a reply), but your code is not asynchronous.