SignalR trong ứng dụng ASP.NET Core

SignalR là một thư viện của ASP.NET giúp xây dựng các ứng dụng web thời gian thực, cho phép các client (ví dụ: trình duyệt) và server có thể giao tiếp với nhau ngay lập tức mà không cần phải refresh lại trang. Điều này rất hữu ích khi bạn muốn xây dựng các ứng dụng chat, thông báo thời gian thực, hoặc bất kỳ tính năng nào yêu cầu cập nhật dữ liệu trực tiếp từ server.

Trong bài viết này, tôi sẽ hướng dẫn bạn cách cài đặt SignalR trong ứng dụng ASP.NET Core.

Khởi tạo project ASP.NET Core

Trước tiên, bạn cần tạo một dự án ASP.NET Core mới (nếu chưa có). Bạn có thể sử dụng Visual Studio hoặc .NET CLI để tạo dự án.

Cách tạo dự án bằng .NET CLI:

dotnet new web -n SignalRSample
cd SignalRSample

Lệnh trên sẽ tạo ra một ứng dụng web ASP.NET Core với tên SignalRSample.

Cài đặt package SignalR

Để sử dụng SignalR, bạn cần cài đặt thư viện Microsoft.AspNetCore.SignalR vào dự án của mình. Cách cài đặt qua dotnet cli:

dotnet add package Microsoft.AspNetCore.SignalR

Lệnh này sẽ thêm SignalR vào dự án của bạn.

Cấu hình SignalR trong ứng dụng ASP.NET Core

Bây giờ, bạn cần cấu hình SignalR trong file Startup.cs hoặc Program.cs (tuỳ thuộc vào cấu trúc dự án của bạn).

Thêm đoạn mã sau để cấu hình SignalR:

using Microsoft.AspNetCore.SignalR;

var builder = WebApplication.CreateBuilder(args);

// Cấu hình dịch vụ SignalR
builder.Services.AddSignalR();

var app = builder.Build();

// Cấu hình middleware
app.MapGet("/", () => "Hello World!");

app.MapHub<ChatHub>("/chathub");  // Định nghĩa route cho SignalR Hub

app.Run();

Ở đây, ChatHub là class bạn sẽ tạo để xử lý các kết nối SignalR.

Tạo Hub SignalR

Hub là điểm kết nối giữa server và client. Trong ví dụ này, tôi sẽ tạo một hub để gửi và nhận tin nhắn giữa các client.

Tạo file class ChatHub.cs:

using Microsoft.AspNetCore.SignalR;

public class ChatHub : Hub
{
    // Phương thức này sẽ được gọi từ client
    public async Task SendMessage(string user, string message)
    {
        // Gửi tin nhắn tới tất cả các client đang kết nối
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

Ở đây, SendMessage là phương thức mà client sẽ gọi khi muốn gửi tin nhắn. ReceiveMessage là phương thức mà client sẽ lắng nghe để nhận tin nhắn.

Tạo client HTML

Bây giờ, bạn cần tạo một client để giao tiếp với SignalR Hub. Bạn có thể tạo một file HTML đơn giản trong thư mục wwwroot của ứng dụng.

Tạo file index.html trong thư mục wwwroot:

<!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/dist/browser/signalr.min.js"></script>
</head>
<body>
    <h2>SignalR Chat</h2>
    <div>
        <input type="text" id="userInput" placeholder="Enter your name" />
        <input type="text" id="messageInput" placeholder="Enter your message" />
        <button onclick="sendMessage()">Send</button>
    </div>
    <ul id="messagesList"></ul>

    <script>
        // Khởi tạo kết nối SignalR
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("/chathub")
            .build();

        // Lắng nghe sự kiện 'ReceiveMessage' từ server
        connection.on("ReceiveMessage", (user, message) => {
            const msg = `${user}: ${message}`;
            const li = document.createElement("li");
            li.textContent = msg;
            document.getElementById("messagesList").appendChild(li);
        });

        // Bắt đầu kết nối SignalR
        connection.start().catch(err => console.error(err));

        // Hàm gửi tin nhắn
        function sendMessage() {
            const user = document.getElementById("userInput").value;
            const message = document.getElementById("messageInput").value;
            connection.invoke("SendMessage", user, message).catch(err => console.error(err));
        }
    </script>
</body>
</html>

Giải thích:

Chúng ta sử dụng thư viện SignalR JS từ CDN để dễ dàng tích hợp với client.
Client sẽ kết nối đến /chathub (tương ứng với SignalR Hub trên server).
Khi người dùng gửi tin nhắn, client gọi phương thức SendMessage trên Hub.
Các tin nhắn sau đó được hiển thị trong danh sách messagesList.

Chạy ứng dụng

Sau khi đã hoàn tất việc cài đặt và cấu hình, bạn chỉ cần chạy ứng dụng của mình:

dotnet run

Ứng dụng sẽ chạy trên url được cấu hình (thường là http://localhost:5000, https://localhost:5001).

Truy cập trang web và bạn sẽ thấy giao diện chat đơn giản. Bạn có thể mở nhiều tab trình duyệt hoặc các trình duyệt khác nhau và kiểm tra tính năng chat thời gian thực.

Kết luận

Chúng ta đã hoàn thành việc cài đặt và cấu hình SignalR trong ứng dụng ASP.NET Core. SignalR giúp bạn xây dựng các tính năng thời gian thực rất dễ dàng mà không cần phải quản lý các kết nối phức tạp. Hy vọng bài viết này sẽ giúp bạn làm quen với SignalR và áp dụng nó trong các dự án web của mình.

Một số lưu ý:

Xử lý lỗi và ngắt kết nối: Trong môi trường product, bạn cần xử lý các tình huống ngắt kết nối, ví dụ như tự động kết nối lại hoặc thông báo lỗi.
Quy mô ứng dụng: Nếu ứng dụng của bạn có nhiều client kết nối, bạn cần xem xét việc sử dụng SignalR Backplane để hỗ trợ việc chia sẻ trạng thái giữa các server.

Thao khảo

https://learn.microsoft.com/en-us/aspnet/core/signalr/introduction?view=aspnetcore-8.0