Signalr là gì

  -  

Bài viết này trả lời phần lớn bước cơ bản gây ra một áp dụng real-time áp dụng SignalR. Bạn học tập làm cầm cố nào để:

Tạo một project website.Thêm thỏng viện SignalR client.Tạo một SignalR hub.Cấu hình project để áp dụng SignalR.Thêm code gửi message tự bất cứ client như thế nào cho toàn bộ những client đang liên kết.Quý Khách đã xem: Signalr là gì

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

Chuẩn bị môi trường thiên nhiên.NET bộ vi xử lý Core SDK 2.2 hoặc new hơn.Tạo một project webTừ thực đơn, lựa chọn File > New Project.Quý Khách đã xem: Signalr là gì


*

Chọn Web Application để tạo project áp dụng Razor Pages.Thêm thỏng viện SignalR client

Tlỗi viện SignalR VPS được đưa vào vào Microsoft.AspNetChip Core.App metapackage. Thỏng viện JavaScript client ko được tự động hóa cấp dưỡng trong project. Trong gợi ý này, các bạn áp dụng Library Manager (LibMan) để nhấn thư viện client trường đoản cú ubpkg. unpkg là 1 trong những content delivery network (CDN) loại mà lại có thể phát hành bất kể vật gì được tìm thấy vào npm (Node.js packge manager).

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

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


*

Chọn Choose specific files, msinh sống thư mục dist/browser , và lựa chọn signalr.js & signalr.min.js.Thiết lập Target Location cho tới wwwroot/lib/signalr/, và chinj Install.
*

Tạo một SignalR hubTrong tlỗi mục project SignalRChat, chế tạo ra một thư mục Hubs.Trong thư mục Hubs, tạo một file ChatHub.cs với code mặt 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 kế thừa tự class SignalR Hub. Class Hub làm chủ các kết nối, đội cùng message.Pmùi hương thức SendMesssage rất có thể được Hotline bởi vì một client sẽ liên kết nhằm gửi một message cho toàn bộ các clients. Code JavaScript Gọi cách làm được chỉ ra rằng sinh sống bước sau vào bài khuyên bảo này. Code SignalR là bất đồng hóa nhằm cung ứng buổi tối ta khả năng không ngừng mở rộng.

Xem thêm: Bản Đồ Quy Hoạch Quận Tây Hồ Sắp Thu Hồi 124 Ha Đất Làm 31 Dự Án

Cấu hình SignalR

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

Thêm code được ghi lại khá nổi bật dưới cho tới file ```StartUp.cs

using Microsoft.AspNetVi xử lý Core.Builder;using Microsoft.AspNetVi xử lý Core.Hosting;using Microsoft.AspNetCore.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 khổng lồ add services khổng lồ the container. public void ConfigureServices(IServiceCollection services) services.Configure(options => // This lambdomain authority 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 ứng dụng, IHostingEnvironment env) if (env.IsDevelopment()) tiện ích.UseDeveloperExceptionPage(); else app.UseExceptionHandler("/Error"); tiện ích.UseHsts(); phầm mềm.UseHttpsRedirection(); app.UseStaticFiles(); phầm mềm.UseCookiePolicy(); tiện ích.UseSignalR(routes => routes.MapHub("/chatHub"); ); tiện ích.UseMvc(); Những thay đổi này thêm SignalR cho tới khối hệ thống ASP..NET bộ vi xử lý Core depandency Injection cùng middleware pipeline.

Xem thêm: Bdm Là Gì - Và Rom Là Gì

Thêm SignalR client code

Thay nỗ lực nội dung trong Pages/Index.cshtml với code bên dưới:

Giải thích hợp code bên trên:

Tạo những textbox cho name và message cùng rất button submit

Thêm tệp tin script tmê man chiếu đến SignalR với code áp dụng chat chat.js cái mà họ tạo nên sống bước tiếp theo

Trong tlỗi mục wwwroot/js, sinh sản một tệp tin chat.js cùng với code bên dưới:

"use strict";var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();//Disable sover 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()); ); event.preventDefault(););Giải yêu thích một chút ít về code trên:

Ngay lập tức thương hiệu và message đồng thời hiện thị sống cả 2 trình duyệt

Tổng kết

Đây là hướng dẫn cơ bản dành cho các bạn mới bất đầu với SignalR, nhưng mà sẽ gồm kỹ năng về ASP..NET core. Các bước thực hiện khá đơn giản và dễ dàng và dễ dàng nắm bắt đúng không nhỉ chúng ta. Hy vọng bài viết mang về cho các bạn đa số điều hữu dụng.

Bài viết được dịch từ bỏ nguồn Tutorial: Get started with ASP.NET Core SignalR

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