Khám Phá Ứng Dụng Web Thời Gian Thực: Tối Ưu SignalR & WebSockets
SignalR là một thư viện cho ASP.NET Core giúp đơn giản hóa việc giao tiếp thời gian thực giữa server và client. Nó tự động sử dụng WebSockets khi có sẵn để đạt hiệu suất tối ưu. Hãy cùng theo dõi hướng dẫn toàn diện này để tích hợp SignalR với WebSockets vào ứng dụng ASP.NET Core của bạn.
Mục Lục
- 1. Yêu cầu trước khi bắt đầu
- 2. Tạo Dự Án ASP.NET Core Mới
- 3. Thêm Gói NuGet SignalR
- 4. Cấu Hình SignalR Trong
Startup.csHoặcProgram.cs - 5. Tạo Lớp SignalR Hub
- 6. Tạo Mặt Khách (HTML + JavaScript)
- 7. Kích Hoạt WebSockets Trong Cấu Hình Server
- 8. Chạy Ứng Dụng Của Bạn
- 9. Một Số Mẹo Bổ Sung
- 10. Tóm Tắt
1. Yêu Cầu Trước Khi Bắt Đầu
Trước khi bắt đầu, bạn cần chuẩn bị:
- Visual Studio 2022 hoặc phiên bản mới hơn
- .NET Core SDK (3.1, 5.0, 6.0 hoặc mới hơn)
- Kiến thức cơ bản về ASP.NET Core và JavaScript
2. Tạo Dự Án ASP.NET Core Mới
- Mở Visual Studio
- Chọn Tạo một dự án mới
- Chọn ASP.NET Core Web Application
- Đặt tên cho dự án và nhấn Tạo
- Chọn mẫu ASP.NET Core Web App (Model-View-Controller) hoặc Empty tùy theo sở thích của bạn
- Đảm bảo rằng Enable Docker Support không được chọn trừ khi cần thiết
- Chọn phiên bản .NET mới nhất và nhấn Tạo
3. Thêm Gói NuGet SignalR
- Nhấp chuột phải vào dự án của bạn trong Solution Explorer
- Chọn Quản lý NuGet Packages
- Tìm kiếm Microsoft.AspNetCore.SignalR
- Cài đặt gói
4. Cấu Hình SignalR Trong Startup.cs Hoặc Program.cs
Đối Với .NET 5 Hoặc Trước Đó (Startup.cs):
csharp
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
// Thêm dịch vụ SignalR
services.AddSignalR();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
// middleware hiện có...
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
// Map SignalR hub
endpoints.MapHub<MyHub>("/myHub");
});
}Đối Với .NET 6+ (Program.cs):
csharp
var builder = WebApplication.CreateBuilder(args);
// Thêm dịch vụ
builder.Services.AddControllersWithViews();
builder.Services.AddSignalR();
var app = builder.Build();
app.UseRouting();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
// Map SignalR Hub
app.MapHub<MyHub>("/myHub");
app.Run();5. Tạo Lớp SignalR Hub
Tạo một lớp mới MyHub.cs:
csharp
using Microsoft.AspNetCore.SignalR;
public class MyHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}Lớp hub này cho phép phát sóng tin nhắn đến tất cả các client được kết nối.
6. Tạo Mặt Khách (HTML + JavaScript)
Trong Index.cshtml hoặc một view tương tự:
html
<!DOCTYPE html>
<html>
<head>
<title>Demo SignalR WebSocket</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.0/signalr.min.js"></script>
</head>
<body>
<h1>Demo SignalR WebSocket</h1>
<input type="text" id="userInput" placeholder="Tên của bạn" />
<input type="text" id="messageInput" placeholder="Tin nhắn" />
<button id="sendButton">Gửi</button>
<ul id="messagesList"></ul>
<script>
// Tạo kết nối
const connection = new signalR.HubConnectionBuilder()
.withUrl("/myHub")
.withAutomaticReconnect()
.build();
// Bắt đầu kết nối
connection.start().then(() => {
console.log("Kết nối tới hub SignalR thành công");
}).catch(err => {
console.error(err.toString());
});
// Nhận tin nhắn
connection.on("ReceiveMessage", (user, message) => {
const li = document.createElement("li");
li.textContent = `${user}: ${message}`;
document.getElementById("messagesList").appendChild(li);
});
// Gửi tin nhắn
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>7. Kích Hoạt WebSockets Trong Cấu Hình Server
- WebSockets sẽ được sử dụng tự động khi hỗ trợ.
- Đảm bảo WebSockets được kích hoạt trong môi trường lưu trữ của bạn:
- IIS, Azure hoặc các nhà cung cấp lưu trữ khác nên có hỗ trợ WebSocket đã được bật.
- Trong
launchSettings.jsonhoặc cấu hình IIS, xác minh rằng hỗ trợ WebSockets có sẵn.
8. Chạy Ứng Dụng Của Bạn
- Nhấn F5 hoặc Ctrl + F5.
- Mở nhiều cửa sổ trình duyệt.
- Gửi tin nhắn từ một cửa sổ và quan sát các cập nhật theo thời gian thực trên tất cả các cửa sổ khác.
9. Một Số Mẹo Bổ Sung
- Tự động chuyển đổi: SignalR tự động chuyển sang Server-Sent Events hoặc Long Polling nếu WebSockets không có sẵn.
- Sử dụng WebSocket rõ ràng: Để buộc sử dụng chỉ WebSockets:
csharp
.withUrl("/myHub", { transport: signalR.HttpTransportType.WebSockets })- Bảo mật: Luôn sử dụng HTTPS và triển khai xác thực khi cần thiết.
10. Tóm Tắt
- Cài đặt gói SignalR
- Cấu hình dịch vụ và endpoints
- Tạo lớp Hub
- Kết nối từ client bằng JavaScript
- Gửi và nhận tin nhắn theo thời gian thực
Lưu ý: WebSockets sẽ được sử dụng tự động khi có sẵn, cung cấp giao tiếp thời gian thực nhanh chóng và hiệu quả.
