无法连接到 Azure SignalR Hub

问题描述 投票：0回答：1

我无法连接到我的 

Azure
信号服务。我创建了应用程序服务（网络应用程序）和信号服务。之后我将我的服务器应用程序部署到网络应用程序中。然而，当尝试从前端应用程序连接时，由于未知原因，我收到 forbidden 403 。有什么想法吗？

从客户端角度来看，客户端应该连接到哪个 url？到 azure webapp 或 azure signalr 服务？两者都获得了 url，并且 signalr 还获得了连接字符串 + 访问密钥。根据我的理解，webapp 通过连接字符串连接到 azure signalr，客户端应该使用 web 应用程序 url。不确定。

错误：

Response status code does not indicate success: 403 (Forbidden).

服务器应用程序（program.cs）：

var builder = WebApplication.CreateBuilder(args);
//signalr azure service url
builder.Services.AddSignalR().AddAzureSignalR("Endpoint=https://signalrchatest.service.signalr.net;AccessKey=xxxx;");
var app = builder.Build();

app.UseDefaultFiles();
app.UseRouting();
app.UseStaticFiles();
app.MapHub<ChatHub>("/chathub");
app.Run();

前端应用程序：

_hubConnection = new HubConnectionBuilder()
            .WithUrl($"https://signalrchatest.service.signalr.net/chathub")
            .Build();

private async void ConnectToHub()
    {
        try
        {
            await _hubConnection.StartAsync();
        }
        catch (Exception ex)
            Console.WriteLine($"{ex.Message}");
    }
c# azure signalr signalr-hub azure-signalr
1个回答
0
投票

403 Forbidden错误表示服务器理解你的请求但拒绝授权。请参阅此链接解决此错误。

以下是将前端和后端连接到 Azure SignalR 服务的完整设置和代码：

Program.cs
（服务器端代码）

using Microsoft.AspNetCore.SignalR;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSignalR().AddAzureSignalR(options =>
{
    options.ConnectionString = "<Your_SignalR_Connection_String>";
});

var app = builder.Build();

app.UseDefaultFiles();
app.UseRouting();
app.UseStaticFiles();
app.MapHub<ChatHub>("/chathub");
app.Run();

创建一个客户将与之交互的

ChatHub
类：.

using Microsoft.AspNetCore.SignalR;

public class ChatHub : Hub
{
    public Task SendMessage(string user, string message)
    {
        return Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

在

ConfigureServices
方法中，配置CORS策略：

var allowedSpecificOriginsPolicy = "_AllowedSpecificOriginsPolicy";
builder.Services.AddCors(options =>
{
    options.AddPolicy(allowedSpecificOriginsPolicy, builder =>
    {
        builder.WithOrigins("http://localhost:5001")
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials();
    });
});
app.UseCors(allowedSpecificOriginsPolicy);

请参阅此指南以使用 Azure SignalR 服务。

客户端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SignalR Chat</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js"></script>
</head>
<body>
    <h2>Azure SignalR Chat</h2>
    <input type="text" id="user" placeholder="Enter your name">
    <textarea id="message" placeholder="Type your message here"></textarea>
    <button id="sendMessage">Send Message</button>

    <div id="messages"></div>

    <script>
        var connection = new signalR.HubConnectionBuilder()
            .withUrl("http://localhost:5001/chathub") 
            .build();
document.getElementById("sendMessage").addEventListener("click", function () {
            var user = document.getElementById("user").value;
            var message = document.getElementById("message").value;
            connection.invoke("SendMessage", user, message)
                .catch(function (err) {
                    return console.error(err.toString());
                });
        });
        connection.on("ReceiveMessage", function (user, message) {
            var msg = user + ": " + message;
            var msgDiv = document.createElement("div");
            msgDiv.textContent = msg;
            document.getElementById("messages").appendChild(msgDiv);
        });
        connection.start()
            .then(function () {
                console.log("Connected to SignalR Hub!");
            })
            .catch(function (err) {
                console.error("Error starting connection: " + err.toString());
            });
    </script>
</body>
</html>

Output

有关更多详细信息，请参阅此指南，了解如何通过 Azure signalR 使用前端和后端。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.