使用SignalR将数据推送到客户端

时间:2017-09-29 19:02:24

标签: signalr

我很遗憾可能会在这里创建一个重复的帖子,但是我无法通过我发现的其他示例来让我的Web应用程序按照我的需要进行操作。

我的目标是执行以下操作之一:

选项1 - 理想解决方案
仅当对网页上显示的数据进行更改时,才从数据库中获取数据并更新网页上的UI。例如,如果用户正在查看服务票证,我不希望更新该页面上的UI,除非该票证已更改。

选项2 - 可接受的解决方案
每隔x秒从数据库中获取数据,并使用该数据更新网页上的UI。

我目前的选项2 的实施情况如下。它涉及每60秒发送一次异步HTTP请求以获取数据:

// start checking for new messages every 60 seconds
setInterval(function () {
    $.ajax({
        async: true,
        type: "POST",
        contentType: "application/json; charset=utf-8;",
        url: "/AJAX_Handlers/CheckForNewMessages.ashx",
        dataType: "json",
        success: function (Result) {
            var new_message_received = Result[0]["NewMessageReceived"];

            if (new_message_received) {
                $("#DIVMessageReminder").html("<strong>You have " + num_new_messages + " new message(s).</strong>");
                $("#DIVMessageReminder").show();
            }
            else {
                $("#DIVMessageReminder").hide();
            }
        }
    });
}, 60000);

我不想每隔60秒发送一次HTTP请求,而是希望每隔60秒就使用SignalR将数据推送到客户端。

作为一个简单的例子,我创建了以下Hub,其中包含一种获取服务器当前时间的方法:

Imports Microsoft.AspNet.SignalR

Public Class ServerTimeHub
    Inherits Hub

    Public Sub GetServerTime()
        Dim current_time As String = Now.ToString()
        Clients.All.updateTime(current_time)
    End Sub

End Class

基本文本框:

<input id="TXTLongPollingTest" type="text" class="form-control" />

我的客户端代码:

var hub = $.connection.serverTimeHub;

hub.client.updateTime = function (new_time) {
    $("#TXTLongPollingTest").val(new_time);
}

$.connection.hub.start().done(function () {
    alert("connected to the SignalR hub");
    hub.getServerTime();
}).fail(function (err) {
    alert("failed to connect to SignalR hub: " + err);
});

起初我尝试让它只获取一次服务器时间。我的代码将成功连接到集线器,但随后它会抛出错误,说“未捕获的TypeError:hub.getServerTime不是函数”。这是我无法克服的第一个问题。

第二个问题是:如何让集线器每隔1秒定期向客户端发送当前时间?

1 个答案:

答案 0 :(得分:0)

以下是我为实现类似目标所做的工作。基本上从数据库中提取数据并每30秒向客户端广播一次。

在我的global.asax.cs中,我确保无论何时我的网站启动/重新启动它都会启动我的转发器:

protected void Application_Start(object sender, EventArgs e)
{
    GetTeamData.TeamDataRepeater();
}

在我的GetTeamData.cs中,我有一个设置为每30秒运行一次的计时器

public class GetTeamData
  {    
    static Timer TeamDataTimer = new Timer();

    public static void TeamDataRepeater()
    {
          TeamDataTimer.Elapsed += new System.Timers.ElapsedEventHandler(OnTimedEvent_TeamDataBroadcaster);
          TeamDataTimer.Interval = 30000; //30 Seconds
          TeamDataTimer.Start(); 
    }

    public static void OnTimedEvent_TeamDataBroadcaster(Object sender, ElapsedEventArgs e)
    {
          updateFirstRow(); 
    }

    public static void updateFirstRow()
    {
          IHubContext hubContext = GlobalHost.ConnectionManager.GetHubContext<MsgHub>();
          hubContext.Clients.All.pushMyData(mydata1, mydata2, mydata3);
    }           

   }

我的客户端java脚本有:

//I have already started my connection

$(function () {
    var chat = $.connection.msgHub;
    chat.client.pushMyData = function (mydata1, mydata2, mydata3)
    {
    //Do something with the returned data now
    }
});

请注意,我已经删除了一些内容,例如使用try / catch只是为了给你一个例子。

希望有所帮助。