پیاده سازی SignalR به عنوان کلاینت در JavaScript

در این مقاله قصد داریم تا ارسال پیام به سرور و دریافت پیام با استفاده از سیگنال در javascript را پیاده سازی کنیم.

برای این مثال به صورت ساده به یک صفحه Html ایجاد نموده و فریم ورک SignalR و کدهای js خود را به آن جهت ارسال و دریافت پیام در سیگنال به آن اضافه میکنیم.

1) ابتدا فریم ورک جاوا اسکریپت سیگنال را از طریق این لینک دانلود کنید و به صفحه html اضافه کنید.

2) سپس باید قطعه کد مربوط به اتصال به سرور سیگنال را از طریق کد زیر وارد کنیم.

var connection = newsignalR.HubConnectionBuilder().withUrl(&quothttp://localhost:5076/hub&quot,
{
//accessTokenFactory: () => token,
skipNegotiation: true,
transport: signalR.HttpTransportType.WebSockets
}).build();
connection.start();

همانطور که در قطعه کد فوق مشخص است، ابتدا یک کانکشن ایجاد و سپس با فراخوانی متد start، ارتباط را آغاز میکنیم. همچنین آدرس هاب را در قسمت url فوق قرار داده ایم. لازم به ذکر است، از هاب ایجاد شده در مقاله قبل و متدهای پیاده شده در آن به عنوان سرور استفاده نموده ایم.

در صورتی که نیاز به ارسال توکن به هاب داشته باشید، قسمت acceccTokenFactory را از کامنت خارج کرده و پارامتر token را که یک متغیر شامل رشته توکن است به آن بدهید.

3)اکنون نیاز داریم تا بتوانیم از طریق سیگنال به سرور پیام ارسال کنیم. برای ارسال پیام به سرور مطابق قطعه کد زیر عمل میکنیم.

function AlertToAll() {
connection.invoke(&quotAllertToAll&quot, &quotHello&quot).catch(function (err) {
returnconsole.error(err.toString());
});
}

در این مثال فرض بر آن است که متدی تحت عنوان AllertToAll در هاب سرور پیاده سازی شده است و این متد یک رشته را به عنوان ورودی دریافت میکند(برای اطلاع از متدهای هاب و ادرس آن، باید با توسعه دهنده سمت سرور هماهنگ باشید و یا از او یک داکیومنت شامل نام متدها و نوع ورودی های آن دریافت نمایید و سپس کد خود را توسعه دهید.). بنابراین در قطعه کد فوق، این متد را در سرور و از طریق سیگنال فراخوانی نموده ایم و کلمه Hello را به عنوان ورودی متد ارسال نموده ایم. در صورتی که ارسال پیام با خطا مواجه شود، بلاک catch اجرا میشود. به روش مشابه شما میتوانید هر متدی را در هاب فراخوانی به سادگی فراخوانی نمایید.

4) اکنون قصد داریم تا متدهایی را ایجاد کنیم تا سرور بتواند با فراخوانی آنها اطلاعات لازم را به کلاینت ارسال کند. از انجا که ما در حال پیاده سازی قطعه کد JS هستیم، لذا با دریافت پیام از سرور میتوان اطلاعات پوش شده را در هر جای لازم از صفحه استفاده نموده و نمایش داد.(از این طریق به صورت RealTime صفحه به روز میشود).

برای این امر از قطعه کد زیر استفاده میکنیم.

connection.on(&quotAlertEvent&quot, function (res) {
alert(res);
});

سرور میتواند پیامی را با عنوان AlertEvent به کلاینت پوش کند و پس از آن، بلاک دستورات function که در بالا قابل مشاهده است اجرا میشود. همچنین ورودی که از سمت سرور ارسال میشود در قالب متغیر res در دسترس است که در مثال فوق به صورت alert نمایش داده میشود.

5) در نهایت لازم به ذکر است که میتوانید جهت اطلاع از قطعی اتصال به سرور از متد زیر استفاده کنید.

connection.(e => {
//Reconnect  Code
});

داخل بلاک دستورات متد میتوانید قطعه کدی جهت اتصال مجدد به هاب قرار دهید.

سخن پایانی

در این مجموعه مقاله سعی داشتم تا ضمن معرفی signalR، نحوه استفاده از اون و چالشهای مربوط به سیگنال رو در قالب سه مقاله شامل مباحث تئوری، پیاده سازی سمت سرور و پیاده سازی سمت کلاینت(به عنوان نمون در زبان JS) خدمت شما عزیزان ارائه کنم.

سورس کد کامل پیاده سازی سمت سرور و کلاینت رو میتونید از طریق لینک زیر دانلود و سپس اجرا کنید.

اگر این مقاله برای شما مفید بود لطفا با سایر دوستان به اشتراک بگذارید.

مشاهده و دانلود سورس کد پروژه در گیت هاب

مقاله مرتبط قبلی (پیاده سازی سمت سرور SignalR)

شما میتوانید این مقاله را در وبسایت آموزشی من به آدرس زیر مشاهده نمایید.

https://classicode.org/B-3118

برای پیگیری آموزش ها و مقالات بیشتر، به صفحه لینکدین و وبسایت من سر بزنید.

www.classicode.org