JavaScript 不是运行在 SignalR 连接之后

Question

我是第一次使用 SignalR，还有 mdb charts。我正在使用警报来证明 SignalR 正在运行并且它成功获取了我的数据。

我尝试添加一些示例图表代码，但它就是不显示图表。使用 click 函数调用时代码工作正常。

我认为这可能是一个时间问题，因为当前更新来自 OnGetAsync，它可能在文档加载之前收到？

我基本上想将实时图形数据发送到页面并让它实时更新。

剃刀页面：

<div class="col">
   <canvas id="myGraph" style="max-width: 500px" class="mr-2"</canvas>
</div>

js:

var connection = new signalR.HubConnectionBuilder().withUrl("/graphs").build();

(function ($) {
    "use strict"; // Start of use strict

    $(document).ready(function () {

   var ctxL2 = document.getElementById("myGraph").getContext('2d');
    var openTick = new Chart(ctxL2, {
        type: 'line',
        data: {
            labels: ["Monday", "February", "March", "April", "May", "June", "July"],
            datasets: [{
                label: "New User Requests",
                data: [65, 59, 80, 81, 56, 55, 40],
                backgroundColor: [
                    'rgba(105, 0, 132, .7)',
                ],
                borderColor: [
                    'rgba(200, 99, 132, .9)',
                ],
                borderWidth: 2
            }
            ]
        },
        options: {
            responsive: true
        }
    });

    connection.on("sendGraphData", function (graphdata) {
        alert(graphdata);
        openTick.data = {
            labels: ["Monday", "February", "March", "April", "May", "June", "July"],
            datasets: [{
                label: "New User Requests",
                data: [1, 2, 3, 4, 5, 6, 7],
                backgroundColor: [
                    'rgba(23,208,206,0.69)',
                ],
                borderColor: [
                    'rgba(200, 99, 132, .9)',
                ],
                borderWidth: 2
            }]
        };
        openTick.update();
    });


    $("#test-two").click(function () {
        openTick.data = {
            labels: ["Monday", "February", "March", "April", "May", "June", "July"],
            datasets: [{
                label: "New User Requests",
                data: [1, 2, 3, 4, 5, 6, 7],
                backgroundColor: [
                    'rgba(23,208,206,0.69)',
                ],
                borderColor: [
                    'rgba(200, 99, 132, .9)',
                ],
                borderWidth: 2
            }]
        };
        openTick.update();
    });

        connection.start().catch(function (err) {
            return console.error(err.toString());
        });

     });
})(window.jQuery);  //Update from post below.

cshtml.cs:

    public async Task OnGetAsync()
     {
        var hubConnection = new HubConnectionBuilder()
            .WithUrl("https://localhost:5001/graphs",options => {
                options.UseDefaultCredentials = true;
            })
            .ConfigureLogging(logging => {
                logging.SetMinimumLevel(LogLevel.Information);
                logging.AddConsole();
            })
            .AddJsonProtocol(options => {
                options.PayloadSerializerSettings.ContractResolver =
                    new DefaultContractResolver();
            })
            .Build();

        await hubConnection.StartAsync();

        await hubConnection.InvokeAsync("sendGraphData", mydata);

        await hubConnection.DisposeAsync();

}

Answer 1

您已将 SignalR 下的代码包装在函数中，但尚未为 $ 传递参数。试试这个（我在底部添加了一些代码）：

var connection = new signalR.HubConnectionBuilder().withUrl("/graphs").build();



(function ($) {
    "use strict"; // Start of use strict

    $(document).ready(function () {

 connection.on("sendGraphData", function (graphdata) {
            alert(graphdata);

            var ctxL2 = document.getElementById("myGraph").getContext('2d');
            var myNewGraph = new Chart(ctxL2, {
                type: 'line',
                data: {
                    labels: ["Monday", "February", "March", "April", "May", "June", "July"],
                    datasets: [{
                        label: "New User Requests",
                        data: [65, 59, 80, 81, 56, 55, 40],
                        backgroundColor: [
                            'rgba(105, 0, 132, .7)',
                        ],
                        borderColor: [
                            'rgba(200, 99, 132, .9)',
                        ],
                        borderWidth: 2
                    }
                    ]
                },
                options: {
                    responsive: true
                }
            });

        });

        connection.start().catch(function (err) {
            return console.error(err.toString());
        });

     });
}(window.jQuery));

Answer 2

我发现了问题。我必须从 javascript 发出请求，以便它仅在页面准备就绪时才收到数据。

    connection.start().then(function (value) { 
        connection.invoke("testData");
    });

JavaScript 不是运行在 SignalR 连接之后

JavaScript not running after SignalR connection

javascript

signalr

asp.net-core

JavaScript 不是 运行 在 SignalR 连接之后

JavaScript not running after SignalR connection

javascript

signalr

asp.net-core

JavaScript 不是运行在 SignalR 连接之后