Push Data from Server to Client Using ASP.NET SignalR
In this article, we will talk about ASP.NET SignalR and how to push data from server to client using ASP.NET SignalR. As you know that ASP.NET SignalR is a new library for ASP.NET developers that make developing real-time web functionality easy. SignalR allows bi-directional communication between server and client. Servers can now push content to connected clients instantly as it becomes available. SignalR supports Web Sockets, and falls back to other compatible techniques for older browsers. SignalR includes APIs for connection management (for instance, connect and disconnect events), grouping connections, and authorization.
SignalR is an ASP.NET library, which is designed to use the existing transport technologies underneath based on the client nature and the support it offers. SignalR is capable of pushing the data to a wide variety of clients such as a Web page, Window application, Window Phone App, etc. The onus is now removed from the developers of worrying about which server push transport to use and deciding on the fallbacks in case of unsupported scenarios.
Creating an Asp.Net SignalR Hub
Open Visual Studio and create an empty Asp.net MVC application named MyChatApplicationServer. Now open the NuGet packages, search and include Microsoft ASP.NET SignalR.
Now right click on the project, add the SignalR Hub class and name it as MyChatHub. Add the following code to the class.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | public class MyChatHub : Hub { public void BroadcastMessageToAll(string message) { Clients.All.newMessageReceived(message); } public void JoinAGroup(string group) { Groups.Add(Context.ConnectionId, group); } public void RemoveFromAGroup(string group) { Groups.Remove(Context.ConnectionId, group); } public void BroadcastToGroup(string message, string group) { Clients.Group(group).newMessageReceived(message); } } |
The HUB class also provides the properties Clients, Groups, Context and events like OnConnected, etc.
Finally you should also add Owin startup class to map the available hubs as shown below.
1 2 3 4 5 6 7 8 9 10 11 12 | [assembly: OwinStartup(typeof(MyChatApplicationServer.Startup))] namespace MyChatApplicationServer { public class Startup { public void Configuration(IAppBuilder app) { app.MapSignalR(); } } } |
Pushing Data to a Web Form Client
Now create a web form client project named WebClient and add a simple HTML file ChatWebClient.html with the following code. Add the references to the required script files.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.6.4.min.js"></script> <script src="Scripts/jquery.signalR-2.0.1.min.js"></script> <script src="http://localhost:32555/signalr/hubs/" type="text/javascript"></script> <script type="text/javascript"> $(function () { var myChatHub = $.connection.myChatHub; myChatHub.client.newMessageReceived = function (message) { $('#ulChatMessages').append('<li>' + message + '</li>'); } $.connection.hub.url = "http://localhost:32555/signalr"; $.connection.hub.start().done(function () { $('#btnSubmit').click(function (e) { myChatHub.server.broadcastMessageToAll($('#txtEnterMessage').val(), 'Web user'); }); }).fail(function (error) { console.error(error); });; }); </script> </head> <body> <div> <label id="lblEnterMessage">Enter Message: </label> <input type="text" id="txtEnterMessage" /> <input type="submit" id="btnSubmit" value="Send Message" /> <ul id="ulChatMessages"></ul> </div> </body> </html> |
There are two ways of implementing the client function one with proxy and other without. The above example is the one without a proxy.
In the connection start you may also mention which transport SignalR should use.
Pushing Data to a Windows Application Client
Let us add a windows app and subscribe to the SignalR host. Create a new windows application named WinFormClient and from the nugget packages install Microsoft ASP.NET SignalR .NET client package. In the Program.cs add the following code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | namespace WinFormClient { public partial class Form1 : Form { HubConnection hubConnection; IHubProxy hubProxy; public Form1() { InitializeComponent(); hubConnection = new HubConnection("http://localhost:32555/signalr/hubs"); hubProxy = hubConnection.CreateHubProxy("MyChatHub"); hubProxy.On<string>("newMessageReceived", (message) => lstMessages.Items.Add(message)); hubConnection.Start().Wait(); } private void btnSubmit_Click(object sender, EventArgs e) { hubProxy.Invoke("BroadcastMessageToAll", textBox1.Text, "Window App User").Wait(); } } } |
Once done go ahead and run both the web and Windows client. Enter the messages and look at how the message is getting pushed across both the clients though they are of a different nature. SignalR is capable of serving multiple connected clients irrespective of the client platform or technology.
Cheap and Best ASP.NET SignalR Hosting with ASPHostPortal.com
ASPHostPortal.com ASP.NET SignalR optimised hosting infrastructure features independent email, web, database, DNS and control panel servers and a lightning fast servers ensuring your site loads super quick! Reason why you should choose them to host your ASP.NET SignalR site:
[stextbox id=”asp_net_hosting” caption=”ASPHostPortal.com is Microsoft No #1 Recommended Windows Hosting Partner”]ASPHostPortal.com is Microsoft No #1 Recommended Windows and ASP.NET Spotlight Hosting Partner in United States. Microsoft presents this award to ASPHostPortal.com for the ability to support the latest Microsoft and ASP.NET technology, such as: WebMatrix, WebDeploy, Visual Studio 2012, .NET 4.5.2/ASP.NET 4.5.1, ASP.NET MVC 6.0/5.2, Silverlight 5 and Visual Studio Lightswitch. Click here for more information[/stextbox]
Easy to Use Tools – ASPHostPortal.com use World Class Plesk Control Panel that help you with single-click ASP.NET SignalR installation.
Best Programming Support – ASPHostPortal.com hosting servers come ready with the latest ASP version. You can get access directly to your MS SQL from their world class Plesk Control Panel.
Best Server Technology – The minimal specs of their servers includes Intel Xeon Dual Core Processor, RAID-10 protected hard disk space with minimum 8 GB RAM. You dont need to worry about the speed of your site.
Best and Friendly Support – Their customer support will help you 24 hours a day, 7 days a week and 365 days a year to assist you.
Uptime & Support Guarantees – They are so confident in their hosting services they will not only provide you with a 30 days money back guarantee, but also they give you a 99.9% uptime guarantee.