Signalr là gì

Bài viết này trả lời đa số bước cơ bản kiến tạo một ứng dụng real-time áp dụng SignalR. Quý khách hàng học tập làm cho rứa nào để:

Tạo một project web.Thêm thư 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 tất cả các client sẽ kết nối.

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

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

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

*

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

Thư viện SignalR VPS được chuyển vào vào Microsoft.AspNetbộ vi xử lý Core.App metapackage. Thư viện JavaScript client ko được auto cung ứng trong project. Trong khuyên bảo này, bạn sử dụng Library Manager (LibMan) để dấn thỏng viện client trường đoản cú ubpkg. unpkg là một trong content delivery network (CDN) dòng nhưng có thể desgin bất cứ cái gì được tìm kiếm thấy vào npm (Node.js packge manager).

Trong Solution Explorer, right-clichồng project, cùng 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/signalr
1, cùng chọn version mới nhất chưa phải phiên bạn dạng pĐánh Giá.

*

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

Libman sản xuất một thỏng mục wwwroot/lib/signalr với copy file sẽ chọn tới nó.

Tạo một SignalR hub

Một hub là 1 class nhưng Ship hàng nhỏng một high-cấp độ pipeline để cách xử lý giao tiếp client-hệ thống.

Xem thêm: How To Hack In App Purchases With Lucky Patcher, Lucky Patcher Games List 2021

Trong thỏng mục project SignalRChat, chế tạo một thỏng mục Hubs.Trong thỏng mục Hubs, tạo thành một file ChatHub.cs với code mặt dưới:

using Microsoft.AspNetbộ vi 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 quản lý đông đảo kết nối, team cùng message.Pmùi hương thức SendMesssage có thể được điện thoại tư vấn vị một client sẽ kết nối nhằm gửi một message đến toàn bộ các clients. Code JavaScript call cách tiến hành được chỉ ra rằng nghỉ ngơi bước sau vào bài xích gợi ý này. Code SignalR là bất đồng hóa để cung ứng tối ta kĩ năng mở rộng.

Cấu hình SignalR

SignalR VPS buộc phải được cấu hình để trải qua SignalR request mang đến SignalR.

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

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

Thêm SignalR client code

Ttuyệt nắm nội dung vào Pages/Index.cshtml cùng với code mặt dưới:


Giải ưa thích code bên trên:

Tạo những textbox đến name cùng message cùng rất button submit

Tạo một danh mục cùng với id="messageList" cho vấn đề hiển thị message được trao trường đoản cú SignalR Hub.

Thêm tệp tin script tđắm đuối chiếu mang lại SignalR cùng code ứng dụng chat chat.js dòng mà bọn họ chế tác sinh hoạt bước tiếp theo

Trong thỏng mục wwwroot/js, sinh sản 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 một chút về code trên:

Tạo và bắt đầu một kết nối.Thêm vào button submit một handler nhằm gửi message tới hub.Thêm đối kết nối một handler nhằm thừa nhận message từ bỏ hub.Chạy ứng dụngNhấn CTRL + F5 nhằm chạy vận dụng sinh hoạt chính sách không debug.Copy url từ tkhô cứng địa chỉ trình chu đáo, mở 1 trình phê chuẩn không giống hoặc tab mới và paste url vào tkhô nóng can hệ.Chọn một trình chăm nom, gõ một tên với message cùng click button Sover Message.

Xem thêm: Tự Động Viết Hoa Sau Dấu Chấm Trong Word 2007, Viết Hoa Sau Dấu Chấm!

Ngay lập tức tên với message bên cạnh đó hiện lên làm việc cả hai trình duyệt

Tổng kết

Đây là phía dẫn cơ bản dành riêng cho các bạn new bất đầu với SignalR, tuy nhiên đã bao gồm kỹ năng về ASPhường.NET core. Các bước tiến hành hơi đơn giản và dễ dàng và dễ nắm bắt đúng không nhỉ các bạn. Hy vọng bài viết mang đến cho các bạn phần đông điều hữu ích.

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

Code ví dụ trường đoản cú Microsoft: https://github.com/aspnet/Docs/tree/master/aspnetcore/tutorials/signalr/sample


Chuyên mục: Công Nghệ