تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
[درس فيديو] تعلم تقنية SignalR الموجوده في Asp.Net
#1
السلام عليكم  احبتي في المنتدى  ،، 

الموضوع  هنا  ليس من  كتابتي  انما  من مدونه لطالما احببت ان اقرأ بها  دائما  اسمها ( انا سي شارب ) للاسف خلال الفتره السابقه دخلت عليها و وجدت انه  قد تم قفلها  من فتره و لم تعد تظهر في نتائج على قوقل  ،،  و فيها مقالات مفيده جداً في مجال البرمجه  ، و بما اني احتفظ بالمواضيع التي تعجبني قررت  وضعها هنا  حتى لا تضيع و يستفيد غيري منها ،، و الجهد محفوظ لكاتب المقالات في موقع (انا سي شارب)  ، و ذكر المصدر اسفل كل موضوع ، على العموم يوجد بالاسفل روابط لخمسة دروس جميله مرتبطه بالموضوع  احداها  رابط على موقع مايكروسوفت  ،،  قراءه شيقة :



للحصول على معلومة من شبكة الويب فقط افتح المتصفح و قم بإرسال ( Request ) للموقع الذي ترغب به و انتظر إجابة ( Response ) من الخادم، هكذا تعمل الويب من بداية التسعينات ، عندما كانت شبكة الويب محصورة على علماء الفيزياء حيث كانت الشبكة العنكبوتية ( كما تحب أن تترجمها الكتب العربية ) عبارة عن مجموعة كبيرة من الصفحات التي تحتوي على معلومات ثابته ترتبط ببعضها البعض عن طريق روابط ( Hyper Link )، طبعا تطورت الويب تطورا كبيرا خلال 24 عاما الماضية ، فبعد أن كانت تلك الصفحات ثابته أصبحنا نرى تدخل قواعد البيانات لتصبح تلك الصفحات Dynamic حيث يتم تحديث المعلومات بشكل مباشر بمجرد طلب العميل لها، كان ذلك كان الأمر رائعا للغاية إلى ان ظهرت بعض التطبيقات الحمقاء التي جلعت كل هذا العمل يصبح هباء منثورا، لنأخذ على سبيل المثال تطبيقات البورصة حتى وقت قريب كانت هذه التطبيقات محصورة فقط على تطبيقات سطح المكتب و إن كانت موجودة على الويب فكان عملية تحديثها مرهقة حيث يتطلب الامر من المستخدم ان يقوم بتحديث الصفحة بشكل يدوي إن لم يقم المطور بوضع مؤقت لتحديث الصفحة كل فترة معينة الامر الذي يستهلك الكثير من قدرات الجهاز و الاتصال، أيضا ما زلت أتذكر برامج الـ Chat التي كانت تعمل باستخدام الـ Java Applet و التي لن كانت لا تعمل على أنظمة الـ OSX لفترة طويلة فكان على مستخدمي تلك الأجهزة تثبيت Windows XP لدخول تلك البرامج ، لذلك كان علينا إعادة النظر في طريقة عمل الويب.

ظهرت فكرة مجنونة في منتصف عام 2000 و كان مصدرها بحث إيطالي يمكنك الاطلاع عليه على الرابط (docs.mc2labs.net ) ، اطلق على الفكرة اسم Real Time Web Application الفكرة كانت بسيطة للغاية لماذا يجب على العميل أن يطلب المعلومات من الخادم، ماذا إذا كان بمقدور الخادم عند توفر معلومات جديدة أن يقوم بإرسالها للعميل؟ لتوضيح الفكرة أكثر للنظر إلى الصورة التالية، التي توضح كيف يقوم تطبيق بورصة بالعمل حيث يقوم بطلب تحديث للبيانات كل فترة معينة و عندما يحصل على معلومات جديدة يقوم بعرضها على العميل، الصورة:
صورة توضيحية لفكرة عمل تطبيق البورصة سابقا

بعيدا عن المشاكل التي تواجه هذا الحل بدء من مشكلة التحديث وصولا إلى إنهاك الاتصال أضف إلى ذلك مشاكل محدودية الـ bandwidth للاستضافة التي من شأن حل المشكلة بهذه الطريقة ان يكون قاتلا لها، بعيدا عن كل هذا الحل غير المنطقي نهائيا، لنفترض أنه لا توجد بيانات جديدة خلال ساعة كاملة على الرغم من أنه تطبيق بورصة لأي سبب كان و بأن التطبيق يقوم بتواصل مع الخادم كل ثانية هذا يعني أن كل عميل سيقوم بطلب 3600 Request خلال الساعة بلا فائدة، و حتى ان كان هناك بيانات أنت أيضا عليك أن ترسل هذا الكم الهائل من الـ Request للخادم، الأن للنظر إلى الصورة التالية:
[url=http://lh4.ggpht.com/-lt6d_oAmteM/VHkkgwb7RGI/AAAAAAAAAmk/_6BcNfQqoKM/s1600-h/clip_image004%25255B8%25255D.jpg][صورة مرفقة: clip_image004_thumb%25255B5%25255D.jpg?imgmax=800]
[صورة مرفقة: clip_image006_thumb%25255B4%25255D.jpg?imgmax=800]

صورة توضيحية لطريقة عمل Real Time Web Application
حسنا هناك تغير جدري في طريقة الحوار بين العميل و الخادم في الصورة التي بالأعلى، يقوم العميل بفتح الاتصال بـ Server ثم يطلب من الخادم عند توفر معلومات جديدة أن يشعره بذلك، عندها يقوم العميل بجلب البيانات الجديدة، يحدث هذا الامر في كل مرة تتوفر بها معلومات جديدة حتى يقطع العميل الاتصال.

[صورة مرفقة: clip_image008_thumb%25255B2%25255D.jpg?imgmax=800]

لحظ الفرق الكبير في الأداء الصورة في الأعلى تلاحظ حجم و كمية الطلبات المهولة لثلاثة عملاء فقط و في مثالنا البورصة التي لا توجد لها بيانات لمدة ساعة هذا يعني 10800 طلب ذهب هباء منبثا، في حين الصورة التي بالأسفل لدي ثلاثة اتصالات مع الخادم و عملية الـ Request لبيانات جديدة تحدث فقط عندما يكون هناك بيانات جديدة.

على الرغم من هذه الفكرة عظيمة إلى أنها لفترة طويلة ضلة حبيسة الادراج لا يهم لماذا الان، المهم أنه و مع تطوير الويب نحن نشاهد استخدام هذه التقنية الأن بكثافة في الـ Facebook عند تحديث الصفحة الرئيسية للمستخدم، في Twitter عند تحديث TimeLine في Gmail عند وصل بريد الكتروني جديد، في Outlook عند استخدامك للـ Messenger، في تطبيقات الأحوال الجوية ، أسعار العملات، أسعار المعادن و نفط، في خرائط Nokia لتحميل بيانات الازدحام المروري، في تطبيقات إدارة الطوارئ في المستشفيات، في تطبيقات المهتمة بالإحصائيات، في أنظمة مراقبة البنى التحتية التقنية مثل IBM guardium التي تراقب قواعد البيانات بتو و اللحظة، في التطبيقات التي تحتاج إلى مزامنة بين الخادم و بين العملاء و ما اكثرها الان في تطبيقات الهواتف الذكية، في كل هذه التطبيقات انت لا تحتاج إلى اغلاق التطبيق أو تحديث الصفحة أنت ترى إما رسالة او إشعار و حين تقوم بضغط عليه يقوم التطبيق بالحصول على المعلومات الجديدة.

كل هذا يقودنا إلى سؤال واحد : ما هو SignalR ؟ في البداية تستخدم فكرة Real Time Web Application العديد من التقنيات لتنفيذها على سبيل المثال و ليسل الحصر ، Web socket و Server side Event و Forever frame و Long poling و push today و غيرها من التقنيات التي تقوم بنفس العمل و لكن بطرق مختلفة، يأتي هنا SignalR حيث يستخدم تقنيتي الـ Web Socket و الـ Forever Frame من أجل تنفيذ فكرة Real Time Web Application هذا يعني الـ SignalR هو إطار عمل قامت Microsoft مؤخرا بتطويره لتفنيد فكرة Real Time Web Application داخل اطار العمل الـ .net .

من يجب ان يتهتم لأمر SignalR
مطوري الويب بدرجة الأولى و المهتمين بتطوير تطبيقات تعرض البيانات أو تخلق نوعا من التواصل بين المستخدمين مثل برامج الشبكة الاجتماعية أو كل مطور مازال حتى اللحظة يستخدم الـ web socket ، أيضا مطوري خدمات الويب الراغبين بتطوير خدمات ويب تقوم هيا بإرسال بيانات إلى كافة العملاء المتصلين بدون أن يرسل العميل أي طلب لها، المستخدمين المهتمين ببناء الألعاب باستخدام HTML 5 ستكون هذه التقنية بمثابة جنة الخلد بنسبة لكم، المطورين المهتمين ببناء برامج إحصائية تقوم بعرض البيانات مباشرة عند اضافتها لقاعدة البيانات مثل الإحصائيات الطبية في المستشفيات و البنوك و شعب إدارات المرور التي تتطلب أن ترى البيانات خلال أجزاء من الثانية.

على الرغم من SignalR لم يقدم في الحقيقة شيئاً جديدا فهذه التقنية ليست من بنات اختراع Microsoft لكن الشيء الجديد الذي يقدمه SignalR هو تبسيط استخدام هذه التقنيات للنظر إلى المقارنة التالية، لشفرة تقوم بعمل Chat باستخدام Web Socket هذا جزء من الشفرة:

public class WSHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
   if (context.IsWebSocketRequest)
   {
       context.AcceptWebSocketRequest(ProcessWSChat);
   }
}

public bool IsReusable { get { return false; } }
private async Task ProcessWSChat(AspNetWebSocketContext context)
{
   WebSocket socket = context.WebSocket;
   while (true)
   {
           ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[1024]);
           WebSocketReceiveResult result = await socket.ReceiveAsync(
           buffer، CancellationToken.None);
           if (socket.State == WebSocketState.Open)
           {
               string userMessage = Encoding.UTF8.GetString(
               buffer.Array، 0، result.Count);
               userMessage = "You sent: " + userMessage + " at " +
               DateTime.Now.ToLongTimeString();
               buffer = new ArraySegment<byte>(
               Encoding.UTF8.GetBytes(userMessage));
               await socket.SendAsync(
              buffer، WebSocketMessageType.Text، true، CancellationToken.None);
           }
           else
           {
               break;
           }
       }
   }
}


الشفرة التي في الأعلى تقوم بإنشاء HTTP handler و التي تستقبل طلبات الـ Client سواء الاتصال أو التواصل، في الطريقة Processrequest أقوم بتحقق من أن HttpContext.IsWebSocketRequest قيمته true إذا كان نعم أقوم عندها بقبول الطلب و إنشاء الاتصال الذي تم تمريره لطريقة ، أخيرا استدعي الطريقة ProcessChat و التي تقوم بطباعة أي نص يرسله المستخدم، حسنا للنظر الأن إلى شفرة SignalR:
public void Send(string message)
{    
   // Call the ProcessWSChat method to update clients.  
    Clients.All.ProcessWSChat(message);
}


صدق أو لا تصدق لا يهم كثيرا J و لكن السطرين في الأعلى تقومان بنفس العمل للشفرة السابقة، يجب أن تلاحظ هنا بأن SignalR تولى مهمة إدارة الاتصالات و إنشاء كائنات الـ Web socket و ارسال و تبادل البيانات بين الخادم و العملاء، يقدم لك SignalR العديد من الـ API التي يمكنك استخدامها لتنفيذ ما تريد دون ان تقلق حيال أي شيء يتعلق مثلا بـ Web Socket على سبيل المثال ليس الحصر الشفرة اليدوية بتعامل مع الـ Web socket تصبح قيمتها صفراُ عند الحديث عن عملاء لا تدعم منصات العمل الخاص بهم الـ Web socket ربما تتفاجأ إذا أخبرتك أن II7 حتى الإصدار السابع منه لم يكن يدعم الـ Web Socket أيضا Chrome حتى الإصدار الـ 34 و IE حتى الإصدار 10 و Firefox حتى الإصدار 5 و Safari حتى الإصدار الـ 5 ، تتفهم SignalR هذا الأمر و عندما تقوم بتحاور مع عميل لا يدعم Web socket فيها تستخدم Forever frame أو Server Event أو Ajax long polling كوسيلة بدية لتواصل مع العميل دون ادنى تدخل من قبلك على الإطلاق فـ SignalR يحدد أي تقنية أفضل لهذا العميل. بالإضافة إلى كل هذه المميزات فإن SignalR يدعم جميع منصات العمل تقريبا المتعلقة بـ .Net بدء بـ asp.net و الـ windows desktop ، WPF ، Windows Phone ، Office، Silverlgiht و غيرها من منصات العمل المختلفة.
إن إعداد مشروع للعمل أكثر بساطة من كتابة الشفرة نفسها لن يتغير عليك شيء كثير فالأمر كله محصور في خطوتين الأولى أضافة مكتبات SignalR و الخطوة الثانية تجهيز مشروع من اجل تواصل الـ Client معه، سنقوم الأن بتجهيز مشروع من اجل حساب عدد الـ Client المتصلين خلال هذه اللحظة ، الفكرة في الامر سيكون لدينا شاشة Web forms تقوم بطاعة عدد المستخدمين المتصلين و عندم يتصل مستخدم أو يغلق المتصفح يتناقص العدد أو يزيد في حالة الاتصال، سيتحدث هذا الرقم امام المستخدمين دون حاجتهم لتحديث الصفحة نهائيا، لنبدأ.

· افتح Visual Studio و قم بإنشاء مشروع جديد من نوع asp.net empty application ، اعد تسمية المشروع إلى ConnectionCounter ، الصورة:

[صورة مرفقة: clip_image002_thumb%25255B2%25255D.png?imgmax=800]

· الخطوة التالية أضافة SignalR ، لعمل ذلك توجه إلى شاشة Solution Explorer حدد على reference ثم اضغط بزر الفأرة الأيمن حدد Mange NuGet ستظهر امامك شاشة Mange NuGet في صندوق البحث ابحث عن SignalR، الصورة

[صورة مرفقة: clip_image004_thumb%25255B2%25255D.png?imgmax=800]
  • اضغط على Install لتثبيت مكتبات SignalR .

  • قد تطلب منك Microsoft الموافقة على بعض الشروط بتأكيد وافق بدون قراءه.

  • الخطوة التالية هي اخبرا asp.net بضرورة عمل Mapping من أجل SignalR لعمل ذلك قم بإضافة ملف جديد من النوع Owin و يجب أن يكون اسمه Startup ، في الطريقة Configuration اكتب الشفرة التالية :
public void Configuration(IAppBuilder app)
{  

 app.MapSignalR();

}
  • الأن نحتاج ان نقوم ببناء الـ Hub ، لا تقلق حيال ما هو الـ Hub حاليا، أضف Class جديد بعنوان ConnectionCounter و جعل هذا التصنيف مشتق من الـ Hub ، الشفرة:
namespace ConnectionCounter 
{   

using Microsoft.AspNet.SignalR;  

using Microsoft.AspNet.SignalR.Hubs;   

[HubName("ConnectionCounter")]

public class ConnectionCounter : Hub    {    }}
  •  الأن سنقوم بإنشاء متغير integer يكون static بحيث يكون مشترك بين جميع الـ Clients، الفكرة أن هذا المتغير يتناقص و يزداد بحسب عدد المتصلين حاليا، الشفرة
namespace ConnectionCounter{
using Microsoft.AspNet.SignalR;

using Microsoft.AspNet.SignalR.Hubs;

[HubName("ConnectionCounter")]  

public class ConnectionCounter : Hub    

{       

    static int connectionCounter = 0;  

}

}

الان سنقوم بعمل Override لطريقة OnConnected بحيث تقوم بزيادة المتغير connectionCounter بواحد، الشفرة :
public override System.Threading.Tasks.Task OnConnected(){  
connectionCounter += 1;  

this.Clients.All.NumberOfConnter(connectionCounter); 

    return base.OnConnected();}

لا تقلق حيال الطريقة NumberOfCounter التابعة لطريقة All في الكائن Clients فيها طريقة Dynamic، سنقوم الأن بعمل نفس الامر عند حدث قطع الاتصال مع المستخدم و هي الطريقة OnDisconnected ، و لكن بإنقاص قيمة المتغير connectionCounter هذه المرة، الشفرة:
public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled){  
connectionCounter -= 1;  this.Clients.All.NumberOfConnter(connectionCounter);  

           return base.OnDisconnected(stopCalled);}

 الأن لنقم بكتابة طريقة نقوم باستدعائها عند دخول أي عميل جديد إلى الشبكة وهو عرض قيمة المتغير connectionCounter ، الشفرة :
namespace ConnectionCounter{  
 using Microsoft.AspNet.SignalR;  

 using Microsoft.AspNet.SignalR.Hubs; 

   [HubName("ConnectionCounter")]    

  public class ConnectionCounter : Hub  

 {        static int connectionCounter = 0; 

       public void GetCounterCount()        {   

        this.Clients.All.NumberOfConnter(connectionCounter); 

         }         public override System.Threading.Tasks.Task OnConnected() 

      {            connectionCounter += 1;          

                    this.Clients.All.NumberOfConnter(connectionCounter);  

            return base.OnConnected();      

 }   

    

public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled)      

 {            connectionCounter -= 1;  

         this.Clients.All.NumberOfConnter(connectionCounter);       

               return base.OnDisconnected(stopCalled);       

}    

}  

}
  • صدق او لا تصدق انتهينا الان من اعدادا الخادم، شكرا للـ Hub، الأن سنقوم بعمل بواجهة لتواصل مع هذا الـ Hub ، لعمل ذلك سنستخدم الـ JavaScript .أضف صفحة Web Forms جديدة إلى المشروع ثم أضف ملفين JavaScript للتعامل مع SignalR، داخل الـ Head ، الشفرة:
<script src="Scripts/jquery-1.6.4.js"></script><script src="Scripts/jquery.signalR-2.1.2.js"></script>
  •  أخيرا قم بكتابة شفرة JavaScript التاليه من اجل التواصل مع الـ Hub ، الشفرة:
<script type="text/javascript">
$(function () {         




 var con = $.hubConnection();     





  var hub = con.createHubProxy("ConnectionCounter"); 





  hub.on('NumberOfConnter'، function (i) { 





              $('#ConnectionCounter').text(i);   





       });       





  con.start(function () 





{ hub.invoke("GetCounterCount"); });      





  })    



</script>  
  •  في الشفرة التي أقوم أولا بإنشاء كائن من نوع Hub ثم أقوم بتحديد الـ Hub الخاص به عن طريق createHubProxy مررا لها الـ HubName ، أخير أقوم بإنشاء طريقة اسمها NumberOfCounter و أرسلها للـ Hub الذي سيقوم ببنائها بشكل تلقائي، تأخذ هذه الطريقة القيمة المعادة من الطريقة GetCounterCount التي يبدئ تنفيذها عندا فتح الاتصال بواسطة الطريقة start التابعة للـ Connection .\ أفتح الصفحة الأن بأكثر من متصفح.
[صورة مرفقة: clip_image006_thumb%25255B2%25255D.png?imgmax=800]
يجب أن يكون قد تشكل لديك صورة عما يحدث الأن ، الفكرة بسيطة جدا لديك Hub على الخادم و لديك Hub على العميل يتطلب الـ Hub على الخادم طريقة dynamic حيث يجب على العميل أن يقوم برساله له أثناء فتح الاتصال مع الخادم ، هذه هي الفكرة الرئيسة من SignalR كل شيء بعد ذلك يتمحور حول هذه النقاط الأربعة.

------------------------------------------------------------------------

الدرس الاول : شرح SignalR - YouTube

الدرس الثاني : شرح كفيه عمل Hub - YouTube

الدرس الثالث : شرح عمل Client Hub - YouTube

الدرس الرابع : شرح عمل Testing ل Hub & Client - YouTube

الدرس الخامس : شرع عمل Hosting علي External Hosting myAsp.net - YouTube

Tutorial: Getting Started with SignalR 2 | The ASP.NET Site
اسم معرفي : محمد يحيى
الرد }}}
تم الشكر بواسطة: ممدوح , ممدوح , HASAN6.0 , أبو عمر
#2
بارك الله فيك

موضوع في غاية الأهمية لمن يعمل على تصميم المواقع التفاعلية وخصوصاً الاخبارية.
الرد }}}
تم الشكر بواسطة: أبو عمر , أبو عمر
#3
موضوع شكرا لك
الرد }}}
تم الشكر بواسطة:



التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم