پلتفرم NET.

(DotNet Platform)

وب‌سوکت در برنامه‌های NET.

وب‌سوکت یا WebSocket یک فناوری ارتباطی در وب است که به سرور و مرورگر اجازه می‌دهد از طریق یک اتصال دوطرفه دائمی، داده‌ها را به صورت تعاملی ارسال و دریافت کنند. در واقع مرورگر می‌تواند داده‌ها را بفرستد و دریافت کند بدون اینکه نیازی به بارگیری دوباره صفحه وب (refresh) باشد. این ویژگی به برنامه‌های تعاملی مانند چت‌های زنده و بازی‌های آنلاین کمک می‌کند.

در ادامه، به نحوه ایجاد برنامه WebSocket در پلتفرم NET. با استفاده ازSignalR و همچنین نحوه استقرار آن در لیارا خواهیم پرداخت.

فهرست عناوین:

• ساخت برنامه WebSocket در NET.
• استقرار برنامه DotNet WebSocket در لیارا

ساخت برنامه WebSocket در NET.

در ابتدا، کافیست تا یک پروژه وب NET. جدید، ایجاد کنید. ما نام آن‌را SignalRChatخواهیم گذاشت. برای ایجاد پروژه، کافیست تا دستور زیر را اجرا کنید:

dotnet new webapp -o SignalRChat

در ادامه، باید ابزارهای مربوط به SignalRChat را با اجرای دستورات زیر، نصب کنیم:

dotnet tool uninstall -g Microsoft.Web.LibraryManager.Cli
dotnet tool install -g Microsoft.Web.LibraryManager.Cli
libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js

سپس، بایستی در مسیر اصلی پروژه، یک دایرکتوری به نام Hubsو درون این دایرکتوری، یک فایل به نام ChatHub.cs ایجاد کنیم و قطعه کد زیر را، درون آن، قرار دهیم:

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);
        }
    }
}

در ادامه، بایستی فایل Program.cs درون پروژه را به شکل زیر، تغییر دهیم:

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

// Configure the HTTP request pipeline.
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();

پس از آن، بایستی محتوای فایل Pages/Index.cshtml را با قطعه کد زیر، جایگزین کنیم:

@page
<div class="container">
    <div class="row p-1">
        <div class="col-1">User</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">Message</div>
        <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendButton" value="Send Message" />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <hr />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

در نهایت، کافیست تا در مسیر wwwroot/js یک فایل به نام chat.js ایجاد کنیم و قطعه کد زیر را، درون آن قرار دهیم:

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    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();
});

تمامی کارها انجام شده است و شما می‌توانید از ChatRoom خود استفاده کنید.

استقرار برنامه DotNet WebSocket در لیارا

برای استقرار برنامه‌های websocket که با پلتفرم DotNet توسعه داده شده‌اند؛ نیاز به انجام کار خاص یا تغییر چیزی نیست. تنها کافیست تا یک برنامه NET. در لیارا ایجاد کنید و پروژه websocket خود را، در لیارا، مستقر کنید.