如何使用 MVC 和自主机信号器向所有客户端报告进度

Question

我对 SignalR 很陌生。 我正在尝试创建一个模拟传送带，许多客户可以查看传送带的位置（模拟传送带是一个 jQuery ui 进度条）。

我所拥有的（以及在下面发布的）适用于许多客户 - 但是您打开的客户越多，传送带的运行速度就越快。似乎每次推送到客户端都会依次发回服务器等等。

我的问题是如何让多个客户查看此模拟传送带，而不是让传送带根据查看它的客户数量更快地增加？

中心代码

 public class ConveyorHub : Hub
{
    public static  int ConveyorPosition { get; set; }
    private Timer _timer;
    public override Task OnConnected()
    {
        Initialize();
        return base.OnConnected();
    }

    private void Initialize()
    {
        ConveyorPosition = 0;
        if (_timer == null)
        {
            _timer = new Timer(1000);
            _timer.Elapsed += (s, e) => Clients.All.reportConveyorMovement(ConveyorPosition++);
            _timer.Start();
        } 
    }
}

索引.cshtml

<div class="progress-container">
<label class="progress-name">Simulated Conveyor</label>
<div id="progressbar">
    <div class="progress-label">Loading...</div>
</div>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="~/Scripts/jquery-2.1.3.js"></script>
<script src="~/Scripts/jquery-ui-1.11.2.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
<script src="~/Scripts/hubs.js"></script>
<script type="text/javascript">
    $(function () {
        var progressbar = $("#progressbar");
        var progressLabel = $(".progress-label");

        $.connection.hub.url = "http://localhost:8080/signalr";
        var conveyorHub = $.connection.ConveyorHub;

        conveyorHub.client.reportConveyorMovement = function(val) {
            progress(val);
        };

        progressbar.progressbar({ value: 0 });

        function progress(val) {
            var progressbarValue = progressbar.find(".ui-progressbar-value");
            if (val >= 75 && val < 99) {
                progressbarValue.css({
                    "background": 'yellow'
                });
            }
            if (val >= 99) {
                progressbarValue.css({
                    "background": 'red'
                });
            }
            progressbar.progressbar("value", val);
            progressLabel.text(progressbar.progressbar("value") + "%");
        }

        $.connection.hub.start()
            .done(function() {
                $("#progressbar").change(function() {

                });
            }).fail(function() { console.log('Could not Connect!'); });
    });
</script>

任何帮助将不胜感激。

Answer 1

问题出在这一行：

_timer.Elapsed += (s, e) => Clients.All.reportConveyorMovement(ConveyorPosition++);

试试这个，问题是你告诉每个客户增加传送带的位置。这样你就可以精确地增加一次：

_timer.Elapsed += (s, e) => {
       ++ConveyorPosition;
       Clients.All.reportConveyorMovement(ConveyorPosition);
};