Signalr là gì

Bài viết này khuyên bảo đầy đủ bước cơ phiên bản kiến thiết một áp dụng real-time sử dụng SignalR. Quý khách hàng học làm cho nạm 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 từ bỏ bất kì client làm sao mang đến toàn bộ những client đã liên kết.

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

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

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

*

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

Tlỗi viện SignalR server được đưa vào vào Microsoft.AspNetCore.App metapackage. Thư viện JavaScript client ko được auto phân phối vào project. Trong hướng dẫn này, các bạn thực hiện Library Manager (LibMan) để nhận thư viện client từ bỏ ubpkg. unpkg là 1 content delivery network (CDN) loại mà có thể thiết kế bất kì cái gì được tìm thấy vào npm (Node.js packge manager).

Trong Solution Explorer, right-cliông xã project, cùng 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/signalr
1, cùng chọn version tiên tiến nhất chưa phải phiên bản pđánh giá.

*

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

Libman tạo nên một thư mục wwwroot/lib/signalr cùng copy file đã lựa chọn cho tới nó.

Tạo một SignalR hub

Một hub là một trong class mà Giao hàng nlỗi một high-màn chơi pipeline nhằm cách xử lý giao tiếp client-hệ thống.

Xem thêm: Văn Phòng Ban Quản Lý Khu Kinh Tế Dung Quất Và Các Khu Công Nghiệp Quảng Ngãi

Trong thỏng mục project SignalRChat, sản xuất một tlỗi mục Hubs.Trong thư mục Hubs, chế tạo ra một tệp tin ChatHub.cs với code mặt dưới:

using Microsoft.AspNetCore.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ừ bỏ class SignalR Hub. Class Hub làm chủ phần đa liên kết, nhóm cùng message.Phương thơm thức SendMesssage rất có thể được điện thoại tư vấn vị một client đang kết nối để gửi một message mang lại toàn bộ các clients. Code JavaScript gọi phương thức được chỉ ra rằng nghỉ ngơi bước sau trong bài xích gợi ý này. Code SignalR là bất đồng bộ để hỗ trợ tối ta khả năng không ngừng mở rộng.

Cấu hình SignalR

SignalR VPS buộc phải được thông số kỹ thuật để thông qua SignalR request đến SignalR.

Thêm code được khắc ghi rất nổi bật dưới 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 to 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 tiện ích, IHostingEnvironment env) if (env.IsDevelopment()) ứng dụng.UseDeveloperExceptionPage(); else app.UseExceptionHandler("/Error"); tiện ích.UseHsts(); ứng dụng.UseHttpsRedirection(); app.UseStaticFiles(); phầm mềm.UseCookiePolicy(); ứng dụng.UseSignalR(routes => routes.MapHub("/chatHub"); ); ứng dụng.UseMvc(); Những đổi khác này thêm SignalR tới khối hệ thống ASP..NET Vi xử lý Core depandency Injection cùng middleware pipeline.

Thêm SignalR client code

Thay nuốm nội dung trong Pages/Index.cshtml cùng với code mặt dưới:


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

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

Tạo một menu với id="messageList" mang đến vấn đề hiển thị message được trao từ bỏ SignalR Hub.

Thêm tệp tin script tham chiếu đến SignalR với code ứng dụng chat chat.js dòng nhưng bọn họ tạo nên sinh hoạt bước tiếp theo

Trong tlỗi mục wwwroot/js, tạo nên 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 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 ưa thích một chút về code trên:

Tạo và ban đầu một kết nối.Thêm vào button submit một handler để gửi message cho tới hub.Thêm đối kết nối một handler nhằm nhấn message trường đoản cú hub.Chạy ứng dụngNhấn CTRL + F5 nhằm chạy ứng dụng sống chế độ không debug.Copy url từ thanh hao hệ trọng trình chuyên chú, mtại một trình chăm sóc khác hoặc tab bắt đầu và paste url vào thanh khô can dự.Chọn một trình coi xét, gõ một thương hiệu với message và cliông chồng button Sover Message.

Xem thêm: 26/9 Là Cung Gì ? Sinh Ngày 26 Tháng 9

Ngay nhanh chóng thương hiệu và message đôi khi hiện lên sinh sống cả 2 trình duyệt

Tổng kết

Đây là phía dẫn cơ phiên bản dành riêng cho các bạn mới bất đầu với SignalR, tuy thế sẽ gồm kỹ năng về ASPhường.NET core. Các bước thực hiện khá dễ dàng và dễ dàng nắm bắt đúng không ạ các bạn. Hy vọng bài viết mang đến mang lại chúng ta các điều có ích.

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

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


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