ASP.NET Core SignalR হলো একটি লাইব্রেরি, যা রিয়েল-টাইম ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য ব্যবহৃত হয়। SignalR-এর মাধ্যমে সার্ভার এবং ক্লায়েন্টের মধ্যে bidirectional communication সম্ভব হয়।
SignalR-এর ক্লায়েন্ট সাইড ইন্টিগ্রেশনের জন্য JavaScript লাইব্রেরি ব্যবহার করা হয়, যা ক্লায়েন্ট ব্রাউজার এবং সার্ভারের মধ্যে রিয়েল-টাইম যোগাযোগ সক্ষম করে।
SignalR ইন্টিগ্রেশনের ধাপসমূহ
সার্ভার সাইড সেটআপ
SignalR ব্যবহার করার জন্য প্রথমে সার্ভার সাইড সেটআপ করতে হবে।
Startup.cs এ SignalR Middleware যুক্ত করুন:
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
services.AddSignalR();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<MyHub>("/myHub");
endpoints.MapDefaultControllerRoute();
});
}
SignalR Hub তৈরি করুন:
using Microsoft.AspNetCore.SignalR;
public class MyHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
ক্লায়েন্ট সাইড সেটআপ
SignalR JavaScript লাইব্রেরি ইনস্টল করা
SignalR ক্লায়েন্ট লাইব্রেরি ডাউনলোড করার জন্য npm বা CDN ব্যবহার করতে পারেন।
npm ব্যবহার করে ইনস্টল:
npm install @microsoft/signalr
CDN ব্যবহার:
HTML ফাইলে নিচের স্ক্রিপ্ট ট্যাগ যুক্ত করুন:
<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@latest/dist/browser/signalr.min.js"></script>
ক্লায়েন্ট সাইড কোড
JavaScript ব্যবহার করে SignalR Hub এর সঙ্গে সংযোগ স্থাপন
HTML ফাইল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SignalR Chat</title>
<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@latest/dist/browser/signalr.min.js"></script>
</head>
<body>
<div>
<input type="text" id="userInput" placeholder="Your Name" />
<input type="text" id="messageInput" placeholder="Your Message" />
<button id="sendButton">Send</button>
</div>
<ul id="messagesList"></ul>
<script>
// SignalR Hub এর সঙ্গে সংযোগ তৈরি করা
const connection = new signalR.HubConnectionBuilder()
.withUrl("/myHub")
.build();
// সংযোগ শুরু করা
connection.start()
.then(() => {
console.log("Connected to SignalR Hub");
})
.catch(err => console.error(err.toString()));
// সার্ভার থেকে মেসেজ গ্রহণ করা
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("userInput").value;
const message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message)
.catch(err => console.error(err.toString()));
});
</script>
</body>
</html>
ব্যাখ্যা
- SignalR Hub সংযোগ তৈরি করা:
HubConnectionBuilderব্যবহার করে সার্ভারের Hub এর URL এর সঙ্গে সংযোগ স্থাপন করা হয়। - সংযোগ শুরু করা:
connection.start()ব্যবহার করে ক্লায়েন্ট এবং সার্ভারের মধ্যে সংযোগ চালু করা হয়। - সার্ভার থেকে মেসেজ গ্রহণ করা:
connection.onমেথড ব্যবহার করে ক্লায়েন্ট সার্ভার থেকে ডেটা গ্রহণ করে। এখানেReceiveMessageমেথডটি ব্যবহার করা হয়েছে, যা সার্ভারের Hub এ সংজ্ঞায়িত। - সার্ভারে মেসেজ পাঠানো:
connection.invokeমেথড ব্যবহার করে ক্লায়েন্ট থেকে সার্ভারে ডেটা পাঠানো হয়।
ফলাফল
উপরের কোড অনুযায়ী, ক্লায়েন্ট থেকে একটি মেসেজ পাঠানো হলে সার্ভার তা গ্রহণ করে সমস্ত সংযুক্ত ক্লায়েন্টে প্রেরণ করবে।
উদাহরণ আউটপুট:
- User1: Hello, everyone!
- User2: Hi, User1!
SignalR ব্যবহার করার সুবিধা
- রিয়েল-টাইম যোগাযোগ: চ্যাট অ্যাপ, লাইভ নোটিফিকেশন, এবং রিয়েল-টাইম ডেটা আপডেট করার জন্য SignalR অত্যন্ত কার্যকর।
- ক্রস-প্ল্যাটফর্ম সাপোর্ট: SignalR ক্লায়েন্ট JavaScript, .NET, Java, এবং Python-এ কাজ করে।
- স্কেলিং সাপোর্ট: Azure SignalR Service ব্যবহার করে উচ্চ ট্র্যাফিক পরিচালনা করা সহজ।
SignalR JavaScript ইন্টিগ্রেশন ডেভেলপারদের জন্য সহজ এবং শক্তিশালী টুল যা রিয়েল-টাইম অ্যাপ্লিকেশন ডেভেলপমেন্টে নতুন মাত্রা যোগ করে।
Read more
