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

时间:2015-02-05 19:17:21

标签: c# signalr signalr-hub signalr.client

我是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();
        } 
    }
}

Index.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>

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

问题在于这一行:

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

尝试这样做,问题是你告诉每个客户增加输送机的位置。通过这种方式,您可以精确地增加一次:

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