时间戳

首页 > 解决方案 > Asp .NET Core SignalR 显示服务器时间

c# - Asp .NET Core SignalR 显示服务器时间

问题描述

我从未使用过 Signalr，也找不到如何显示服务器时间并使用客户端上的 Signalr 保持更新的示例

这是枢纽

public class ClockHub : Hub
{
    public async Task DisplayTime()
    {
        await Clients.All.SendAsync("DisplayTime", DateTime.Now.TimeOfDay);
    }
}

在客户端我有这个

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

如何获取从服务器发送到客户端的时间并保持更新？

更新

这是正在运行的代码

 setInterval(function () {

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

        connection.start().then(function () {

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

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

        connection.on("DisplayTime", function (time) {
            $('#server-date').html(time);
        });

        },1000);

标签： c#asp.net-coresignalr

解决方案

为了避免由多个间隔引起的重复，这段代码应该可以工作：

集线器/ClockHub.cs：

public class ClockHub : Hub
{
    public async Task PrintTime()
    {
        await Clients.All.SendAsync("DisplayTime", DateTime.Now.ToString());
    }
}

wwwroot/js/clock.js：

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

connection.on("DisplayTime", function (time) {
    var li = document.createElement("li");
    li.textContent = time;
    document.getElementById("serverDate").appendChild(li);
});

connection.start().then(function () {

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

setInterval(function () {

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

}, 1000);

页面/索引.cshtml：

@page
<div class="row">
    <div class="col-12">
        <ul id="serverDate"></ul>
    </div>
</div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/clock.js"></script>

其余代码可以在官方文档中找到。

推荐阅读