ASP.NET Core: Bắt đầu với ASP.NET Core SignalR

Bài hướng dẫn này cung cấp kiến thức cơ bản về xây dựng ứng dụng thời gian thực (real-time) bằng SignalR. Bạn được dạy cách để:

• Tạo một dự án web.
• Thêm thư viện máy khách SignalR.
• Tạo một trung tâm SignalR.
• Định cấu hình dự án để sử dụng SignalR.
• Thêm mã gửi tin nhắn từ bất kỳ máy khách nào đến tất cả các máy khách được kết nối.

Cuối cùng, bạn sẽ có một ứng dụng trò chuyện đang hoạt động:

Điều kiện tiên quyết

Bạn cần có Visual Studio 2022+ với ASP.NET and web development đã được cài đặt.

Tạo một dự án ứng dụng web

Khởi động Visual Studio 2022 và chọn Create a new project.

Thư viện server (máy chủ) SignalR được bao gồm trong framework chia sẻ ASP.NET Core. Thư viện client (máy khách) JavaScript không tự động được đưa vào dự án. Đối với hướng dẫn này, hãy sử dụng Trình quản lý thư viện (LibMan) để lấy thư viện máy khách từ unpkg. unpkg là mạng phân phối nội dung toàn cầu, nhanh chóng cho mọi thứ trên npm.

Trong Solution Explorer, bấm chuột phải vào dự án và chọn Add > Client-Side Library.

Trong hộp thoại Add Client-Side Library:

• Chọn unpkg ở phần Provider
• Nhập @microsoft/signalr@latest ở phần Library.
• Chọn Choose specific files, mở rộng thư mục dist/browser và chọn signalr.js và signalr.min.js.
• Đặt Target Location thành wwwroot/js/signalr/.
• Chọn Install.

LibMan sẽ tạo thư mục wwwroot/js/signalr và sao chép các tệp đã chọn vào đó.

Hub là một lớp đóng vai trò là một đường dẫn cấp cao xử lý giao tiếp giữa máy khách và máy chủ.

Trong thư mục dự án SignalRChat, hãy tạo một thư mục có tên Hubs.

Trong thư mục Hubs, tạo lớp ChatHub với code như sau:

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

Lớp ChatHub kế thừa từ lớp SignalR Hub. Lớp Hub quản lý các kết nối, nhóm và nhắn tin.

Phương thức SendMessage có thể được gọi bởi một máy khách được kết nối để gửi tin nhắn đến tất cả các máy khách. Mã máy khách JavaScript gọi phương thức này sẽ được hiển thị sau trong hướng dẫn. Mã SignalR không đồng bộ để cung cấp khả năng mở rộng tối đa.

Máy chủ SignalR phải được cấu hình để truyền các yêu cầu SignalR tới SignalR. Thêm code được đánh dấu (high-light) sau đây vào file 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");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");

app.Run();

Những lệnh được đánh dấu (high-light) ở trên sẽ thêm SignalR vào ASP.NET Core các hệ thống định tuyến và dependency injection.

Thay thế nội dung Pages/Index.cshtml bằng đoạn mã sau:

@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>

Phần markup HTML ở trên:

• Tạo hộp văn bản và nút submit.
• Tạo một danh sách với id="messagesList" để hiển thị các tin nhắn nhận được từ hub SignalR.
• Đưa vào các tham chiếu tập lệnh tới SignalR và mã ứng dụng chat.js sẽ được tạo trong bước tiếp theo.

Trong thư mục wwwroot/js, tạo một file chat.js với đoạn code sau:

"use strict";

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

//Disable the send button until connection is established.
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // We can assign user-supplied strings to an element's textContent because it
    // is not interpreted as markup. If you're assigning in any other way, you 
    // should be aware of possible script injection concerns.
    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();
});

Đoạn code JavaScript trên:

• Tạo và bắt đầu một kết nối.
• Thêm vào nút submit một trình xử lý gửi tin nhắn đến hub.
• Thêm vào đối tượng kết nối một trình xử lý nhận tin nhắn từ hub và thêm chúng vào danh sách.