Signalr Là Gì

Bài viết này chỉ dẫn hồ hết bước cơ bản thi công một áp dụng real-time sử dụng SignalR. quý khách hàng học làm ráng làm sao để:

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 để thực hiện SignalR.Thêm code gửi message trường đoản cú bất kể client làm sao đến tất cả các client vẫn liên kết.Quý khách hàng vẫn xem: Signalr là gì

Cuối cùng, bạn sẽ tất cả một áp dụng chat làm việc:

Chuẩn bị môi trường thiên nhiên.NET Core SDK 2.2 hoặc new hơn.Tạo một project webTừ menu, chọn File > New Project.

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


*

Chọn Web Application nhằm tạo thành 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 vào Microsoft.AspNetCore.App metapackage. Tlỗi viện JavaScript client ko được tự động phân phối trong project. Trong giải đáp này, bạn sử dụng Library Manager (LibMan) để dấn thỏng viện client từ ubpkg. unpkg là 1 trong những nội dung delivery network (CDN) mẫu cơ mà có thể chế tạo bất kì cái gì được tìm thấy vào npm (Node.js packge manager).

Trong Solution Explorer, right-clichồng project, với 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, cùng chọn version mới nhất không hẳn phiên bản pĐánh Giá.


*

Chọn Choose specific files, msống tlỗi mục dist/browser , cùng chọn signalr.js & signalr.min.js.Thiết lập Target Location cho tới wwwroot/lib/signalr/, và chinj Install.
*

Libman tạo một thỏng mục wwwroot/lib/signalr và copy tệp tin đã lựa chọn tới nó.

Xem thêm: Source Code Mã Hóa Des C#

Tạo một SignalR hubTrong tlỗi mục project SignalRChat, sản xuất một thư mục Hubs.Trong tlỗi mục Hubs, tạo 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 kế thừa từ bỏ class SignalR Hub. Class Hub cai quản mọi kết nối, nhóm với message.Pmùi hương thức SendMesssage hoàn toàn có thể được gọi vì chưng một client đang liên kết nhằm gửi một message mang lại tất cả những clients. Code JavaScript điện thoại tư vấn thủ tục được chỉ ra rằng làm việc bước sau trong bài giải đáp này. Code SignalR là bất đồng bộ nhằm cung ứng buổi tối ta kĩ năng mở rộng.

Cấu hình SignalR

SignalR hệ thống cần được cấu hình nhằm thông qua SignalR request đến SignalR.

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

using Microsoft.AspNetVi xử lý Core.Builder;using Microsoft.AspNetChip Core.Hosting;using Microsoft.AspNetChip Core.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 khổng lồ 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 to lớn configure the HTTPhường. request pipeline. public void Configure(IApplicationBuilder tiện ích, IHostingEnvironment env) if (env.IsDevelopment()) app.UseDeveloperExceptionPage(); else phầm mềm.UseExceptionHandler("/Error"); app.UseHsts(); tiện ích.UseHttpsRedirection(); app.UseStaticFiles(); tiện ích.UseCookiePolicy(); phầm mềm.UseSignalR(routes => routes.MapHub("/chatHub"); ); ứng dụng.UseMvc(); Những đổi khác này thêm SignalR tới hệ thống ASP..NET Core depandency Injection cùng middleware pipeline.

Thêm SignalR client code

Txuất xắc cụ ngôn từ trong Pages/Index.cshtml với code mặt dưới:

Giải say mê code mặt trên:

Tạo các textbox đến name cùng message với button submit

Tạo một danh mục cùng với id="messageList" mang đến bài toán hiển thị message được trao từ bỏ SignalR Hub.

Thêm file script tham chiếu đến SignalR và code vận dụng chat chat.js loại cơ mà họ sinh sản ở bước tiếp theo

Trong thỏng mục wwwroot/js, tạo một file chat.js cùng với code mặt dưới:

"use strict";var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();//Disable send 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 thích hợp một chút ít về code trên:

Ngay chớp nhoáng thương hiệu cùng message mặt khác hiện thị ở cả 2 trình duyệt

Tổng kết

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

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

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