ساخت پیام رسان تحت وب با سی شارپ و signalR

ما در این مقاله قصد داریم موارد ابتدایی تا متوسط SignalR را در قالب یک پیام رسان به شما دوستان آموزش دهیم:

ویژوال استادیو را باز کنید و بر روی Create New Project کلیک کنید

در پنجره باز شده  ASP.NET Core Web App را انتخاب کنید و Next را بزنید

اسم پروژه خود را SignalRChat بگذارید

Next را بزنید

تنظیمات زیر را برای پروژه خود انتخاب کنید

افزودن کتابخانه SignalR

کتابخانه سمت سرور signalR به صورت اتوماتیک به Asp.net core اضافه شده اما کتابخانه Javascript مورد نیاز را باید به صورت زیر وارد کنیم

بر روی Solution Explorer کلیک راست کنید و بعد Add > Client-Side Library کلیک کنید

• در پنجره باز شده:
  • unpkg را برای Provider انتخاب کنید
  • @microsoft/signalr@latest را برای Library وارد کنید
  • وادامه را مانند تصویر پیش بروید

فایل ها در مسیر wwwroot/js/signalr اضافه می شوند

ایجاد SignalR Hub

به کلاس سمت سرور SignalR که کلاینت ها را هندل میکند Hub می گوییم

• در پروژه فولدری به نام Hubs ایجاد کنید
• در پوشه Hubs کلاس ChatHub را ایجاد کنید و کد زیر را در آن قرار دهید:

using Microsoft.AspNetCore.SignalR;
namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

همانطور که گفتم هاب وظیفه مدیریت Groups , Connections , Messages را بر عهده دارد

متد SendMessage به تمامی کلاینت های فعال ما پیام ارسال می کند

پیکربندی سیگنال ار

ما باید به پروژه خود متوجه کنیم درحال استفاده از SIgnalR هستیم

کد فایل Program.cs را به صورت زیر تغییر دهید

C#Copy

using SignalRChat.Hubs;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
builder.Services.AddSignalR();
var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");
app.Run();

کد کلاینت SIgnalR

کد صفحه  Pages/Index.cshtml را با کد زیر جایگزین کنید

@page
    <div class="container">
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-2">User</div>
            <div class="col-4"><input type="text" id="userInput" /></div>
        </div>
        <div class="row">
            <div class="col-2">Message</div>
            <div class="col-4"><input type="text" id="messageInput" /></div>
        </div>
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-6">
                <input type="button" id="sendButton" value="Send Message" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <hr />
        </div>
    </div>
    <div class="row">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

توضیحات:

• ساخت دکمه ارسال و تکست باکس پیام
• ساخت لیست پیام ها
• رفرنس دادن فایل های .js کتابخانه signalR به صفحه

در ادرس wwwroot/js فایل chat.js را بسازید و به شکل زیر تغییر دهید:

"use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
//Disable the send button until connection is established.
document.getElementById("sendButton").disabled = true;
connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // We can assign user-supplied strings to an element's textContent because it
    // is not interpreted as markup. If you're assigning in any other way, you 
    // should be aware of possible script injection concerns.
    li.textContent = `${user} says ${message}`;
});
connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});
document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

توضیحات:

• ساخت و استارت کانکشن
• ساخت متد ارسال پیام
• ساخت متد دریافت پیام

برنامه خود را اجرا کنید

• url صفحه باز شده را در مرورگر دیگری باز کنید
• یک اسم برای خود ایجاد کنید و بر روی Send Message کلیک کنید

تمام.

سوالات متداول

 پیام رسان تحت وب چیست؟

پیام رسان تحت وب یک وب سایت هست که بدون نیاز به قابلیت رفرش شدن صفحه و در لحظه اطلاعات رو ارسال و دریافت میکنه

از چه ابزار هایی در پیام رسان استفاده میکنیم؟

در این پروژه از c#، asp.net core و signalR برای ساخت چت تحت وب استفاده میکنیم

قابلیت های پیام رسان تحت وب ما چیست؟

ثبت نام کاربر، ایجاد گروه، ارسال پیام متنی و ارسال ویس