آموزش استفاده از SignalR در Asp.net Core با مثال عملی

مشخصات سوال کننده :

کاربر : pedram_khan امتیاز کاربر : 277 رتبه کاربر : 6

دسته بندی : Asp.net Core

نظر ویرایش گزارش نشان

به این سوال امتیاز بدهید 1

تعداد بازدید این سوال : 480

هوش مصنوعی

پاسخ هوش مصنوعی

برای استفاده از SignalR در ASP.NET Core، ابتدا باید پکیج مربوطه را به پروژه خود اضافه کنید و سپس از آن در کنترلرها و صفحات خود استفاده کنید. در ادامه یک راهنمای ساده به همراه یک مثال عملی ارایه می گردد.

اولین قدم نصب بسته SignalR است. می توانید از NuGet Package Manager استفاده کنید یا دستور زیر را در Package Manager Console وارد کنید:

Install-Package Microsoft.AspNetCore.SignalR

سپس در فایل Startup.cs، SignalR را تنظیم کنید:

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapHub<ChatHub>("/chatHub");
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
    });
}

حالا یک کلاس جدید برای Hub خود بسازید. به عنوان مثال، نام آن را ChatHub.cs بگذارید:

using Microsoft.AspNetCore.SignalR;

public class ChatHub : Hub
{
    public async Task SendMessage(string user, string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

در نهایت، می توانید از SignalR در سمت کلاینت استفاده کنید. یک فایل HTML ساده بسازید و کد زیر را به آن اضافه کنید:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="utf-8"/>
    <title>Chat with SignalR</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft.signalr/5.0.11/signalr.min.js"></script>
</head>
<body>
    <input type="text" id="user" placeholder="نام کاربری" />
    <input type="text" id="message" placeholder="پیام" />
    <button id="sendButton">ارسال پیام</button>
    <ul id="messagesList"></ul>

    <script>
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("/chatHub")
            .build();

        connection.on("ReceiveMessage", (user, message) => {
            const li = document.createElement("li");
            li.textContent = \`\${user}: \${message}\`;
            document.getElementById("messagesList").appendChild(li);
        });

        document.getElementById("sendButton").addEventListener("click", () => {
            const user = document.getElementById("user").value;
            const message = document.getElementById("message").value;
            connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));
        });

        connection.start().catch(err => console.error(err.toString()));
    </script>
</body>
</html>

با استفاده از کد بالا، می توانید یک چت ساده بسازید که از SignalR برای ارسال و دریافت پیام ها استفاده می کند. اطلاعات کاربری و پیام به Hub ارسال شده و سپس به تمامی کلاینت ها منتقل می شود.

امیدوارم این راهنما کمکتان کند تا از SignalR در پروژه تان استفاده کنید!

به این پاسخ امتیاز بدهید 0

امتیاز: - رتبه: -

نظر ویرایش گزارش

پاسخ دهنده : saedbfd 13:31 1404/06/15

آموزش کار با SignalR در Asp.net Core (برنامه نویسی Socket)

استفاده از SignalR زیاد پیچیده نیست. چند تا کار مهم هست باید انجام بدید.

اول اینکه فایل js مربوط به SignalR رو به پروژه خودتون اضافه کنید و در Layout لینک فایل js رو قرار بدید.
در کلاس Program.cs سرویس مربوط به SignalR رو اضافه کنید :

builder.Services.AddSignalR();

یک کلاس که از کلاس Hub مشتق میشه ایجاد کنید و تابع Send خودتون رو داخلش بنویسید.
مجددا در کلاس Program.cs کلاس Hub رو به صورت یک Middleware معرفی کنید:

app.MapHub<SignalHub>("/myownhub");

فایل SignalRConnection.js رو تنظیم کنید و کانکشن رو استارت کنید.
ضمنا در Layout پروژه اون پیغام یا عملیاتی که میخاید انجام بشه رو بنویسید.

تمامی این موارد به صورت کاملا عملی در پروژه زیر انجام شده. فقط کافیه اجرا کنید و نتیجه رو مشاهده کنید.

دانلود سورس پروژه

به این پاسخ امتیاز بدهید 0

امتیاز: 1664 رتبه: 1

نظر ویرایش گزارش

آخرین سوالات ثبت ‌شده

سوالات مرتبط

آموزش های پرطرفدار

برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید. ورود

آموزش استفاده از SignalR در Asp.net Core با مثال عملی

پاسخ هوش مصنوعی

آموزش کار با SignalR در Asp.net Core (برنامه نویسی Socket)

آموزش ساخت اتوماسیون اداری تحت وب

آموزش ساخت سیستم فروش و انبارداری وب

آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن

آموزش ساخت سیستم آزمونگیر آنلاین