2014-10-27

Get database change notification in asp.net using SignalR


In this tutorial, I’m going to show you how to get real time notifications in an ASP.NET web application when there is a database change. I’m going to use SignalR and SqlDependency for that.

The tools I’ll be using through out this tutorial are Microsoft Visual Studio 2013 Ultimate Update 3 and Microsoft SQL Server 2012.

Let’s create a simple ASP.NET SignalR application first. For that, I’m creating a new web application and adding the SignalR libraries to it. We can install SignalR to our web application via “Manage Nuget Packages” option in visual studio. It’s the easiest way. Right click on the project from solutions explorer and click Manage Nuget Packages… There you can type SignalR on the search box and install it to your project.

Next step is to add OWIN Startup class to the project. Like below

using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;

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

namespace DatabaseNotification
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

We need a database for this web application. Let’s create a database called “Test” and a table called “DummyData”. For the simplicity, I’ve created only one column called “Message” – type nvarchar(max) in that database table.

image

Now I need to enable Broker for the database. For that, I’m going to SQL Server Management Studio and right click on the database –> Go to Properties. Then select Options. Set Broker Enable to True. Like below

image

If you don’t enable Service Broker for the database, query notifications will not be supported so you’ll get an System.InvalidOperationException exception.

Next step is to starts the listener for receiving dependency change notifications. For that, I’m adding SqlDependency.Start() method to the Application_Start() method in Global.asax file. Like below

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.SessionState;

namespace DatabaseNotification
{
    public class Global : System.Web.HttpApplication
    {
        protected void Application_Start(object sender, EventArgs e)
        {
            SqlDependency.Start(ConfigurationManager.ConnectionStrings["TestDB"].ConnectionString);
        }
    }
}

I’m passing the connection string to my database. Which looks like below in my web.config file

<connectionStrings>
  <add connectionString="Data Source=(LocalDB)\V11.0;Initial Catalog=Test;Integrated Security=True" name="TestDB" />
</connectionStrings>

Now I’ve successfully established a listener for receiving dependency change notifications from my database.

My next step is to create a hub. Right click on the project from Solution Explorer, Add –> SignalR Hub Class (v2)

Below is the code for my hub class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace DatabaseNotification
{
    public class NotificationsHub : Hub
    {
        public void NotfiyAllClients(string msg)
        {
            IHubContext context = GlobalHost.ConnectionManager.GetHubContext<NotificationsHub>();
            context.Clients.All.displayNotification(msg);
        }
    }
}

I have a method called NotifyAllClients() which accepts a string parameter. Inside that method, I’m calling a client side method called displayNotification() for all the connected clients.

Now my hub is there. Let’s create a web form. Below is the code behind for the web form.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;

namespace DatabaseNotification
{
    public partial class Messages : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            SendNotifications();
        }

        public void SendNotifications()
        {
            string message = string.Empty;
            string conStr = ConfigurationManager.ConnectionStrings["TestDB"].ConnectionString;

            using (SqlConnection connection = new SqlConnection(conStr))
            {
                string query = "SELECT [Message] FROM [dbo].[DummyData]";

                using (SqlCommand command = new SqlCommand(query, connection))
                {
                    command.Notification = null;
                    SqlDependency dependency = new SqlDependency(command);
                    dependency.OnChange += new OnChangeEventHandler(dependency_OnChange);
                    connection.Open();
                    SqlDataReader reader = command.ExecuteReader();

                    if (reader.HasRows)
                    {
                        reader.Read();
                        message = reader[0].ToString();
                    }
                }
            }
            NotificationsHub nHub = new NotificationsHub();
            nHub.NotifyAllClients(message);
        }

        private void dependency_OnChange(object sender, SqlNotificationEventArgs e)
        {
            if (e.Type == SqlNotificationType.Change)
            {
                SendNotifications();
            }
        }
    }
}

Let’s take a look at what each part of the code do. First few lines of the code behind is pretty basic. I’m calling a method called SendNotifications() inside the Page_Load() method.

Now let’s take a look at what’s inside the SendNotifications() method.

I’ve declared a string type variable called message. Then I’m getting the connection string for my database. Using that connection string I’m opening a SQL connection to my database. In this example I’m using a simple SQL to get the data from Message column. Make sure your SQL statement meet the below requirements otherwise the notification won’t function properly (Either it will not get fired at all or it will fire multiple times for a one change).

http://msdn.microsoft.com/library/ms181122.aspx

Then I’m setting the Notification object of the SQL command to null. That’s because I need to clear the Notification object associated with the command. Next I create a new instance of the SqlDependency and associate it with my SQL command object. Then I attach the change event handler which is responsible for calling the same SendNotifications() method once a change occurred. You can see that inside the SendNotifications() method, I’m checking the type of the SqlNotification before I’m calling the SendNotifications(). I want to capture the data change only. That’s why I have that condition check.

Then I open the connection and execute the query. If the query returns any rows, I read the first result and pass that to hub method - NotifyAllClients(). As I said above, that hub method is responsible for distributing the message.

Now let’s take a look at the client side implementation of this.

First of all, I need to add the references to jQuery library, SignalR hub and the SignalR library.

<script src='<%=ResolveClientUrl("~/Scripts/jquery-1.6.4.min.js") %>' type="text/javascript"></script>
<script src='<%=ResolveClientUrl("~/Scripts/jquery.signalR-2.1.2.min.js") %>' type="text/javascript"></script>
<script src='<%=ResolveClientUrl("~/signalr/hubs") %>' type="text/javascript"></script>

Note that how I make use of ResolveClientUrl method to get the URL relative to the current page. I said my hub is calling a client method called displayNotification(). So I need to have an implementation for that. Also, I need to start the SignalR connection between client and server. Below code shows that

<script>
    $(function () {
        var notify = $.connection.notificationsHub;

        notify.client.displayNotification = function (msg) {
            $("#newData").html(msg);
        };

        $.connection.hub.start();
    });
</script>

If you are not familiar with the SignalR code, please have a look at my other blog post Creating a chat application in ASP.NET with SignalR. It describes What each code do.

In this example, I’m setting the message to a span with id=newData. Below is the HTML body for my page

<body>
    <form id="form1" runat="server">
        <div>
            <span id="newData"></span>
        </div>
    </form>
</body>

As you can see, it’s very simple. I wanted to keep it simple so you can understand the concept better.

Below is the full client side code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Messages.aspx.cs" Inherits="DatabaseNotification.Messages" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src='<%=ResolveClientUrl("~/Scripts/jquery-1.6.4.min.js") %>' type="text/javascript"></script>
    <script src='<%=ResolveClientUrl("~/Scripts/jquery.signalR-2.1.2.min.js") %>' type="text/javascript"></script>
    <script src='<%=ResolveClientUrl("~/signalr/hubs") %>' type="text/javascript"></script>
    <script>
        $(function () {
            var notify = $.connection.notificationsHub;

            notify.client.displayNotification = function (msg) {
                $("#newData").html(msg);
            };

            $.connection.hub.start();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <span id="newData"></span>
        </div>
    </form>
</body>
</html>

Now let’s run it and see what’s happening. As you expected, there will be nothing displayed on the page. Let’s go to the Database and change the value in “Message” column. I changed the value “Hi SignalR” to “Hello SignalR”. Now you can instantly see the message on the browser.

image

This is a very basic example of how to trigger the database changes using SqlDependency and SignalR. You can download the source code from below.


Please note that SqlDependency will fire whenever there is a change but it won’t tell you which record got changed. It will simply return all the records according to the query. If you need to know what record got changed, you need to keep track of modified time in a separate column and query the results set according to that. I’m not going to talk about it in detail here.

Happy coding!

2014-09-28

Tips to increase the chance of winning Microsoft Imagine Cup User Experience Challenge

First of all I must say that I’m honored to be chosen as one of the judges in Microsoft Imagine Cup UX challenge in 2014. It’s so nice to see the incredible talents of the young generation. I’ve seen really good designs and UX skills from Imagine cup participants which are undoubtedly exceed the expectation of a student.

In this blog post I wish to talk about some common mistakes students are doing in the Imagine cup UX competition and some tips to improve the UX of your application. None of the ideas below represent Microsoft nor does it guarantee you will win the UX competition. But if you apply correctly, there is a good chance that at least your team name will end up in “honorable mentions”.

Why UX is important?

UX plays an important part in any application because it increase the productivity and custom satisfaction while decrease the support, maintenance and training costs.

Tips for designing the diagrams.

1) One of the most common mistake I’ve seen is, usage of incorrect notations. If you use symbols in UML notation, then make sure you are using it correctly. For an example, the diamond symbol denotes a decision/condition, do not use it to display a process.

image

If you don’t know much about UML, then don’t use it. We do not give scores for using a standard notation. Simply use rectangles and arrows. As long as your diagram flow is clear and understandable, it should be fine.

2) Usage of arrow heads must be done carefully. There are bidirectional flows as well as unidirectional flows. Choose which kind of arrow you should use to depict the flow of your application.

Tips for designing the Wireframes

1) Don’t use colors in your wireframes. It’s misleading. It suppose to be a WIRE FRAME. Keep it monochrome as much as possible.

2) Do not use confusing titles/descriptions. Use simple English and make sure your target audience can understand the words/symbols you’ve used in your application.

Tips for designing the Visual Target

1) Check the color compatibility when you add colors to your visual target. Incorrect usage of colors can lead to an unsuccessful project regardless of the functionality. Below is a good example for almost unreadable content due to the poor choice of colors.

example2

Always look at the colors of successful products and think why you like those colors. Try to match your colors similarly.

WebAIM has an Online Color Contrast Checker that you can use for free. You can darken/lighten the foreground/background colors on the spot until it passes.

2) Don’t provide too small buttons. Buttons should have a decent size so it’s easily clickable/touchable.

3) Make sure your application is self-explanatory so you can get rid of instructions on how to use your application.

4) If your application have a search box, do not make users to search for the search box (Don’t put that with other textboxes). Place it in a clearly visible and quickly recognizable place.

5) Make sure you leave enough space in your text box fields so users can enter the relevant information. Adjust the width of the textboxes according to what sort of information are likely going to be entered in it. For an example, do not provide a long textbox where user have to input the first name. On the other hand, do not provide a very small textbox where user have to enter the address!

6) Make the more important content more prominent (Increasing the font size, adjusting the whitespace around the content etc.).

7) Check the alignments of your application layout and positioning of the elements. Remember that visual target should be in production quality. Do not randomly specify sizes for the elements and place it on the screen.

8) If you are using images (such as logos) on your visual target, make sure you do not stretch those. Stretched or badly cropped images are a big no no for an application in shipping stage.

General Tips

1) Do not use texting language. It’s confusing and takes time to read and interpret. Check the spelling mistakes (You can use a spell checker) before submitting the files.

2) Have a uniformity when it comes to colors and fonts. Do not use a wide range of colors, font faces and font sizes unnecessarily. Remember that this fact is not always true. This depends on your target audience and what type of application you are developing. For an example, if it’s a game then you can’t actually keep your color usage to minimum.

I hope the above tips will help you to design your application to industry level and increase the overall UX of your application. As always, we are looking forward to see some awesome ideas from blossoming techies. Smile

Good luck and wish you all the very best for the competition!

2014-05-11

Programmatically change the connection string in web.config file.

Let’s say you have the below connection string in your web.config file and you need to change that dynamically.

<connectionStrings>  
<add name="DefaultConnection"
connectionString="Data Source=(LocalDb)\v11.0;AttachDbFilename=|DataDirectory|\test.mdf;
Initial Catalog=test;Integrated Security=True"

providerName="System.Data.SqlClient" />
</connectionStrings>

You can use the below code to change the connection string programmatically.


using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Web.Configuration;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ForumsTest
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Configuration config = WebConfigurationManager.OpenWebConfiguration("~");
ConnectionStringsSection sec = (ConnectionStringsSection)config.GetSection("connectionStrings");
sec.ConnectionStrings["DefaultConnection"].ConnectionString = "Set the connection string here";
config.Save();
}
}
}

On the first line, I’m getting a reference to the web.config file.

On the second line I’m getting the section connectionStrings.

On the third line, I’m getting the specific connection string I want to change. In this example, I’m going to change the connection string named by “DefaultConnection”. Then I set the property value ConnectionString to the new value.

Finally, I’m saving the changes to the configuration.

Keep in mind that editing the web.config file will cause restarting the application pool so think twice before you going in this approach. If you can help it, avoid dynamically changing the web.config file since it’s not a recommended practice in ASP.NET web development.

2014-05-10

To Tier or Not To Tier

Before deploying the application in to tiers, you must decide carefully whether you actually need it.

Deploying in tiers will be expensive since you would have to pay for the networking cost and hardware cost for the servers. On the other hand, it will increase the maintainability of the projects since if you do some change at one tier, you only need to deploy the changes to only one server. Deploying in a layers will be relatively cheaper.

If the developers of each tier is going to be in separate countries, then it will make easier for them to go for a tier architecture because then they can handle the deployment in their own server at their country. But keep in mind that it will decrease the performance so badly since the inter communication between the servers would be needed. With the help of techniques like caching, you can reduce the round trips though. If you prefer to have a good flexibility and scalability, then go for tiered architecture.

Scalability could also be achieved in a layered architecture if you deploy the application in a web farm. But tiered architecture would be more scalable according to the situation. For an example, let's say you need to improve the resources in data access/data storage area. Then if you use a layered architecture you can't directly increase the resources for only data access layer. What you can do is increase the resources for whole application. But again, you can't guarantee those resources will only be used by the data access layer. It will be shared among other layers too. But in a tiered architecture, you can easily increase the resources on data access tier.
 
In Web Farms, there will be no separate resources available for separate layers. But in tiered architecture there will be individual resources for each tire. So if you need to scale up a one tire, you can easily do that by upgrading the resource in that particular server. In web farm situation, you can't individually increase the resources for separate layers. In a case of increasing the resources only for some particular layers, tiered architecture would be much easier. If you want to simply increase the resources for the whole application, then a layered application hosted in the web farms would do that.

In my opinion, it will be easier to monitor the performance of each area of the application, if you host it in tiers.

Being said all the above, this kind of decision cannot be taken by just reading a blog post. It will require a better understanding of the project requirements, budget etc. My efforts are to give you a rough idea on deciding whether to go with the tiered approach or not. It’s a critical decision in your project so I strongly suggest to do more research on the subject before implementing it.

2014-01-05

SignalR 1.x භාවිතයෙන් විනාඩි කිහිපයක් ඇතුලත අපේම chat application එකක් සාදා ගනිමු

පාර්ශ්වික ප්‍රකාශන හිමිකම © 2012 Microsoft. සියලුම හිමිකම් ඇවරිණි. Microsoft සමාගමෙහි අන්තර්ගතය රුචිර ගමගේ විසින් කල පරිවර්තනයෙහි අඩංගුව ඇත. Microsoft සමාගමෙහි අවසරය ඇතුව පිටපත් කරන ලදී.

ASP.NET SignalR යනු ඔබගේ ASP.NET applications සඳහා real-time web functionality පහසුවෙන් එකතු කරගත හැකි නව library එකකි. Real-time web functionality යනු server-side code මගින් සමබන්ධ වී ඇති සියලුම clients වෙත දත්ත ලැබුනු සැනින් යැවීමේ හැකියාවයි.

ඔබ සමහර විට අසා ඇති HTML5 Web socket API එක ගැන. එමගින් ඔබට web browser එක සහ server එක අතර කාර්යක්ෂම bidirectional සම්බන්ධතාවයක් ගොඩ නගා ගැනීමට පුළුවන්. Web browser එකට සහ server එකට Web Socket භාවිතා කිරීමේ පහසුකම පවතී නම් SignalR, Web Socket භාවිතා කරනු ලබයි. නැතහොත්, එය අනිකුත් ක්‍රම සන්ධහා යොමු වෙයි. කුමක් උවත් ඔබගේ code එක නොවෙනස්ව පවතී.

Client සහ server එක අතර සම්බන්ධතා (සන්ධි වීම්, විසන්ධි වීම්) කළමනාකරණය කිරීම සඳහාද authorization සඳහාද connection වර්ග කිරීමටද SignalR, API එකක් සපයයි.

SignalR මූලික පියවර

SignalR භාවිතා කරමින් real-time chat application එකක් සාදා ගන්න හැටි මෙම පරිච්ඡේදයෙන් පෙන්වා දෙයි. හිස් ASP.NET Web application එකකට SignalR එකතු කර, පණිවුඩ යැවීමට සහ පෙන්වීමට HTML පිටුවක් සාදා ගන්න ආකාරය මෙහි පැහැදිලි කරයි.

දළ විශ්ලේෂණය

මෙම පරිච්ඡේදයෙන් සරල browser-based chat application එකක් සාදා ගන්නා ආකාරය පෙන්නුම් කරමින් SignalR development වලට හැඳින්වීමක් කරනු ලබයි. හිස් ASP.NET Web application එකකට SignalR එකතු කර ගන්නා ආකාරය, Clients ලා වෙත පණිවුඩ යැවීම සඳහා hub class එකක් සාදා ගන්නා ආකාරය, Users ලට chat පණිවුඩ යැවීම සහ ලබාගැනීම සඳහා HTML පිටුවක් සාදා ගන්නා ආකාරය මෙම පරිච්ඡේදයෙන් විස්තර කරයි. මෙසේම, MVC View එකක් භාවිතා කරමින් MVC 4 සඳහා chat application එකක් නිර්මාණය කර ගන්න ආකාරය දැන ගැනීමට දෙවන පරිච්ඡේදය බලන්න.

සටහන: මෙම පාඩම මගින් version 2.0 භාවිතයෙන් SignalR application එකක් සාදා ගන්න ආකාරය පෙන්වයි. SignalR 1.x සහ 2.0 අතර ඇති වෙනස්කම් සඳහා Upgrading SignalR 1.x Projects සහ Visual Studio 2013 Release Notes බලන්න.

SignalR යනු, සජීවී user ක්‍රියාදාමයන් හෝ real-time දත්ත වෙනස් වීම් දැන ගැනීමට අවශ්‍ය web applications ගොඩ නැංවීම සඳහා සැකසුණු open-source .NET library එකකි. Real-time applications වලට උදාහරණ වශයෙන් social applications, multiuser ක්‍රීඩා, ව්‍යාපාරික ගනුදෙනු සඳහා භාවිතා වන applications, ප්‍රවෘත්ති, කාලගුණය, හෝ මූල්‍ය වෙනස් වීම් දක්වන applications දක්වන්නට පුළුවන්.

SignalR, Real-time applications ගොඩ නැගීමේ කාර්ය සරල කරයි. එය ASP.NET Server Library එකකින් සහ JavaScript Client Library එකකින් සමන්විතයි බැවින් client-server සම්බන්ධතා කළමනාකරණය කිරීමට සහ නව දත්ත clients ලට යැවීමට පහසු කරයි. දැනට තියන ASP.NET application එකකට SignalR එකතු කොට real-time functionality එක ලබා ගැනීමේ පහසුකමද පවතී.

මෙම පාඩමෙන් පහත සඳහන් SignalR development කාර්යයන් පෙන්වයි.

  • SignalR library එක ASP.NET web application එකකට එකතු කර ගන්නා ආකාරය.
  • දත්ත clients ලා වෙත යැවීම සඳහා hub class එකක් සාදා ගන්නා ආකාරය.
  • Web page එකක් මගින් පණිවුඩ යැවීමට සහ hub එකෙන් ලැබෙන නව පණිවුඩ web page එක මත පෙන්වීමට SignalR jQuery library එක භාවිතා කරන ආකාරය.

පහත දැක්වෙන රූපයෙන් browser එකක run වන chat application එකක් පෙන්වයි. සෑම නව user කෙනෙකුට ම විස්තර ප්‍රකාශ කිරීමේ හැකියාව සහ chat එකට සම්බන්ධ වීමෙන් පසු අනිකුත් users ලා ප්‍රකාශ කරන විස්තර බැලීම හැකියාව එහි ඇත.

clip_image001

Project එක සාදා ගන්න ආකාරය

හිස් ASP.NET web application එකකට SignalR එකතු කොට chat application එකක් සාදා ගන්න ආකාරය මෙම කොටසින් පෙන්වයි.

මූලික අවශ්‍යතා:

  • Visual Studio 2010 SP1 හෝ 2012. ඔබට Visual Studio නැතිනම් මෙමගින් Visual Studio 2012 Express Development tool නොමිලේ බාගත හැක.
  • Microsoft ASP.NET and Web Tools 2012.2. Visual Studio 2012 සඳහා මෙම installer එක මගින් SignalR Templates ඇතුළු නව ASP.NET features එකතු කරනු ලබයි. Visual Studio 2010 SP1 සඳහා මෙවැනි installer එකක් නැත, නමුත් NuGet Package Manager එක මගින් SignalR install කර ගැනීමෙන් මෙම tutorial එක Visual Studio 2010 SP1 මගින් ද කල හැක.

Visual Studio 2012 භාවිතා කොට හිස් ASP.NET Web Application එකකට SignalR library එක එකතු කර ගන්නා ආකාරය පහත පියවර මගින් පෙන්වයි:

1. Visual Studio open කර ASP.NET Empty Web Application එකක් හදන්න.

clip_image002

2. Tools -> Library Package Manager -> Package Manager Console වෙත ගොස් Package Manager Console එක open කරන්න. Console window වෙහි පහත සඳහන් command එක run කරන්න.

Install-Package Microsoft.AspNet.SignalR -Version 1.1.3

මෙම command එක මගින් SignalR install කරනු ලබයි.

3. Solution Explorer හි project එක මත right click කර Add | Class තෝරන්න. නම වශයෙන් ChatHub.cs type කර එය project එකට එකතු කරන්න.

4. Solution Explorer වෙත ගොස් Scripts folder එක විදහන්න. එහිදී ඔබට jQuery සහ SignalR සඳහා වූ script libraries දැක ගත හැක.

clip_image003

5. පහත සඳහන් code එක ChatHub class එකෙහි type කරන්න.

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
public class ChatHub : Hub
{
public void Send(string name, string message)
{
// Clients ලා යාවත්කාලීන කිරීමට broadcastMessage method එක කතා කිරීම.
Clients.All.broadcastMessage(name, message);
}
}

6. Solution Explorer හි project එක මත right click කර, Add | New Item click කරන්න. Add New Item dialog එකෙන්, Global Application Class එක තෝරා Add button එක click කරන්න.

clip_image004

7. පහත සඳහන් code එක Global.asax class එකෙහි using statements වලට යටින් එකතු කරන්න.

using System.Web.Routing;
using Microsoft.AspNet.SignalR;

8. SignalR hubs සඳහා default route එක register කිරීමට, පහත සඳහන් code එක Global.asax class එකෙහි Application_Start method එක තුල ලියන්න.

// Default hubs route එක register කිරීම: ~/signalr/hubs
RouteTable.Routes.MapHubs();

9. Solution Explorer හි project එක මත right click කර, Add | New Item click කරන්න. Add New Item dialog එකෙන්, HTML Page එක තෝරා Add button එක click කරන්න.

10. එම HTML Page එක මත right click කර Set As Start Page මත click කරන්න.

11. එම HTML පිටුවෙහි පහත සඳහන් code එක ඇතුළත් කරන්න.

<!DOCTYPE html>
<html>
<head>
<title>SignalR Simple Chat</title>
<style type="text/css">
.container {
background-color: #99CCFF;
border: thick solid #808080;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
<ul id="discussion">
</ul>
</div>
<!--Script references. -->
<!--jQuery library එකෙහි reference එක එකතු කිරීම. -->
<script src="/Scripts/jquery-1.6.4.min.js" ></script>
<!--SignalR library එකෙහි reference එක එකතු කිරීම. -->
<script src="/Scripts/jquery.signalR-1.1.3.js"></script>
<!--Auto generated SignalR hub script එකෙහි reference එක එකතු කිරීම. -->
<script src="/signalr/hubs"></script>
<!--පණිවුඩ යැවීම සහ web පිටුව යාවත්කාලීන කිරීමට script එක එකතු කිරීම. -->
<script type="text/javascript">
$
(function () {
// Hub එක reference කිරීමට proxyයක් සෑදීම.
var chat = $.connection.chatHub;
// පණිවුඩ ප්‍රචාරණය කිරීම සඳහා function එකක් සෑදීම.
chat
.client.broadcastMessage = function (name, message) {
// නම සහ පණිවුඩය HTML encode කිරීම.
var encodedName = $('<div />').text(name).html();
var encodedMsg = $('<div />').text(message).html();
// Page එකට පණිවුඩය එකතු කිරීම.
$
('#discussion').append('<li><strong>' + encodedName
+ '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
};
// User name එක ලබා ගැනීම සහ එය පණිවුඩ මුලට එකතු කිරීම සඳහා තැන්පත් කිරීම.
$
('#displayname').val(prompt('Enter your name:', ''));
// ප්‍රථම focus එක පණිවුඩ ඇතුළත් කරන textbox එකට පිහිටුවීම.
$
('#message').focus();
// සම්බන්ධතාව ආරම්භ කිරීම.
$
.connection.hub.start().done(function () {
$
('#sendmessage').click(function () {
// Hub එකෙහි Send method එකට කථා කිරීම.
chat
.server.send($('#displayname').val(), $('#message').val());
// Textbox එක හිස් කර ඊලග පණිවුඩය සඳහා focus එක යලි පිහිටුවීම.
$
('#message').val('').focus();
});
});
});
</script>
</body>
</html>

12. සියලුම files save කරන්න.

සාදා ගත් project එක run කරන ආකාරය

1. Debug mode එකෙන් project එක run කිරීමට F5 ඔබන්න. එවිට browser එකෙහි HTML page එක දිස් වී user name එක ඇතුළත් කිරීමට prompt කරයි.

clip_image001[1]

2. User name එකක් ඇතුළත් කර OK කරන්න.

3. Browser එකෙහි address bar එකෙහි ඇති URL එක copy කරගෙන තවත් browsers දෙකක් open කර එම address එක දෙකෙහි ම paste කරන්න. නව browsers දෙකට ම අලුත් user name දෙකක් ඇතුල් කරන්න.

4. සෑම browser එකෙහි ම textbox එකෙහි කුමක් හෝ type කර Send button එක click කරන්න. ඔබ type කරපු දෙය සෑම browser එකෙහි ම දිස් විය යුතුයි.

සටහන: මෙම සරල chat application එක පසුගිය සංවාද server එකෙහි තියා ගන්නේ නැත. Hub එක දැනට සිටින users ලා සියල්ලටම පණිවුඩ විකාශය කරයි. පසුව chat එකට එකතු වන users ලා දකින්නේ ඔවුන් chat එකට එකතු වූ වෙලාවේ සිට විකාශය වූ පණිවුඩ පමණි.

පහත දැක්වෙන screen shot එක මගින් browsers තුනක run වන chat application එක පෙන්වයි. එක් browser එකකින් පණිවුඩයක් යැවූ විට browsers සියල්ලෙහිම එය දිස් වෙයි.

clip_image002[1]

5. Application එක run වන Visual Studio එකෙහි Solution Explorer හි, Script Documents විහිදුවා එහි ඇති hubs script file එක බලන්න. SignalR library එක මගින් application එක run කරන අවස්ථාවේ එය සාදයි. මෙම script file එක මගින් jQuery script එක සහ server-side code එක අතර සිදු වන සන්නිවේදනය කළමනා කරයි.

clip_image003[1] 

Code එක පරීක්ෂා කිරීම

මෙම SignalR chat application එක මගින් ප්‍රාථමික SignalR development කාර්යයන් දෙකක් පෙන්වයි: Server එකෙහි ප්‍රධාන සම්බන්ධීකරණ object එක ලෙස hub එක සෑදීම, පණිවුඩ යැවීම සහ ලබා ගැනීම සඳහා SignalR jQuery library එක භාවිතා කිරීම.

SignalR Hubs

Code සාම්පලයෙහි ChatHub class එක Microsoft.AspNet.SignalR.Hub class එකෙන් උපත ලබයි. Hub class එකෙන් derive කිරීම SignalR Application එකක් සෑදීමට ප්‍රයෝජනවත් මාර්ගයකි. ඔබට Hub class එකෙහි public methods සාදා එම methods, web page එකෙහි ඇති jQuery scripts මගින් පාවිච්චි කල හැක.

මෙම Chat code එකෙහි, clients ලා නව පණිවුඩ යැවීම සඳහා ChatHub.Send method එක කතා කරයි. Hub එක Clients.All.broadcastMessage method එක කතා කිරීමෙන් සියලුම clients ලා වෙත පණිවුඩය යවයි.

Send method එක hub සංකල්ප කිහිපයක් පෙන්නුම් කරයි:

  • Clients ලට කතා කිරීම සඳහා hub එකෙහි public methods සෑදීම.
  • Hub එකට සම්බන්ධිත සියලුම clients ලා access කිරීම සඳහා Microsoft.AspNet.SignalR.Hub.Clients dynamic property එක භාවිතා කිරීම.
  • Clients ලා යාවත්කාල කිරීම සඳහා client ලා මත jQuery function (උදා:- broadcastMessage function එක) එකක් කතා කිරීම.
public class ChatHub : Hub
{
public void Send(string name, string message)
{
// Clients ලා යාවත්කාලීන කිරීමට broadcastMessage method එක කතා කිරීම.
Clients.All.broadcastMessage(name, message);
}
}

SignalR සහ jQuery

SignalR jQuery library එක උපයෝගී කර ගනිමින් SignalR hub එකක් සමග සන්නිවේදනය කරන ආකාරය Code සාම්පලයෙහි ඇති HTML Page එක පෙන්වයි. Code එකෙහි ඇති වැදගත්ම කාර්යයන් වන්නේ hub එක සම්බන්ධ කර ගැනීම සඳහා proxy එකක් සාදා ගැනීම, server එක මගින් clients ලා වෙත දත්ත යැවීම සඳහා function එකක් සෑදීම, සහ hub එක වෙත පණිවුඩ යැවීම සඳහා සම්බන්ධතාවක් ආරම්භ කිරීම.

පහත සඳහන් code එක මගින් hub එක සඳහා proxy එක සාදයි.

var chat = $.connection.chatHub; 

සටහන: JavaScript එකෙන් server class එකට සහ එහි members ලට reference තිබෙන්නේ camelCase එකෙන්ය. Code සාම්පලය බැලූ විට ඔබට පෙනේවී C# ChatHub class එක JavaScript එකෙහි භාවිතා කරන්නේ chatHub ලෙසටය.

පහත code එකෙන් පෙන්වන්නේ script එකෙහි callback function එකක් සාදා ගන්නා ආකාරයයි. සෑම client කෙනෙක්ගේම දත්ත යාවත්කාලීන කිරීමට server එකෙහි ඇති hub class එක මගින් මෙම function එක කතා කරයි. HTML encode කිරීම සඳහා තිබෙන පේළි දෙක අවශ්‍යම නැත. එය තිබෙන්නේ script injection වැලැක්වීමටය.

    chat.client.broadcastMessage = function (name, message) {
// නම සහ පණිවුඩය HTML encode කිරීම.
var encodedName = $('<div />').text(name).html();
var encodedMsg = $('<div />').text(message).html();
// Page එකට පණිවුඩය එකතු කිරීම.
$
('#discussion').append('<li><strong>' + encodedName
+ '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
};

පහත සඳහන් code එකෙන් hub එක සමග සම්බන්ධතාවක් විවෘත කරන ආකාරය පෙන්වයි. සම්බන්ධතාවය පටන් අරගෙන, HTML පිටුවෙහි ඇති Send button එකෙහි click event එක හැසිරවීම සඳහා function එකක් එයට pass කරයි.

සටහන: event handler එක ක්‍රියාත්මක වීමට පෙර සම්බන්ධතාවය පිහිටුවා ගැනීම මෙම ක්‍රමය මගින් සහතික කරයි. 

    $.connection.hub.start().done(function () {
$
('#sendmessage').click(function () {
// Hub එකෙහි Send method එකට කථා කිරීම.
chat
.server.send($('#displayname').val(), $('#message').val());
// Textbox එක හිස් කර ඊලග පණිවුඩය සඳහා focus එක යලි පිහිටුවීම.
$
('#message').val('').focus();
});
});

ඊළඟ පියවර

SignalR යනු Real-time web applications සෑදීම සඳහා යොදා ගත හැකි framework එකක් බව ඔබ ඉගෙන ගත්තා. තවදුරටත්, SignalR development කාර්යයන් වන: ASP.NET applications එකකට SignalR එකතු කරගන්නේ කොහොමද, Hub class එකක් සාදා ගන්නේ කොහොමද සහ hub එකකින් පණිවුඩ යවන්නේ සහ ලබාගන්නේ කොහොමද යන්නත් ඉගෙන ගත්තා.

ඔබට මෙම පාඩමෙහි සඳහන් sample application එක හෝ අන්තර්ජාලයෙහි ඇති වෙනත් ඕනෑම SignalR application එකක් හෝ සාදා hosting provider කෙනෙකු යටතේ deploy කල හැක. Microsoft මගින් Websites දහයක් දක්වා නොමිලේ host කිරීමට Windows Azure trial account එකක් සපයයි. Sample SignalR application එක host කරන ආකාරය දැන ගැනීමට මෙය බලන්න Publish the SignalR Getting Started Sample as a Windows Azure Web Site. Visual Studio web project එකක් Windows Azure web site එකකට deploy කරන ආකාරය සවිස්තරාත්මකව දැන ගැනීමට Deploying an ASP.NET Application to a Windows Azure Web Site බලන්න.

තවදුරටත් SignalR පිළිබඳව ඉගෙන ගැනීමට සහ source codes ලබා ගැනීමට සඳහා පහත සඳහන් websites භාවිතා කරන්න.