بسم الله الرحمن الرحیم

دوره  آموزشی SignalR به زبان فارسی

ایجاد پروژه Chat با SignalR

بخش اول
بخش دوم

بخش سوم

بخش چهارم

بخش پنجم- شروع ایجاد پروژه SignalR

بخش ششم - مروری بر مفاهیم SignalR

بخش هفتم- ایجاد پروژه Chat با SignalR

بخش هشتم - ایجاد پروژه Chat با SignalR در ASP.NET MVC

بخش نهم- ساخت یک Timer سمت سرور با SignalR

بخش دهم - آموزش ساخت یک پروژه SignalR با SQLDepedency در ASP.NET MVC

بسم الله الرحمن الرحیم

دوره  آموزشی SignalR به زبان فارسی

ایجاد پروژه Chat با SignalR

بخش اول
بخش دوم

بخش سوم

بخش چهارم

بخش پنجم- شروع ایجاد پروژه SignalR

بخش ششم - مروری بر مفاهیم SignalR

بخش هفتم- ایجاد پروژه Chat با SignalR

بخش هشتم - ایجاد پروژه Chat با SignalR در ASP.NET MVC

بخش نهم- ساخت یک Timer سمت سرور با SignalR

بخش دهم - آموزش ساخت یک پروژه SignalR با SQLDepedency در ASP.NET MVC

در این آموزش می خواهیم به وسیله SignalR یک برنامه چت ساده را که بر اساس browser-based اجرا خواهد شد، بنویسیم.

شما کتابخانه SignalR را به یک پروژه ASP.NET اضافه خواهید کرد و همچنین کلاس Hub خود را برای ارسال پیام ها به کلاینتها ایجاد، و درنهایت یک صفحه HTML برای نمایش پیام ها و ارسال آنها توسط کاربران طراحی خواهیم کرد.
در آموزش بعدی طریق ایجاد همین پروژه را با MVC بررسی می کنیم، اما باید پیش زمینه ها را در همین جا آموزش ببینید و در آموزش بعدی فقط مباحث جدید را مطرح می کنیم به دلیل ساده تر بودن مباحث در ASP.NET ترجیح می دهیم ابتدا مباحث را اینجا آموزش بدهیم و بعد فقط پروژه را به MVC تبدیل کنیم.

ما در اینجا از SignalR 2 استفاده خواهیم کرد برای مشاهده اطلاعات بیشتر در مورد نسخه های قبل SignalR به آموزش های قبلی مراجعه کنید.

SignalR یک کتابخانه متن باز (Open Source) جهت ایجاد برنامه های Live که با کاربران در ارتباط هستند یا برنامه هایی که به صورت Real Time بروز رسانی می شوند، ایجاد شده است. مثال: مانند بازی های آنلاین (که قبلا یک نمونه از این بازی ها را به همراه کد آن به شما معرفی کردم، برای مشاهده این اطلاعات به بخش های ابتدایی مراجعه کنید)، برنامه های اجتماعی (social applications)، business collaboration، برنامه های اخبار، برنامه های کارشناسی آب وهوا، برنامه های مالی (مثل بورس)
اغلب این برنامه ها Real Time خوانده می شوند.

SignalR فرایند ساخت برنامه های Real Time را بسیار ساده کرده است، اگر قبلا تجربه ای در این زمینه کسب کرده باشید، خواهید دید با SignalR چقدر ساده می توان یک برنامه Real Time را نوشت.
با استفاده از کتابخانه های ASP.NET و JavaScript  می توانید به سادگی مدیریت ارتباط بین client-server و ارسال و همچنین بروز رسانی کلاینت ها را انجام دهید.

در این آموزش ما چند مرحله خواهیم داشت:
اضافه کردن کتابخانه SignalR به یک پروژه ASP.NET web application
ساخت یک کلاس hub برای قراردادن اطلاعات در کلاینت
ساخت کلاس OWIN startup برای مدیریت و تنظیمات پروژه
استفاده از کتابخانه SignalR jQuery در صفحات وب برای ارسال پیام ها و همچنین نمایش اطلاعاتی که توسط Hub بروز می شوند

در تصویر زیر نسخه ای از برنامه که در Browser اجرا شده است را نمایش می دهد، هر کاربر جدید می تواند پیام های خود را ارسال کند و پیام های ارسالی که پس از ورودش ثبت شده است را مشاهده کند.

Set up the Project

در این بخش می خواهیم با استفاده از Visual Studio 2013 و SignalR 2 و همچنین یک پروژه ASP.NET web application که به صورت empty ایجاد خواهد شد، برنامه چت خود را ایجاد کنیم.

برنامه Visual Studio 2013 را باز کنید و از قسمت Web  گزینه ASP.NET Web Application را انتخاب کنید.
نام پروژه را مطابق تصویر زیر قرار دهید.

پس از انتخاب گزینه بالا پنجره New ASP.NET Project نمایش داده می شود در این پنجره گزینه Empty را انتخاب و سایر گزینه ها را مانند تصویر زیر تنظیم و گزینه Create Project را انتخاب کنید (ok را انتخاب کنید):




در Solution Explorer بر روی پروژه کلیک راست کنید و گزینه Add را انتخاب کنید و سپس (SignalR Hub Class (v2 را انتخاب و نام این کلاس را ChatHub.cs بگذارید و درنهایت این کلاس را به پروژه خود اضافه کنید.

شما همچنین می توانید SignalR را توسط Tools | Library Package Manager | Package Manager Console و اجرای دستور زیر به پروژه خود اضافه کنید.

install-package Microsoft.AspNet.SignalR

اگر شما از Visual Studio 2012 استفاده می کنید، (SignalR Hub Class (v2 برای شما وجود نخواهد داشت، شما می بایست یک کلاس ساده ایجاد و نام آن را ChatHub قرار دهید.

اگر Solution Explorer خود بخش Scripts را مشاهده کنید، فایل های Script برای jQuery  و SignalR که اضافه شده اند را می توانید مشاهده کنید.

کد کلاس ChatHub را که ایجاد کردیم باید به صورت زیر تغییر پیدا کند:

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
}

در Solution Explorer کلیک راست کنید و Add | OWIN Startup Class را انتخاب و نام کلاس را Startup بگذارید،
مانند مرحله قبل اگر شما از Visui Visual Studio 2012 استفاده می کنید، OWIN Startup Class برای شما وجود نخواهد داشت، شما می بایست یک کلاس ساده ایجاد و نام آن را Startup  قرار دهید.
کد این کلاس را به صورت زیر تغییر دهید

using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Any connection or hub wire up and configuration should go here
            app.MapSignalR();
        }
    }
}

درون Solution Explorer کلیک راست کنید و گزینه Add | HTML Page را انتخاب و یک صفحه جدید با نام index.html ایجاد کنید.
حال روی صفحه ایجاد شده کلیک راست کنید و این صفحه را به عنوان Set as Start Page مشخص کنید.
کد زیر در این صفحه قرار دهید:

<!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. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-1.6.4.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.1.0.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="signalr/hubs"></script>
    <!--Add script to update the page and send messages.--> 
    <script type="text/javascript">
        $(function () {
            // Declare a proxy to reference the hub. 
            var chat = $.connection.chatHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message. 
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
            };
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.  
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub. 
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment. 
                    $('#message').val('').focus();
                });
            });
        });
    </script>
</body>
</html>

پروژه را ذخیره کنید .
حال پروژه را با کلید F5 را بزنید تا به صورت debug mode پروژه اجرا شود. هنگامی که صفحه وب سایت لود شود یک پنجره برای مشخص کردن نام کاربری نمایش داده می شود.
یک UserName وارد کنید.

آدرس درون Address Bar کپی کنید و یک صفحه جدید از همین وب سایت باز کنید و در آن نیز یک نام کاربری جدید وارد نمایید.
در این مثال ساده ما گفتگو صورت گرفته بین کاربران را ثبت نمی کنیم. در واقع هر کاربر پس از وارد شدن به برنامه اطلاعاتی که دیگران می فرستند را می تواند مشاهده کند و اطلاعات قبلی نمایش داده نخواهد شد.



اگر داخل پوشه Script Documents در Solution Explorer نگاه کنید، یک فایل Script با نام hubs که توسط SignalR به صورت داینامیک و runtime ایجاد می شود، وجود دارد. این فایل مدیریت ارتباطات بین jQuery script  و کدهای server-side بر عهده دارد.

بررسی کد SignalR

در این بخش کدهایی که نوشته ایم را بررسی می کنیم.
در برنامه چت  SignalRکه نوشتیم، دو بخش اصلی وجود دارد: یک) بخش مربوط به Hub که وظیفه هماهنگی را بر روی سرور بر عهده دارد، دو) بخش کتابخانه SignalR jQuery  که وظیفه ارسال و دریافت پیام ها را بر عهده دارد.

SignalR Hubs

در کد نمونه کلاس ChatHub یک کلاس مشتق شده از کلاس Microsoft.AspNet.SignalR.Hub است. مشتق شدن از کلاس Hub، یک روش صحیح در ساخت برنامه SignalR است. شما می توانید متدهای خود را به صورت Public در این کلاس تعریف کنید و سپس از طریق Script ها، درون صفحات وب به متدها دسترسی پیدا کنید.
در کد برنامه چت، کلاینت ها برای ارسال پیام باید متد ChatHub.Send را فراخوانی کنند و چون ما در Hub خود به صورت سراسری (Clients.All.broadcastMessage) تنظیم کرده ایم، Hub با دریافت یک پیام آن را برای تمامی Client ها ارسال می کند.
 

در متد Send چندین مفهوم Hub را نشان داده می شود:

متدهای Public درون یک Hub تعریف می شوند تا کلاینتها بتوانند آنها را فراخوانی کنند
با استفاده از Microsoft.AspNet.SignalR.Hub.Clients می توان به تمامی کلاینت های متصل شده به Hub دسترسی پیدا کرد
با فراخوانی یک تابع درون کلاینت تمامی کلاینت ها بروز رسانی می شوند (broadcastMessage)

public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        // Call the broadcastMessage method to update clients.
        Clients.All.broadcastMessage(name, message);
    }
}

SignalR and jQuery

در صفحه HTML کد نمونه ای که نوشتیم، نحوه ارتباط با یک Hub در SigbalR توسط کتابخانه های SignalR jQuery مشخص است. چند کار ضروری است که باید در کدنویسی انجام دهید، تعریف کردن یک proxy برای اشاره کردن به Hub، تعریف کردن  یک تابع که سرور می تواند توسط آن اطلاعات را در کلاینت ها قرار دهد، ایجاد یک Connection برای ارسال پیام به Hub.

کد زیر تعریف یک reference را به یک hub proxy نمایش می دهد.

var chat = $.connection.chatHub; 

در JavaScript برای reference به کلاس Server و اعضای آن کد به صورت Camel (کلمه اول با حرف کوچک شروع و. کلمه دوم با حرف بزرگ شروع می شود).
در کد زیر نحوه ایجاد یک callback را در Script نمایش می دهد. کلاس Hub درون سرور تابعی را برای قراردادن و بروزرسانی اطلاعات در هر کلاینت فراخوانی می کند. دو خط کد در این جا نوشته ایم تاHTML  را قبل از نمایش encode کند  و همچنین از script injection جلوگیری کنیم (این دستور اختیاری است).

 chat.client.broadcastMessage = function (name, message) {
        // Html encode display name and message. 
        var encodedName = $('<div />').text(name).html();
        var encodedMsg = $('<div />').text(message).html();
        // Add the message to the page. 
        $('#discussion').append('<li><strong>' + encodedName
            + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    }; 

کد زیر نحوه باز کردن یک Connection را در Hub نمایش می دهد. کد زیر Connection را باز می کند و سپس رویداد Click یک باتن را در صفحه Handle می کند.

این روش برای این است که مطمئن باشیم قبل از اتفاق افتادن رویداد کلیک حتما Connection ایجاد می شود (باز می شود یا بر اساس روش انتقال در SignalR، دوباره سازی و.. می شود).

  $.connection.hub.start().done(function () {
        $('#sendmessage').click(function () {
            // Call the Send method on the hub. 
            chat.server.send($('#displayname').val(), $('#message').val());
            // Clear text box and reset focus for next comment. 
            $('#message').val('').focus();
        });
    });

شما در این جا یاد گرفتید چطور یک برنامه Real Time ایجاد کنید. شما همچنین نحوه کار کردن با SignalR، استفاده از SignalR در پروژه ASP.NET، ایجاد کلاس Hub، نحوه ارسال و دریافت پیام از یکHub  یاد گرفتید.
در بخش بعدی با MVC  ASP.NET برنامه چت خود را پیاده سازی می کنیم.

شما همچنین می توانید این مثال یا هر برنامه SignalR دیگر را بر روی سرورها قرار دهید، مایکروسافت با استفاده از Windows Azure به شما امکان می دهد تا 10 برنامه SignalR را به صورت رایگان بر روی سرورهایش قرار دهید، برای استفاده از این امکان باید Account رایگان Windows Azure ایجاد کنید.

برای مشاهده آموزش آپلود کردن یک وب سایت و ساخت دیتابیس بر روی Windows Azure یک آموزش کامل قرارداده ام، می توانید این مطلب را مطالعه کنید.

دانلود پروژه چت با SignalR