SIGNALR LÀ GÌ

  -  

Bài viết này giải đáp những bước cơ bản xây đắp một vận dụng real-time thực hiện SignalR. Quý Khách học làm ráng nào để:

Tạo một project web.Thêm thỏng viện SignalR client.Tạo một SignalR hub.Cấu hình project nhằm sử dụng SignalR.Thêm code gửi message từ bất kì client như thế nào mang đến tất cả những client vẫn liên kết.quý khách sẽ xem: Signalr là gì

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

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

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

quý khách sẽ xem: Signalr là gì


*

Chọn Web Application nhằm chế tạo ra project áp dụng Razor Pages.Thêm tlỗi viện SignalR client

Thỏng viện SignalR hệ thống được chuyển vào trong Microsoft.AspNetChip Core.App metapackage. Thư viện JavaScript client không được auto sản xuất vào project. Trong giải đáp này, các bạn sử dụng Library Manager (LibMan) nhằm nhấn thư viện client tự ubpkg. unpkg là 1 trong nội dung delivery network (CDN) dòng nhưng rất có thể xây dựng bất kì vật gì được tìm thấy vào npm (Node.js packge manager).

Trong Solution Explorer, right-click project, và 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.


*

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

Xem thêm: Top 10 Phim Cá Mập Hay Nhất Định Phải Xem 2021, Cá Mập Trắng Lớn


*

Tạo một SignalR hubTrong thư mục project SignalRChat, chế tạo một tlỗi mục Hubs.Trong thỏng mục Hubs, sản xuất 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ủ đều liên kết, team với message.Pmùi hương thức SendMesssage có thể được Hotline do một client sẽ kết nối để gửi một message mang đến toàn bộ các clients. Code JavaScript Call cách thức được đã cho thấy ở bước sau trong bài bác chỉ dẫn này. Code SignalR là bất đồng hóa để cung ứng về tối ta năng lực mở rộng.

Cấu hình SignalR

SignalR hệ thống buộc phải được cấu hình nhằm thông qua SignalR request mang đến SignalR.

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

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

Xem thêm: Condolences Là Gì ? Nghĩa Của Từ Condolence Trong Tiếng Việt

Thêm SignalR client code

Ttuyệt ráng văn bản vào Pages/Index.cshtml với code bên dưới:

pagediv class="container"> div class="row">div> div class="row"> div class="col-6">div> div class="col-6"> User..........đầu vào type="text" id="userInput" /> br /> Message...input đầu vào type="text" id="messageInput" /> input type="button" id="sendButton" value="Skết thúc Message" /> div> div> div class="row"> div class="col-12"> hr /> div> div> div class="row"> div class="col-6">div> div class="col-6"> ul id="messagesList">ul> div> div>div>script src="https://viviancosmetics.vn/~/lib/signalr/dist/browser/signalr.js">script>script src="https://viviancosmetics.vn/~/js/chat.js">script>Giải mê say code bên trên:

Tạo những textbox mang lại name với message với button submit

Thêm file script ttê mê chiếu mang lại SignalR cùng code vận dụng chat chat.js chiếc cơ mà họ sinh sản nghỉ ngơi bước tiếp theo

Trong thư mục wwwroot/js, chế tạo 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(/, ").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 đam mê một ít về code trên:

Ngay mau chóng tên với message đôi khi hiện lên sinh hoạt cả 2 trình duyệt

Tổng kết

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

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

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