Simple SignalR example featuring Ext.Net.

  1. #1

    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
    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.
  2. #2
    Hi @Mimisss,

    Thank you for sharing! That is a nice example.

Similar Threads

  1. ASP.NET MVC5 Ext.Net and SignalR 2.1.0
    By Andrea in forum 2.x Help
    Replies: 4
    Last Post: Oct 16, 2014, 5:04 AM
  2. [CLOSED] SignalR Polling
    By PANAYIOTISP in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 06, 2014, 3:14 PM
  3. Unable to use StockTicker using SignalR
    By kavitha in forum 2.x Help
    Replies: 0
    Last Post: Jul 30, 2014, 8:59 AM
  4. SignalR example has been upgraded to v2 (from v1)
    By Daniil in forum Open Discussions
    Replies: 0
    Last Post: Dec 24, 2013, 5:01 AM
  5. Ext.NET and SignalR
    By PetrSnobelt in forum Open Discussions
    Replies: 3
    Last Post: Jun 13, 2012, 6:07 PM

Tags for this Thread

Posting Permissions