PDA

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



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

While Anup's SignalR stockticker sample (http://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.

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

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

SimpleHub.cs

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

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.

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

Thank you for sharing! That is a nice example.