在我的React App上实现SignalR

时间:2018-08-28 06:49:40

标签: c# reactjs signalr

我已经阅读了各种教程并观看了视频,尝试了所有这些教程,但似乎没有任何效果。

我的怀疑是这个

<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>

代码行:

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

导致此错误:

hubs:1 Uncaught SyntaxError: Unexpected token <

我尝试使用它作为替代品:

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

但是问题是它看不到我的中心。根据这些教程,他们说我必须能够导航到:

/signalr/hubs or /signalr/signalr/hubs

但是两者都会使我进入404错误页面,这是服务器上的代码:

Startup.cs

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

并尝试在我的组件上访问它:

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

它说建立了连接,并给了我一个连接ID。但是,当我记录connection.chatHub时,它说未定义,因此我无法在内部触发该函数...

这是中心的代码:

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

对此有何想法?我无法使其正常工作...

编辑:

经过大量研究,我发现在运行不正常之后,signalR应该创建一个名为“ signalr”的文件夹,但它并没有在我的文件夹中建立。也许我在这里想念东西...

1 个答案:

答案 0 :(得分:1)

解决了有关协商的问题,使连接开始像这样:

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

很明显,我以前的cors设置阻止了它,因此我不需要将证书传递给服务器,因为CORS设置可以挂接到以前的设置。

现在一切都按我的预期进行了:)