Hướng Dẫn Xây Dựng Ứng Dụng Thời Gian Thực Với SignalR

1. Khái Niệm Về Ứng Dụng Thời Gian Thực

• Ứng dụng thời gian thực là loại ứng dụng cho phép người dùng nhận và xử lý thông tin ngay lập tức mà không cần chờ đợi.
• Một số ví dụ điển hình bao gồm:
  • Ứng dụng chat trực tuyến, nơi người dùng có thể gửi và nhận tin nhắn mà không cần làm mới trang.
  • Các ứng dụng hiển thị bảng điều khiển và giám sát, cập nhật dữ liệu thời gian thực như từ cảm biến, dữ liệu thị trường tài chính, hay thông báo hệ thống.
  • Ứng dụng thông báo thời gian thực, như mạng xã hội, email, trò chơi, và cảnh báo du lịch.
  • Nhiều loại ứng dụng khác.

2. SignalR Là Gì?

• SignalR là một thư viện mã nguồn mở giúp xây dựng các ứng dụng thời gian thực, cho phép việc gửi và nhận dữ liệu giữa máy chủ và máy khách một cách hiệu quả.
• Theo định nghĩa của Microsoft:

ASP.NET Core SignalR là thư viện mã nguồn mở giúp đơn giản hóa việc thêm chức năng web thời gian thực vào các ứng dụng. Chức năng web thời gian thực cho phép mã phía máy chủ gửi nội dung đến máy khách ngay lập tức.

• Để hiểu rõ hơn về SignalR, ta cần xem xét giao thức HTTP. Điều này là một giao thức truyền dữ liệu giữa máy khách và máy chủ trên Web và là một giao thức không trạng thái. Mỗi yêu cầu từ máy khách tới máy chủ được xử lý độc lập, không giữ lại thông tin trạng thái trước đó. Điều này không phù hợp cho các ứng dụng thời gian thực vì nó yêu cầu hành động từ máy khách để gửi yêu cầu và mở kết nối liên tục.

3. Các Kiểu Phương Tiện Truyền Tải Trong SignalR

• SignalR hỗ trợ nhiều phương tiện truyền tải khác nhau để duy trì kết nối giữa máy khách và máy chủ, bao gồm:
  • WebSockets: Cung cấp kết nối liên tục cho phép gửi và nhận dữ liệu hai chiều giữa máy khách và máy chủ, rất phù hợp cho các ứng dụng chat trực tuyến và bảng điều khiển thời gian thực.
  • SSE (Server-Sent Events): Giao thức cho phép máy chủ gửi sự kiện và dữ liệu mới đến máy khách tự động. Đây là phương tiện truyền tải đơn hướng, chỉ phù hợp cho các ứng dụng cần cập nhật sự kiện.
  • Long Polling: Khách hàng gửi yêu cầu tới máy chủ và giữ kết nối mở cho đến khi dữ liệu mới có sẵn hoặc thời gian chờ kết thúc. Phương tiện này được sử dụng trong tình huống không thể duy trì kết nối liên tục nhưng vẫn yêu cầu tính năng thời gian thực.

4. Hubs Trong SignalR

• Hub là một đối tượng máy chủ cho phép giao tiếp hai chiều giữa máy khách và máy chủ, giúp gửi tin nhắn từ máy chủ đến máy khách và ngược lại. Hubs sử dụng mô hình "publish-subscribe" để thông báo cho máy khách về các sự kiện hoặc thay đổi từ máy chủ, tạo ra trải nghiệm tương tác thời gian thực.

5. Quy Trình Làm Việc Cơ Bản Với SignalR

1. Tạo một SignalR Hub:
   csharp Copy

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

2. Cấu hình SignalR trong Startup.cs:
   csharp Copy

   public void ConfigureServices(IServiceCollection services)
   {
       services.AddSignalR();
   }
   
   public void Configure(IApplicationBuilder app, IHostingEnvironment env)
   {
       app.UseEndpoints(endpoints =>
       {
           endpoints.MapHub<ChatHub>("/chathub");
       });
   }

3. Kết nối từ phía client:
   javascript Copy

   const connection = new signalR.HubConnectionBuilder()
       .withUrl("/chathub")
       .build();
   
   connection.start().then(() => {
       console.log("Kết nối tới Hub đã được thiết lập");
   }).catch(err => {
       console.error(err.toString());
   });

4. Xử lý sự kiện từ Hub:
   javascript Copy

   connection.on("ReceiveMessage", (user, message) => {
       console.log(`${user}: ${message}`);
   });

5. Gọi phương thức Hub:
   javascript Copy

   connection.invoke("SendMessage", "John", "Hello, SignalR!").catch(err => { console.error(err.toString()); });

6. Sự Khác Biệt Giữa connection.invoke và connection.send

• Sử dụng invoke khi bạn muốn gửi yêu cầu từ máy khách tới máy chủ và mong đợi một phản hồi. Hàm này trả về một Promise.
• Sử dụng send khi bạn muốn gửi dữ liệu mà không cần chờ phản hồi từ máy chủ. Hàm này không trả về một Promise.

7. Một Số Quy Trình Gửi Tin Nhắn Cơ Bản

• Gửi Tin Nhắn Tới Tất Cả Các Client:
  csharp Copy

  public async Task SendBroadcastMessage(string message)
  {
      await Clients.All.SendAsync("ReceiveBroadcastMessage", message);
  }

• Gửi Tin Nhắn Tới Một Client Cụ Thể:
  csharp Copy

  public async Task SendPrivateMessage(string targetUserId, string message)
  {
      await Clients.Client(targetUserId).SendAsync("ReceivePrivateMessage", message);
  }

• Gửi Tin Nhắn Tới Một Nhóm:
  csharp Copy

  await Clients.Group("groupName").SendAsync("ReceiveMessage", message);

8. Khái Niệm Về Nhóm Trong SignalR

• Group cho phép quản lý các kết nối của client, giúp gửi tin nhắn tới tất cả thành viên trong một nhóm cụ thể. Sử dụng các phương thức như AddToGroupAsync và RemoveFromGroupAsync để thêm hoặc loại bỏ client khỏi nhóm.

9. Xây Dựng Ứng Dụng Chat Đơn Giản Với SignalR Sử Dụng Nhóm

• Tạo Hub và Cấu Hình SignalR như đã đề cập.
• Tạo giao diện client đơn giản với các ô nhập liệu và nút gửi.

10. Tổng Kết

• Qua bài viết, hi vọng bạn đã hiểu rõ hơn về cách xây dựng ứng dụng thời gian thực với SignalR. Nếu có bất kỳ câu hỏi nào, hãy liên hệ với chúng tôi qua Facebook để được hỗ trợ. Chúc bạn thành công!

11. Tài Liệu Tham Khảo

• WebSocket
• SignalR Tutorial
• Nguồn tham khảo khác từ các blog và khóa học trực tuyến.
  source: viblo