Signalr là gì

  -  

Bài viết này chỉ dẫn phần đa bước cơ phiên bản xây đắp một ứng dụng real-time sử dụng SignalR. quý khách học làm cố gắng như thế nào để:

Tạo một project web.Thêm tlỗi viện SignalR client.Tạo một SignalR hub.Cấu hình project nhằm áp dụng SignalR.Thêm code gửi message từ bất kể client nào mang lại tất cả các client vẫn kết nối.

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

Bạn sẽ xem: Signalr là gì

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

Chuẩn bị môi trường thiên nhiên.NET Chip Core SDK 2.2 hoặc bắt đầu rộng.Tạo một project webTừ thực đơn, chọn File > New Project.


*

Chọn Web Application để chế tác project áp dụng Razor Pages.Thêm thư viện SignalR client

Thư viện SignalR server được gửi vào vào Microsoft.AspNetVi xử lý Core.App metapackage. Tlỗi viện JavaScript client ko được tự động cung cấp vào project. Trong chỉ dẫn này, các bạn thực hiện Library Manager (LibMan) nhằm nhấn tlỗi viện client trường đoản cú ubpkg. unpkg là một trong nội dung delivery network (CDN) dòng mà hoàn toàn có thể gây ra bất kỳ vật gì được tìm thấy trong npm (Node.js packge manager).

Trong Solution Explorer, right-cliông chồng 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 lựa chọn unpkg.Về Library, gõ aspnet/signalr1, với chọn version mới nhất không hẳn phiên bạn dạng previews.


*

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

Libman tạo thành một thỏng mục wwwroot/lib/signalr và copy file đang lựa chọn cho tới nó.

Xem thêm: Trang Chủ - Chơi Tú Lơ Khơ

Tạo một SignalR hubTrong thỏng mục project SignalRChat, sản xuất một thư mục Hubs.Trong tlỗi mục Hubs, tạo thành một file ChatHub.cs cùng với code mặt dưới:

using Microsoft.AspNetChip 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 làm chủ số đông liên kết, đội cùng message.Pmùi hương thức SendMesssage có thể được hotline vị một client sẽ liên kết nhằm gửi một message mang lại toàn bộ những clients. Code JavaScript call cách tiến hành được chỉ ra ở bước sau trong bài xích giải đáp này. Code SignalR là bất đồng điệu để hỗ trợ tối ta kỹ năng không ngừng mở rộng.

Cấu hình SignalR

SignalR server bắt buộc được thông số kỹ thuật nhằm trải qua SignalR request đến SignalR.

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

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

Thêm SignalR client code

Tgiỏi nắm văn bản trong Pages/Index.cshtml cùng với code mặt dưới:

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

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

Tạo một danh sách với id="messageList" mang đến Việc hiển thị message được nhận trường đoản cú SignalR Hub.

Thêm file script tsay đắm chiếu đến SignalR và code áp dụng chat chat.js dòng mà chúng ta tạo thành sống bước tiếp theo

Trong tlỗi mục wwwroot/js, chế tạo một file chat.js 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 thích hợp một í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 liên kết một handler nhằm dìm message trường đoản cú hub.Chạy ứng dụngNhấn CTRL + F5 để chạy ứng dụng sinh hoạt cơ chế không debug.Copy url trường đoản cú thanh cửa hàng trình để ý, mở một trình chăm bẵm không giống hoặc tab new và paste url vào tkhô giòn ảnh hưởng.Chọn một trình coi ngó, gõ một tên và message với cliông xã button Skết thúc Message.

Xem thêm: Phim Tân Kim Bình Mai 3D 4D Kim Binh Mai 2017 Tap 1 Hd Vietsub

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

Tổng kết

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

Bài viết được dịch tự nguồn Tutorial: Get started with ASP.NET Vi xử lý Core SignalR

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