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 භාවිතා කරන්න.