Oct 23, 2014, 7:45 PM
Simple SignalR example featuring Ext.Net.
Hello everybody,
While Anup's SignalR stockticker sample is impressive I think it still is over-complicated for most people interested in incorporating the technology in their ext.net projects. Having said that, here is a simple SignalR sample featuring the ext.net gridpanel. It shows a web application that uses SignalR to provide server broadcast functionality. Server broadcast means that communications sent to clients are initiated by the server. This scenario requires a different programming approach than peer-to-peer scenarios such as chat applications, in which communications sent to clients are initiated by one or more of the clients.
Startup.cs
Hope it helps.
While Anup's SignalR stockticker sample is impressive I think it still is over-complicated for most people interested in incorporating the technology in their ext.net projects. Having said that, here is a simple SignalR sample featuring the ext.net gridpanel. It shows a web application that uses SignalR to provide server broadcast functionality. Server broadcast means that communications sent to clients are initiated by the server. This scenario requires a different programming approach than peer-to-peer scenarios such as chat applications, in which communications sent to clients are initiated by one or more of the clients.
Startup.cs
using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SimpleSignalR.Startup))]
namespace SimpleSignalR
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
app.MapSignalR();
}
}
}
Probe.csusing System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SimpleSignalR
{
public class Probe
{
public Guid Id { get; set; }
public DateTime Stamp { get; set; }
public string ProbedAt
{
get
{
return string.Format("Probed at {0}", this.Stamp.ToShortDateString());
}
}
}
}
SimpleHub.csusing System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using System.Threading.Tasks;
namespace SimpleSignalR
{
public class SimpleHub : Hub
{
public static void Probe(DateTime stamp)
{
// do other server-side stuff ...
// for example, let's convert the stamp param
// into an object of arbitrary type Probe
Probe probe = new Probe
{
Id = Guid.NewGuid(),
Stamp = stamp
};
// notify clients
var hubContext = GlobalHost.ConnectionManager.GetHubContext<SimpleHub>();
hubContext.Clients.All.broadcastProbe(probe.Id, probe.Stamp, probe.ProbedAt);
}
}
}
Default.aspx<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SimpleSignalR.Default" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h2>Simple SignalR featuring Ext.Net.</h2>
<p>This page acts both as a SignalR server and a client.
The simulated call to the hub obviously originates from a separate process in a real application.</p>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Probe client"
Icon="Monitor"
Height="250"
Width="600"
Layout="FitLayout">
<Store>
<ext:Store
ID="Store1"
runat="server">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="Id" Name="Probe">
<Fields>
<ext:ModelField Name="Id" />
<ext:ModelField Name="Stamp" Type="Date" />
<ext:ModelField Name="ProbedAt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="ID" DataIndex="Id" Width="250" />
<ext:DateColumn runat="server" Text="Stamp" DataIndex="Stamp" Format="dd/MM/yyyy HH:mm:ss" Width="150" />
<ext:Column runat="server" Text="Message" DataIndex="ProbedAt" Flex="1" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
</ext:GridPanel>
<ext:TaskManager ID="TaskManager1" runat="server" AutoRunDelay="60000">
<Tasks>
<ext:Task Interval="60000">
<DirectEvents>
<Update OnEvent="TaskManager1Task1_OnUpdate" />
</DirectEvents>
</ext:Task>
</Tasks>
</ext:TaskManager>
<script src="../Scripts/jquery-1.6.4.min.js"></script>
<script src="../Scripts/jquery.signalR-2.1.2.min.js"></script>
<script src="../signalr/hubs"></script>
<script type="text/javascript">
$(function () {
var pcs = $.connection.simpleHub;
// Create a function that the hub can call
pcs.client.broadcastProbe = function (id, stamp, probedAt) {
var store = Ext.getStore('Store1');
store.insert(0, new Probe({
Id: id,
Stamp: stamp,
ProbedAt: probedAt
}));
};
// Start the connection.
$.connection.hub.start().done(function () {
});
});
</script>
</form>
</body>
</html>
Hope it helps.