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

 

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

ایجاد پروژه Chat با  SignalR در ASP.NET MVC

 

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

بخش سوم

بخش چهارم

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

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

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

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

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

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

 

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

 

در این آموزش ما میخواهیم موارد زیر را بررسی کنیم:

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


تصویر زیر نسخه کامل شده برنامه چت ما را نمایش می دهد

 

 

 

 

 

 

 

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

 

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

ایجاد پروژه Chat با  SignalR در ASP.NET MVC

 

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

بخش سوم

بخش چهارم

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

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

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

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

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

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

 

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

 

در این آموزش ما میخواهیم موارد زیر را بررسی کنیم:

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


تصویر زیر نسخه کامل شده برنامه چت ما را نمایش می دهد

 

 

Set up the Project

در این بخش مشاهده خواهید کرد چطور یک پروژه ASP.NET MVC 5 ایجاد خواهیم کرد و کتابخانه SignalR را به آن اضافه خواهیم نمود.
در Visual Studio یک پروژه C# ASP.NET application با .NET Framework 4.5 و همچنین با نام SignalRChat ایجاد کنید:

 

در پنجره New ASP.NET Project گزینه MVC را انتخاب و بر روی Change Authentication کلیک کنید:

 

در پنجره Change Authentication گزینه No Authentication را انتخاب و سپس بر روی Ok کلیک کنید:

 

اگر شما نوع دیگری از authentication را انتخاب کنید یک کلاس Startup.cs برای شما ایجاد خواهد شد و دیگر شما به کلاسی که ما در مراحل بعدی باید ایجاد کنیم، نیازی نخواهید داشت.


در پنجره New ASP.NET Project بر روی Ok کلیک کنید.
از طریق منو Tools | Library Package Manager | Package Manager Console پنجره Package Manager Console باز و دستور زیر را اجرا کنید:
این دستور یک مجموعه از Script ها و فایل ها و Assembly ها را به پروژه شما برای کار با SignalR اضافه می کند.

 

install-package Microsoft.AspNet.SignalR

در Solution Explorer بر روی Scripts folder کلیک کنید تا باز شود بتوانید Script های اضافه شده را مشاهده کنید:

 

 

در Solution Explorer بر روی نام پروژه کلیک راست کنید و گزینه Add | New Folder را انتخاب کنید و یک Folder جدید با نام Hubs ایجاد کنید.
بر روی پوشه Hubs کلیک راست کنید و گزینه Add | New Item را انتخاب و سپس گزینه Visual C# | Web | SignalR را از بخش Installed انتخاب کنید، حال از بخش سمت راست SignalR Hub Class (v2) را انتخاب کنید. نام این Hub جدید را ChatHub.cs قرار دهید.
ما می خواهیم با استفاده از این Hub به محض دریافت اطلاعات، آن را برای سایر کلاینت ها ارسال کنیم.

 

کد کلاس 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 addNewMessageToPage method to update clients.
            Clients.All.addNewMessageToPage(name, message);
        }
    }
}

 

یک کلاس جدید با نام Startup.cs ایجاد کنید (اگر در قسمت Change Authentication  گزینه ای به غیر از No Authentication انتخاب کرده باشید این فایل برای شما ایجاد شده است).
کد این کلاس را به صورت زیر تغییر دهید:

 

using Owin;
using Microsoft.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();
        }
    }
}

 

کلاس HomeController را در  Controllers/HomeController.cs باز کنید و متد زیر را به این کلاس اضافه کنید. این متد View Chat را برای ما بر می گرداند (نمایش می دهد).
 

public ActionResult Chat()
{
    return View();
}

 

بر روی پوشه Views/Home کلیک راست کنید گزینه Add... | View را انتخاب کنید.
در پنجره بازه شده Add View نام View خود را Chat بگذارید:

 

 

کد زیر را در صفحه View قرار دهید:

 

@{
    ViewBag.Title = "Chat";
}
<h2>Chat</h2>
<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>
@section scripts {
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--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>
    <!--SignalR script to update the chat page and send messages.--> 
    <script>
        $(function () {
            // Reference the auto-generated proxy for the hub.  
            var chat = $.connection.chatHub;
            // Create a function that the hub can call back to display messages.
            chat.client.addNewMessageToPage = function (name, message) {
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + htmlEncode(name) 
                    + '</strong>: ' + htmlEncode(message) + '</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();
                });
            });
        });
        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

 

یک نکته بسیار مهم

هنگامی که شما SignalR و سایر Script ها را به پروژه خود در Visual Studio ا ز طریق Package Manager  اضافه می کنید، ممکن است در زمان نصب اسکریپت های SignalR نسخه ای جدیدتر از این آموزش برای شما نصب شود. به همین دلیل مطمئن شوید کدی که در صفحات قرار برای معرفی Script ها قرار می دهید با نسخه ای که نصب کردید یکسان باشد تا دچار خطا نشوید.

پروژه را ذخیره کنید.

 

 

اجرا کردن SignalR

کلید F را فشار دهید تا برنامه در حالت Debug اجرا شود.
درون Address Bar مرورگر خود، آدرس  /home/chat به آدرس نمایش داده شده اضافه کنید تا پنجره ای مشابه زیر نمایش داده شود:

 

یک نام وارد کنید.
آدرس درون Address Bar مرورگر خود کپی کنید، حال یک پنجره جدید در مرورگر خود باز کنید و آدرس را در آن Paste کنید.

با نوشتن یک پیام و زدن کامند Send این پیام برای تمام افرادی که به Hub متصل هستند ارسال می شود.
در این مثال ساده ما گفتگو صورت گرفته بین کاربران را ثبت نمی کنیم. در واقع هر کاربر پس از وارد شدن به برنامه اطلاعاتی که دیگران می فرستند را می تواند مشاهده کند و اطلاعات قبلی نمایش داده نخواهد شد.
تصویر زیر نسخه اجرا شده از برنامه چت ما را نمایش می دهد.

 

در Solution Explorer، نود Script Documents را برای برنامه درحال اجرا بررسی کنید. اگر از مرورگر Internet Explorer به عنوان browser استفاده کنید، این نود (Node) در حالت Debug قابل نمایش است
در آنجا یک فایل Script با نام hubs که توسط SignalR به صورت داینامیک و runtime ایجاد می شود، وجود دارد. این فایل مدیریت ارتباطات بینjQuery script  و کدهای server-side بر عهده دارد. اگر از مرورگری به جز Internet Explorer استفاده می کنید، شما می توانید به صورت مستقیم با browse کردن به فایل dynamic hubs دسترسی داشته باشید، برای مثال باید به صورت زیر این فایل را browse کنید:

http://mywebsite/signalr/hubs

 

بررسی کد SignalR

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

 

SignalR Hubs

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

 

public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        Clients.All.addNewMessageToPage(name, message);
    }
}

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

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

 

SignalR and jQuery

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

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

 

var chat = $.connection.chatHub; 

 

در JavaScript برای reference به کلاس Server و اعضای آن کد به صورت Camel (کلمه اول با حرف کوچک شروع و کلمه دوم با حرف بزرگ شروع می شود). یک نمونه از references به کلاس ChatHub سی شارپ در JavaScript به صورت chatHub است.
اگر شما می خواهید با قوانین معمولی پاسکال همانند چیزی که در سی شارپ انجام می دهید، در jQuery به کلاس ChatHub ارجاع(reference)  دهید  باید کلاس ChatHub.cs را ویرایش کنید. در ابتدا برای اینکار می بایست namespace، Microsoft.AspNet.SignalR.Hubs را در کلاس خود using کنید، سپس خاصیت (attribute)را به کلاس HubName اضافه کنید، برای مثال [HubName("ChatHub")]
در آخر reference  jQuery خود را به  کلاس ChatHub بروز کنید.
منظورمان از reference  لینک یا ارجاعی است که به فایل ها در صفحات HTML می دهید.


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

 

chat.client.addNewMessageToPage = function (name, message) {
    // Add the message to the page. 
    $('#discussion').append('<li><strong>' + htmlEncode(name) 
        + '</strong>: ' + htmlEncode(message) + '</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 ایجاد کنید.

 

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