AJ Dev

May 27, 2013

Update Toastr & SignalR – A Match Made in Heaven

Filed under: General,Web Development — AJ @ 9:55 am

After creating my toastr post, a friend suggested marrying toastr and signalR and I thought that was a brilliant idea so I wired up a quick example. Clicking the ‘broadcast’ button will send a toast message to anybody who has the web page open!

Heres the zipped up project which shows toastr and signalr in action. Note, I ganked the signalr code directly from the signalr’s Home Page. The code was easy to retrofit into my project.

NOTE: My free Azure trial has expired so I have no example for this.

I was impressed as to how easy it was to setup SignalR:

Server Side:

Global.asax:

protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            RouteTable.Routes.MapHubs();
            RouteTable.Routes.MapConnection<MyConnection>("echo", "/echo");

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }

In the global.asax file, I wired SignalR via the ‘RouteTable.Routes.MapHubs()’ command. After this, I mapped ‘MyConnection’ to the ‘/echo’ url on the server (this is used in the client javascript).

MyConnection.cs:

 public class MyConnection : PersistentConnection
    {
        protected override Task OnReceived(IRequest request, string connectionId, string data)
        {
            // Broadcast data to all clients
            return Connection.Broadcast(data);
        }
    }

MyConnection.cs creates the persistant connection and broadcasts the data to all connected clients. Honestly, I copied this from SignalR’s home page.

Client Side javascript:

    $(function () {
        toastr.options = {
            "debug": false,
            "positionClass": "toast-top-right",
            "onclick": null,
            "fadeIn": 300,
            "fadeOut": 1000,
            "timeOut": 5000,
            "extendedTimeOut": 1000
        };

        var connection = $.connection('/echo');
        connection.received(function (data) {
            toastr.success(data, 'Toast Received');           
        });

        connection.start().done(function () {
            $("#broadcast").click(function () {
                connection.send($('#msg').val());
            });
        });

    })

In the client javascript, I first configure the toastr options (like in the previous post) and then setup the SignalR connection to listen to ‘/echo’ location (initially set on the server). Then, I set the received function to display the data in toastr. Finally, I start the connection and set the broadcast button to send a message to the server once the connection configuration is complete.

Open up multiple copies of the web site and submit a toast. You’ll notice that the message gets posted to all of your open pages.

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress