事件不是由我的 javascript SignalR Azure 连接触发的

Question

我已经在 Azure 服务器和客户端之间建立了 SignalR 连接。已创建连接，但未在客户端触发事件。

我可以从客户端向服务器发送消息，并且我已确认服务器已收到此消息。但是，客户端上的事件没有被触发。我什至尝试从客户端调用客户端上的事件（'sendMessage' 您可以在下面的我的客户端代码中看到）但这不会触发。

我读到在调用 connection.start 之前至少需要将一个事件附加到集线器代理；所以已经这样做了 - 但事件仍然无法正常工作。

我的客户端代码是：

"use strict";

//Disable send button until connection is established
document.getElementById("sendButton").disabled = true;

var connection = $.hubConnection();
connection.url = 'https://localhost:44444/signalr/hubs';
var reportHubProxy = connection.createHubProxy("reportHub");

reportHubProxy.on("receiveMessage", function (user, message)
{
    console.log(user + ' ' + message + ' receiveMessage - connection ID=' + connection.id);
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // We can assign user-supplied strings to an element's textContent because it
    // is not interpreted as markup. If you're assigning in any other way, you 
    // should be aware of possible script injection concerns.
    li.textContent = "${user} says ${message}";
});

reportHubProxy.on("sendMessage", function (user, message)
{
    console.log(user + ' ' + message);
});

connection.start()
    .done(function ()
    {
        document.getElementById("sendButton").disabled = false;
        console.log('Now connected, connection ID=' + connection.id);
        document.getElementById("sendButton").addEventListener("click", function (event)
        {
            var user = document.getElementById("userInput").value;
            var message = document.getElementById("messageInput").value;
            console.log(user + ' ' + message + ' sent - connection ID=' + connection.id);
            reportHubProxy.invoke("sendMessage", user, message)
                .then(function (err)
                {
                    return console.log(user + ' ' + message + ' complete - connection ID=' + connection.id);
                })
                .catch(function (err)
                {
                    return console.error(err.toString());
                });
            //event.preventDefault();
        });
    })
    .fail(function ()
    {
        console.log('Could not Connect!');
    });

我看到了来自 connection.start 的控制台日志，但没有看到来自 receiveMessage 或 sendMessage 的控制台日志。

我的服务器端代码很简单而且似乎工作正常：

Imports Microsoft.AspNet.SignalR
Imports System.Threading.Tasks

Public Class ReportHub
    Inherits Hub

    Public Async Function SendMessage(ByVal user As String, ByVal message As String) As Task
        Await Clients.All.SendAsync("ReceiveMessage", user, message)
    End Function
End Class

Imports Owin
Imports Microsoft.Owin
Imports Microsoft.Owin.Hosting
Imports System.Web.Http
Imports System.IO
Imports Microsoft.AspNet.SignalR

Public Class Startup

    Public Sub Configuration(ByVal app As IAppBuilder)
        app.MapSignalR()
    End Sub

End Class

我在安装了文件jquery.signalR-2.4.2.js.

的客户端上安装了Microsoft.AspNet.SignalR.js

Answer 1

我现在通过做两件事来完成这项工作：

将代码包装在

$(function (){ }):

切换到使用生成的代理，如下所述：https://docs.microsoft.com/en-us/aspnet/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client

我首先尝试执行 1.，但它本身并没有奏效。

所以我的客户端代码现在看起来像这样：

$(function ()
{
    "use strict";

    //Disable send button until connection is established
    document.getElementById("sendButton").disabled = true;

    $.connection.hub.url = 'https://localhost:44444/signalr/hubs';
    var reportHubProxy = $.connection.reportHub;
    reportHubProxy.client.receiveMessage = function (user, message)
    {
        console.log(user + ' ' + message + ' received - connection ID=' + $.connection.hub.id);
        var li = document.createElement("li");
        document.getElementById("messagesList").appendChild(li);
        // We can assign user-supplied strings to an element's textContent because it
        // is not interpreted as markup. If you're assigning in any other way, you 
        // should be aware of possible script injection concerns.
        li.textContent = user + ' says ' + message;
    };

    //This does not get called
    reportHubProxy.on("sendMessage", function (user, message)
    {
        console.log(user + ' ' + message);
    });

    $.connection.hub.start()
        .done(function ()
        {
            document.getElementById("sendButton").disabled = false;
            console.log('Now connected, connection ID=' + $.connection.hub.id);
            // Wire up Send button to call NewreportMessage on the server.
            $('#sendButton').click(function ()
            {
                var user = document.getElementById("userInput").value;
                var message = document.getElementById("messageInput").value;
                console.log(user + ' ' + message + ' sent - connection ID=' + $.connection.hub.id);
                reportHubProxy.server.sendMessage(user, message)
                    .then(function (err)
                    {
                        return console.log(user + ' ' + message + ' complete - connection ID=' + $.connection.hub.id);
                    })
                    .catch(function (err)
                    {
                        return console.error(err.toString());
                    });
                //$('#message').val('').focus();
            });
        })
        .fail(function ()
        {
            console.log('Could not Connect!');
        });
});

我之前尝试过使用生成的代理，但没有注意到重要说明：

As you can see from the examples, when you use the generated proxy, $.connection.hub refers to the connection object. This is the same object that you get by calling $.hubConnection() when you aren't using the generated proxy.

另请注意，在创建集线器代理时，您使用 $.connection.reportHub（不带 .hub）。

我仍然无法触发客户端 'on' 事件 - 所以，如果您知道如何解决该问题，请告诉我。

我将服务器中心更改为：

mports Microsoft.AspNet.SignalR
Imports System.Threading.Tasks

Public Class ReportHub
    Inherits Hub

    Public Sub SendMessage(ByVal user As String, ByVal message As String)
        Clients.All.receiveMessage(user, message)
    End Sub
End Class

现在我只需要弄清楚如何将其集成到我的项目中，设置令牌处理等。

事件不是由我的 javascript SignalR Azure 连接触发的

Events are not triggered by my javascript SignalR Azure connection

javascript

azure

signalr

owin

.net-4.8