Push Data To Client Using SignalR - signalr

Question

I'm sorry for potentially creating a duplicate thread here, but I simply cannot get my web application to do what I need by following the other examples I've found.
My goal is to do one of the following:
OPTION 1 - IDEAL SOLUTION
Fetch data from a database and update the UI on a web page ONLY when changes are made to the data being displayed on the web page. For example, if a user is viewing a service ticket, I don't want to update the UI on that page unless that ticket is changed.
OPTION 2 - ACCEPTABLE SOLUTION
Fetch data from a database every x seconds and use that data to update the UI on a web page.
My current implementation of Option 2 is below. It involves sending an asynchronous HTTP request every 60 seconds to fetch the data:
// 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);
Rather than sending an HTTP request every 60 seconds, I would like to use SignalR to push that data to the client every 60 seconds.
As a simple example, I have created the following Hub with a method to get the current time on the server:
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
And a basic textbox:
<input id="TXTLongPollingTest" type="text" class="form-control" />
And my client-side code:
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);
});
At first I tried getting it to fetch the server time just once. My code will successfully connect to the hub, but then it throws an error saying "Uncaught TypeError: hub.getServerTime is not a function". That's the first problem I haven't been able to overcome.
The second problem is: How can I get the hub to send the current time to the client on a regular interval such as every 1 second?

Answer 1

Here is what I have done to achieve something similar. Essentially fetching data from the database and broadcasting to clients every 30 seconds.
In my global.asax.cs I have this to ensure whenever my website is has started/restarted it will kick off my repeater:
protected void Application_Start(object sender, EventArgs e)
{
GetTeamData.TeamDataRepeater();
}
In my GetTeamData.cs I have a timer that is set to run every 30 seconds
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);
}
}
My java script for the client has:
//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
}
});
Note that I have removed some things such as use of try/catch just to give you an example.
Hope that helps.