如何使用 HubConnectionBuilder 配置 ReactJS URL 连接到 Azure SignalR 服务

Question

你好我想知道如何设置 HubConnectionBuilder URL 以将我的客户端基于 ReactJS 函数的应用程序连接到 Azure SignalR 服务。我正在使用端点=https://xxxxxxxxxxxx-signalr.service.signalr.net;AccessKey=m5QcxLFV+3Wx+tzxxn4SUiBqWZUOmzG8nix4OxxxOhg4=;Version=1.0;如下所示：

useEffect(() => {
console.log('testing const2');
const newConnection = new HubConnectionBuilder()
.withUrl('Endpoint=https://xxxxxxxxxxxx-    signalr.service.signalr.net;AccessKey=m5QcxLFV+3Wx+tzMZn4SUiBqWZUOmxxxxix4O1pOhg4=;Version=1.0;')            
.withAutomaticReconnect()
 .build();

 setConnection(newConnection);
    
 }, []);

期待与 Azure SignalR 服务建立连接。当我收到此错误时，有人可以告诉我如何设置此权利吗？

无法 POST /Endpoint=https://xxxxxxxxxx-signalr.service.signalr.net;AccessKey=m5QcxLFV+3WxxxxxZn4SUiBqWZUOmzG8nix4O1pOhg4=;Version=1.0;/negotiate

：状态代码“404”这不是 SignalR 终结点，或者有代理阻止连接。

Answer 1

我仍在研究，但基本上使用 Azure SignalR 服务，您可以使用 Azure 函数来获取带有客户端或访问令牌的 URL。它返回一个客户端应用程序（又名 ReactJS）特定的 URL 以包含在 HubConnectionBuilder 的 withURL 中。这样，出于安全目的，每个客户端都会获得自己的 URL。确保 CORS 在 Azure 资源门户设置中启用所有来源。

Answer 2

您正在尝试输入

SignalR Connection String

作为端点 URL。这是不正确的。

您应该在

.withUrl()

中为您的参数输入一个正常的 url 字符串，指向您的 SignalR 服务的

client endpoint

。这通常是您在后端服务中映射的端点，它实际上让 SignalR 服务确切知道客户端可以使用哪些方法等。

根据此处的文档，您的连接字符串将用于后端组件。

编辑： 为了澄清，即使在无服务器模式下使用 SignalR，您也需要额外的组件才能使一切正常工作：

至少需要一个

/negotiate

端点作为 Azure 函数托管。然后，此端点会将必要的连接令牌和详细信息返回到客户端应用程序，然后连接并启用消息传递。 （此端点还应处理客户端身份验证）。 然后，您将至少需要一个 Azure Function 端点，该端点将负责实际处理 SignalR 消息的逻辑。

您协商的 Azure 函数应该看起来像这样（取自教程：Azure SignalR Service authentication with Azure Functions）：

您的功能触发器配置：

{
    "disabled": false,
    "bindings": [
        {
            "authLevel": "anonymous",
            "type": "httpTrigger",
            "direction": "in",
            "methods": ["post"],
            "name": "req",
            "route": "negotiate"
        },
        {
            "type": "http",
            "direction": "out",
            "name": "res"
        },
        {
            "type": "signalRConnectionInfo",
            "name": "connectionInfo",
            "hubName": "default",
            "connectionStringSetting": "AzureSignalRConnectionString",
            "direction": "in"
        }
    ]
}

module.exports = async function (context, req, connectionInfo) {
    context.res.body = connectionInfo;
};

然后，您将需要另一个 Azure Functions 来实际处理消息传递......例如，向所有连接的客户端广播。

因为从您的问题中不清楚您希望客户做什么，所以我无法真正帮助您了解该功能到底是什么样子。但是，无论如何，您在上面的链接中有一个工作示例。