.NetCore 2.2 SignalR 문제

Question

사용자가 실시간으로 업데이트를 볼 수 있도록 그리드 데이터 새로 고침을 위해 연결된 모든 클라이언트에 데이터 소스 읽기 요청을 호출하기 위해 SignalR을 사용하려는 프로젝트에 몇 가지 문제가 있습니다.

이것은 두 개의 열린 크롬 창을 사용하여 Visual Studio에서 실행되는 동안 로컬에서 IIS Express로 작동합니다. SignalR은 두 창 모두에서 연결되며 두 브라우저 창에서 수정할 때 오류없이 데이터 소스 읽기 실행을 호출합니다.

IIS 10.0.17763.1을 실행하는 서버에 배포하면 오류가 나타납니다.

응용 프로그램은 한 서버에서 호스팅되고 브라우저 창이 열려 있으면 SignalR에 대한 연결이 작동합니다 (await connection.start 호출에서 연결된 콘솔 로그를받습니다). 그러나 다른 컴퓨터에서 두 번째 브라우저 창이 열리거나 열리면 SingalR에 대한 여러 오류가 각 브라우저 인스턴스에 대해 콘솔에 나타나기 시작합니다.

오류는 다음과 같습니다.

브라우저 머신 1 :

    https://FQDN:2424/trafficWorkflowHub?id=YPCykB9G94tbgzlnZZDi5g 404 (Not Found) 
    Error: Server returned handshake error: An unexpected error occurred during connection handshake. 
    InvalidDataException: Missing required property 'protocol'. Message content: {"arguments": 
   [],"invocationId":"1","target":"UpdateDataSource","type":1} 
    TrafficWorkflow:181 Error: Not Found
        at new HttpError (signalr.js:1487)
        at XMLHttpRequest.xhr.onload (signalr.js:1777)
    TrafficWorkflow:182 connected

브라우저 머신 2 :

 signalr.js:3927 WebSocket connection to 'wss://FQDN:2424/trafficWorkflowHub?id=2sW4zudCQKoysUQB9mB1vQ' 
failed: Error during WebSocket handshake: Unexpected response code: 404
signalr.js:2684 [2020-09-17T10:57:34.529Z] Information: SSE connected to 
https://FQDN:2424/trafficWorkflowHub?id=E9M_Wkbpt1KBPcHxLHhJXA
signalr.js:1788 POST https://FQDN:2424/trafficWorkflowHub?id=E9M_Wkbpt1KBPcHxLHhJXA 404 (Not Found)
signalr.js:2678 [2020-09-17T10:57:34.060Z] Error: Failed to start the transport 'WebSockets': null

코드 예는 다음과 같습니다.

클라이언트 측 코드 :

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/trafficWorkflowHub")
    .build();

async function start() {
    try {
        await connection.start().catch(err => console.error(err));
        console.log("connected");
    } catch (err) {
        console.log(err);
        setTimeout(() => start(), 5000);
    }
}

connection.onclose(async () => {
    await start();
});


connection.on("ReceiveUpdates", function () {
    callDataSourceRead();
});

start() 문서 준비 섹션에 있습니다.

다음 호출로 cshtml 페이지의 데이터 소스를 업데이트하기위한 호출을 호출합니다.

 connection.invoke("UpdateDataSource").catch(function (err) {
                    return console.error(err.toString());
                });

서버 측 코드는 다음과 같습니다.

  public class TrafficWorkflowHub : Hub
    {

        public async Task UpdateDataSource()
        {
            await Clients.All.SendAsync("ReceiveUpdates");
        }

    }

Startup.cs에서 Public void 구성

app.UseSignalR(routes =>
            {
                routes.MapHub<TrafficWorkflowHub>("/trafficWorkflowHub");
           
            });

공개 무효 ConfigureServices

  services.AddSignalR(hubOptions =>
            {
                hubOptions.EnableDetailedErrors = true;
            });

Answer 1

다음과 같이 CORS를 구성해야합니다 (순서가 중요합니다).

services.AddCors(options =>
{
    options.AddPolicy(CorsPolicy, builder => builder.WithOrigins("https://yourFrameworkApp.azurewebsites.com")
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowCredentials()
        .SetIsOriginAllowed((host) => true));
});

그런 다음 시작시 구성 방법에 해당 항목이 있는지 확인하십시오.

app.UseHttpsRedirection();
app.UseWebSockets();

그리고 서버에서 웹 소켓을 활성화하는 것을 잊지 마십시오.