View Full Version : Simple SignalR example featuring Ext.Net.

Oct 23, 2014, 8:45 PM
Hello everybody,

While Anup's SignalR stockticker sample (https://examples2.ext.net/#/SignalR/Basic/StockTicker/) 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.


using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SimpleSignalR.Startup))]

namespace SimpleSignalR

public class Startup
public void Configuration(IAppBuilder app)


using 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
return string.Format("Probed at {0}", this.Stamp.ToShortDateString());


using 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);


<%@ 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">
<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>

Title="Probe client"
<ext:PageProxy />
<ext:Model ID="Model1" runat="server" IDProperty="Id" Name="Probe">
<ext:ModelField Name="Id" />
<ext:ModelField Name="Stamp" Type="Date" />
<ext:ModelField Name="ProbedAt" />
<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" />
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />

<ext:TaskManager ID="TaskManager1" runat="server" AutoRunDelay="60000">
<ext:Task Interval="60000">
<Update OnEvent="TaskManager1Task1_OnUpdate" />

<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 () {

Hope it helps.

Oct 24, 2014, 6:56 AM
Hi @Mimisss,

Thank you for sharing! That is a nice example.