SIGNALR LÀ GÌ

Bài viết này gợi ý đều bước cơ bạn dạng tạo ra một vận dụng real-time thực hiện SignalR. quý khách hàng học có tác dụng cầm như thế nào để:

Tạo một project web.Thêm tlỗi viện SignalR client.Tạo một SignalR hub.Cấu hình project để thực hiện SignalR.Thêm code gửi message tự bất kỳ client nào cho tất cả các client đã kết nối.quý khách đang xem: Signalr là gì

Cuối thuộc, bạn sẽ gồm một vận dụng chat làm việc:

Chuẩn bị môi trường xung quanh.NET Vi xử lý Core SDK 2.2 hoặc bắt đầu rộng.Tạo một project webTừ thực đơn, chọn File > New Project.

Bạn đang xem: Signalr là gì

Chọn Web Application nhằm tạo ra project thực hiện Razor Pages.Thêm thư viện SignalR client

Thỏng viện SignalR hệ thống được gửi vào trong Microsoft.AspNetVi xử lý Core.App metapackage. Tlỗi viện JavaScript client ko được auto cung ứng vào project. Trong hướng dẫn này, các bạn áp dụng Library Manager (LibMan) để dìm thư viện client trường đoản cú ubpkg. unpkg là 1 trong những content delivery network (CDN) cái nhưng mà hoàn toàn có thể xây dựng bất kể đồ vật gi được kiếm tìm thấy trong npm (Node.js packge manager).

Trong Solution Explorer, right-cliông chồng project, và lựa chọn Add > Client-Side Library.Trong hành lang cửa số Add Client-Side Library , mục Provider chọn unpkg.Về Library, gõ aspnet/signalr1, cùng lựa chọn version mới nhất không hẳn phiên phiên bản pReviews.

Chọn Choose specific files, mngơi nghỉ thư mục dist/browser , cùng chọn signalr.js và signalr.min.js.Thiết lập Target Location cho tới wwwroot/lib/signalr/, cùng chinj Install.

Libman sản xuất một thư mục wwwroot/lib/signalr cùng copy tệp tin sẽ lựa chọn tới nó.

Xem thêm:

Tạo một SignalR hubTrong tlỗi mục project SignalRChat, sản xuất một tlỗi mục Hubs.Trong thư mục Hubs, sinh sản một file ChatHub.cs với code bên dưới:

using Microsoft.AspNetVi xử lý Core.SignalR;using System.Threading.Tasks;namespace SignalRChat.Hubs public class ChatHub : Hub public async Task SendMessage(string user, string message) await Clients.All.SendAsync("ReceiveMessage", user, message); Class ChatHub thừa kế tự class SignalR Hub. Class Hub quản lý hầu như kết nối, nhóm với message.Pmùi hương thức SendMesssage rất có thể được gọi do một client vẫn liên kết để gửi một message mang lại toàn bộ các clients. Code JavaScript Gọi cách làm được chỉ ra rằng sinh hoạt bước sau vào bài gợi ý này. Code SignalR là bất đồng hóa nhằm cung cấp tối ta khả năng mở rộng.

Cấu hình SignalR

SignalR server nên được cấu hình để thông qua SignalR request đến SignalR.

Thêm code được đánh dấu rất nổi bật bên dưới cho tới tệp tin ```StartUp.cs

using Microsoft.AspNetChip Core.Builder;using Microsoft.AspNetbộ vi xử lý Core.Hosting;using Microsoft.AspNetChip Core.Http;using Microsoft.AspNetbộ vi xử lý Core.Mvc;using Microsoft.Extensions.Configuration;using Microsoft.Extensions.DependencyInjection;using SignalRChat.Hubs;namespace SignalRChat public class Startup public Startup(IConfiguration configuration) Configuration = configuration; public IConfiguration Configuration get; // This method gets called by the runtime. Use this method to lớn add services khổng lồ the container. public void ConfigureServices(IServiceCollection services) services.Configure(options => // This lambda determines whether user consent for non-essential cookies is needed for a given request. options.CheckConsentNeeded = context => true; options.MinimumSameSitePolicy = SameSiteMode.None; ); services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1); services.AddSignalR(); // This method gets called by the runtime. Use this method khổng lồ configure the HTTPhường. request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env) if (env.IsDevelopment()) phầm mềm.UseDeveloperExceptionPage(); else ứng dụng.UseExceptionHandler("/Error"); app.UseHsts(); phầm mềm.UseHttpsRedirection(); app.UseStaticFiles(); phầm mềm.UseCookiePolicy(); tiện ích.UseSignalR(routes => routes.MapHub("/chatHub"); ); phầm mềm.UseMvc(); Những biến đổi này thêm SignalR cho tới khối hệ thống ASP..NET Core depandency Injection cùng middleware pipeline.

Thêm SignalR client code

Ttuyệt vắt câu chữ vào Pages/Index.cshtml cùng với code bên dưới:

Giải phù hợp code bên trên:

Tạo các textbox mang lại name và message cùng rất button submit

Tạo một danh mục cùng với id="messageList" cho câu hỏi hiển thị message được nhận từ SignalR Hub.

Thêm file script ttê mê chiếu cho SignalR và code ứng dụng chat chat.js mẫu nhưng chúng ta tạo ngơi nghỉ bước tiếp theo

Trong tlỗi mục wwwroot/js, tạo ra một file chat.js cùng với code bên dưới:

"use strict";var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();//Disable skết thúc button until connection is establisheddocument.getElementById("sendButton").disabled = true;connection.on("ReceiveMessage", function (user, message) var msg = message.replace(/&/g, "&").replace(//g, ">"); var encodedMsg = user + " says " + msg; var li = document.createElement("li"); li.textContent = encodedMsg; document.getElementById("messagesList").appendChild(li););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()); ); sự kiện.preventDefault(););Giải mê thích một chút ít về code trên:

Ngay lập tức thương hiệu với message bên cạnh đó hiện thị lên nghỉ ngơi cả 2 trình duyệt

Tổng kết

Đây là phía dẫn cơ bản giành cho các bạn bắt đầu bất đầu cùng với SignalR, dẫu vậy đang bao gồm kiến thức về ASPhường.NET core. Các bước triển khai khá đơn giản với dễ dàng nắm bắt đúng không nào các bạn. Hy vọng nội dung bài viết mang đến mang đến chúng ta hầu hết điều hữu dụng.

Bài viết được dịch trường đoản cú nguồn Tutorial: Get started with ASP.NET Chip Core SignalR

Code ví dụ từ Microsoft: https://github.com/aspnet/Docs/tree/master/aspnetcore/tutorials/signalr/sample