វិធីបន្ថែមមុខងារគេហទំព័រតាមពេលវេលាជាក់ស្តែងទៅក្នុងកម្មវិធី Angular ដោយប្រើ ASP.NET

ប្លុក

វិធីបន្ថែមមុខងារគេហទំព័រតាមពេលវេលាជាក់ស្តែងទៅក្នុងកម្មវិធី Angular ដោយប្រើ ASP.NET

នៅក្នុងប្រកាសនេះខ្ញុំនឹងឆ្លងកាត់ជំហានដែលត្រូវការដើម្បីបន្ថែមមុខងារគេហទំព័រតាមពេលវេលាជាក់ស្តែងទៅក្នុងកម្មវិធី Angular ដោយប្រើ ASP.NET ការភ្ជាប់សេវាកម្មស្នូល SignalR និង Azure SignalR សម្រាប់មុខងារ Azure ២.០ ប្រធានបទជាក់លាក់ដែលអត្ថបទនេះនឹងគ្របដណ្តប់គឺ



  • បន្ថែម ASP.NET ស្នូល SignalR ទៅ ASP.NET Core 2.1 Web API
    • ASP.NET សញ្ញាស្នូល
    • ASP.NET ស្នូល SignalR ធ្វើមាត្រដ្ឋានចេញដោយប្រើ
      • យន្តហោះខាងក្រោយសេវាកម្ម Azure SignalR
      • យន្ដហោះខាងក្រោយរបស់ Redis Cache
  • បោះពុម្ពផ្សាយ/ជាវសារទៅ SignalR Hub ពីកម្មវិធី Angular
  • បោះពុម្ពផ្សាយ/ជាវសារទៅ SignalR Hub ដោយប្រើសេវាកម្មភ្ជាប់ Azure SignalR សម្រាប់មុខងារ Azure 2.0 ពីកម្មវិធី Angular
  • បង្កើតរូបភាព Docker និងដាក់ពង្រាយទៅសេវាកម្ម Azure Kubernetes

ឧបករណ៍ដែលប្រើដើម្បីអភិវឌ្ components សមាសធាតុទាំងនេះគឺ Visual Studio for Mac/VS Code/VS 2017, AKS Dashboard, Docker for Desktop និង kubectl ។

បន្ថែម ASP.NET ស្នូល SignalR ទៅ ASP.NET Core 2.1 Web API

ASP.NET Core SignalR គឺជាបណ្ណាល័យប្រភពបើកចំហដែលងាយស្រួលបន្ថែមមុខងារគេហទំព័រតាមពេលវេលាជាក់ស្តែងទៅក្នុងកម្មវិធី។ មុខងារបណ្តាញតាមពេលវេលាជាក់ស្តែងអនុញ្ញាតឱ្យលេខកូដផ្នែកខាងម៉ាស៊ីនមេជំរុញមាតិកាដល់អតិថិជនភ្លាមៗ។ ផ្នែកបន្ទាប់នឹងឆ្លងកាត់ការផ្លាស់ប្តូរដែលត្រូវការដើម្បីបន្ថែម SignalR ទៅ ASP.NET Core 2.1 Web API រួមជាមួយខ្នាត SignalR ចេញដោយប្រើសេវាកម្ម Azure SignalR និង Redis backplanes



ASP.NET សញ្ញាស្នូល

ចំនុចសំខាន់ៗអំពីដ្យាក្រាមសមាសភាគដែលបានបង្ហាញខាងក្រោមគឺ

ប្រតិកម្មបន្ទះប្រតិទិនដើម
  • នៅពេលរុករកទៅកម្មវិធី Angular (កម្មវិធីរុករក) អ្នកប្រើនឹងត្រូវបានផ្ទៀងផ្ទាត់ហើយ Access Token នឹងត្រូវបានទាញយកពី Azure AD ដោយប្រើ MSAL
  • កម្មវិធីហ្គោហ្គោលនឹងហុចថូខឹនអ្នកកាន់ (ជេ។ ធី។ ធី។ វី) តាមសំណើនិង ASP.NET Core 2.1 Web API នឹងផ្តល់សុពលភាពដល់ Access Token
  • កម្មវិធី Angular នឹងបង្កើតការតភ្ជាប់ទៅ ASP.NET Core SignalR Hub (Web API) និងបោះពុម្ពផ្សាយ/ជាវសារ
  • កម្មវិធី Angular នឹងបង្កើតការតភ្ជាប់ទៅសេវាកម្ម Azure SignalR ដោយប្រើមុខងារកម្មវិធីចុងក្រោយហើយបោះពុម្ពផ្សាយ/ជាវសារ
  • កម្មវិធីមុំ, ASP.NET Core Web API និង SQL Server ត្រូវបានរៀបចំឡើងនៅក្នុងសេវាកម្ម Azure Kubernetes ។ ខ្ញុំបានសរសេរកូដពណ៌ផោដសន្មតថាមានការកំណត់រចនាសម្ព័ន្ធថ្នាំងពីរ។



ជំហានដែលត្រូវការដើម្បីបើកដំណើរការ ASP.NET ស្នូល SignalR in ASP.NET Core 2.1 Web API គឺ

javascript បំលែងទៅជាអណ្តែត
  • កំណត់រចនាសម្ព័ន SignalR Hub: SignalR Hubs API អនុញ្ញាតឱ្យអ្នកហៅវិធីសាស្រ្តនៅលើអតិថិជនដែលបានភ្ជាប់ពីម៉ាស៊ីនមេ។ នៅក្នុងកូដម៉ាស៊ីនមេអ្នកកំណត់វិធីសាស្រ្តដែលត្រូវបានហៅដោយអតិថិជន។ នៅក្នុងកូដអតិថិជនអ្នកកំណត់វិធីសាស្រ្តដែលត្រូវបានហៅចេញពីម៉ាស៊ីនមេ។ SignalR យកចិត្តទុកដាក់លើអ្វីគ្រប់យ៉ាងនៅពីក្រោយឆាកដែលធ្វើឱ្យការទំនាក់ទំនងរវាងអតិថិជនទៅម៉ាស៊ីនមេនិងម៉ាស៊ីនបម្រើដល់អតិថិជនអាចធ្វើទៅបាន។ បន្ថែមចំណុចប្រទាក់ INotificationHub និងថ្នាក់ NotificationHub ដែលត្រូវការដើម្បីកំណត់វិធីសាស្រ្តដែលត្រូវបានហៅដោយអតិថិជន។
public interface INotificationHub { Task MessageNotification(string message); Task PublishMessageAck(string value); } public class NotificationHub : Hub { public async Task PublishMessage(string message) { await this.Clients.AllExcept(this.Context.ConnectionId).MessageNotification($'Broadcast: {message}'); await this.Clients.Caller.PublishMessageAck($'Broadcast Ack: {message}'); } public override async Task OnConnectedAsync() { await Groups.AddToGroupAsync(Context.ConnectionId, 'Users'); await base.OnConnectedAsync(); } public override async Task OnDisconnectedAsync(Exception exception) { await Groups.RemoveFromGroupAsync(Context.ConnectionId, 'Users'); await base.OnDisconnectedAsync(exception); } }
  • បញ្ជាក់ SignalRConfigMode SingalRConfigMode = SignalRConfigMode.ASPNetCoreSignalR នៅក្នុងថ្នាក់ Startup.cs
  • ធ្វើបច្ចុប្បន្នភាពវិធីសាស្ត្រកំណត់រចនាសម្ព័ន្ធនិងបន្ថែមសេវាកម្ម SignalR ។
services.AddSignalR(options => { options.EnableDetailedErrors = true; });
    • ធ្វើបច្ចុប្បន្នភាពវិធីសាស្ត្រកំណត់រចនាសម្ព័ន្ធនិងបន្ថែម SignalR ទៅ | _+_ | ស្នើសុំដំណើរការបំពង់បង្ហូរប្រេង។ តម្លៃអថេរ SignalRHub ដែលខ្ញុំបានបញ្ជាក់ក្នុងគំរូគឺ | _+_ | ។
IApplicationBuilder
  • អនុញ្ញាតឱ្យអ្នកផ្ទៀងផ្ទាត់ភាពត្រឹមត្រូវ JWT អានការចូលប្រើថូខឹនពីខ្សែអក្សរសំណួរនៅពេល WebSocket ឬម៉ាស៊ីនមេដែលបានផ្ញើសំណើព្រឹត្តិការណ៍ចូលមក | _+_ | វិធីសាស្រ្ត។
/api/SignalRHub
  • ការទាមទាររបស់អ្នកប្រើប្រាស់ដែលមានការអនុញ្ញាតអាចចូលដំណើរការបានតាមរយៈការហៅ Context.User.Claims នៅក្នុងថ្នាក់ NotificationHub

នៅក្នុងសេណារីយ៉ូថ្នាំង/ម៉ាស៊ីនមេតែមួយនេះដំណើរការល្អទោះនៅពេលណា ASP.NET Core 2.1 Web API ត្រូវបានធ្វើមាត្រដ្ឋានចេញឧ។ នៅពេលដំណើរការផតច្រើនជាងមួយអតិថិជនដែលភ្ជាប់ទៅ SignalR Hub នៅលើផតមួយនឹងមិនទទួលបានសារដែលបានផ្សព្វផ្សាយនៅលើ SignalR Hub នៅលើផតផ្សេងទៀតទេ។ ASP.NET Core SignalR គាំទ្រ Redis Cache និង Azure SignalR Service ខ្នាត។

ASP.NET ស្នូល SignalR ធ្វើមាត្រដ្ឋានចេញដោយប្រើយន្ដហោះខាងក្រោយរបស់ Redis Cache

ឃ្លាំងសម្ងាត់ Redis អាចត្រូវបានប្រើជាយន្តហោះខាងក្រោយសម្រាប់ ASP.NET ស្នូល SignalR ធ្វើមាត្រដ្ឋានចេញ។ ឃ្លាំងសម្ងាត់ Redis ត្រូវបានប្រើជាផាប់/អនុដើម្បីបញ្ជូនសារទៅម៉ាស៊ីនមេផ្សេងទៀត។ ជម្រើសនេះត្រូវការសម័យស្អិតដើម្បីបើកដំណើរការ។ ការផ្លាស់ប្តូរដ្យាក្រាមសមាសភាគតែមួយគត់ពីការអនុវត្តមុនគឺថា Web API Pods កំពុងទំនាក់ទំនងជាមួយសេវាកម្ម Redis Cache ។

ការផ្លាស់ប្តូរលេខកូដដែលត្រូវការដើម្បីប្រើយន្តហោះខាងក្រោយរបស់ Redis គឺ

  • ដំឡើងកញ្ចប់ Microsoft.AspNetCore.SignalR.Redis Nuget
  • បញ្ជាក់ SignalRConfigMode SingalRConfigMode = SignalRConfigMode.Redis នៅក្នុងថ្នាក់ Startup.cs
  • ធ្វើបច្ចុប្បន្នភាពវិធីសាស្ត្រកំណត់រចនាសម្ព័ន្ធនិងបន្ថែម AddRedis
app.UseSignalR((options) => { options.MapHub(SignalRHub); });
  • បញ្ជាក់តម្លៃនៃ | _+_ | នៅក្នុង appsettings.json

ASP.NET ស្នូល SignalR ធ្វើមាត្រដ្ឋានចេញដោយប្រើយន្តហោះខាងក្រោយសេវាកម្មអាសួរី

សេវាកម្មអាសឺរៀសឺអាល់អរអាចត្រូវបានប្រើជាយន្តហោះខាងក្រោយសម្រាប់ ASP.NET ស្នូល SignalR ធ្វើមាត្រដ្ឋានចេញ។ ជម្រើសនេះមិនត្រូវការវគ្គស្អិតដើម្បីបើកដំណើរការទេ។មូលហេតុចំបងមួយក្នុងការប្រើសេវាកម្មអាហ្សូរីស៍អាល់ខលគឺភាពសាមញ្ញ។ ជាមួយសេវាកម្មអាសឺរៀស្កាល់អេលអេសអ្នកមិនចាំបាច់ដោះស្រាយបញ្ហាដូចជាដំណើរការភាពអាចរកបានភាពអាចរកបាន។ការផ្លាស់ប្តូរដ្យាក្រាមសមាសភាគតែមួយគត់ពីការអនុវត្តមុនគឺ Web API Pods កំពុងទំនាក់ទំនងជាមួយសេវាកម្ម Azure SignalR ។

របៀបទិញ hempcoin

ការផ្លាស់ប្តូរលេខកូដដែលត្រូវការដើម្បីប្រើសេវាកម្ម Azure SignalR គឺ

  • ដំឡើងកញ្ចប់ Microsoft.Azure.SignalR Nuget
  • បញ្ជាក់ SignalRConfigMode SingalRConfigMode = SignalRConfigMode.AzureSignalRService នៅក្នុងថ្នាក់ Startup.cs
  • ធ្វើបច្ចុប្បន្នភាពវិធីសាស្ត្រកំណត់រចនាសម្ព័ន្ធនិងបន្ថែម AddAzureSignalR
Service.AddAuthentication(...).AddJwtBearer(...)
  • ធ្វើបច្ចុប្បន្នភាពវិធីសាស្ត្រកំណត់រចនាសម្ព័ន្ធនិងបន្ថែម UseAzureSignalR
OnMessageReceived = context => { var accessToken = context.Request.Query['access_token']; var path = context.HttpContext.Request.Path; if (!string.IsNullOrEmpty(accessToken) && (path.StartsWithSegments(SignalRHub))) { context.Token = accessToken; } return Task.CompletedTask; },
  • បញ្ជាក់តម្លៃនៃ | _+_ | នៅក្នុង appsettings.json

បោះពុម្ពផ្សាយ/ជាវសារទៅ SignalR Hub ពីកម្មវិធី Angular

គំរូកម្មវិធី Angular ត្រូវបានធ្វើបច្ចុប្បន្នភាពដើម្បីបោះពុម្ពផ្សាយ/ជាវប្រចាំទៅ SignalR Hub ។ ចង្អុលបង្ហាញសំខាន់ៗអំពីលេខកូដដែលបានរាយខាងក្រោមគឺ

  • ដំឡើង aspnet/signalr ដែលផ្តល់ការគាំទ្រដល់អតិថិជន JavaScript និង TypeScript សម្រាប់ SignalR សម្រាប់ ASP.NET ស្នូល
  • SignalR Hub URL ត្រូវបានបញ្ជាក់នៅក្នុង $ {this.config.get () API_URL} $ {this.config.get () ។ SIGNALR_HUB}
  • ត្រូវការថូខឹនដើម្បីផ្តល់សិទ្ធិដល់សំណើទៅ SignalR Hub ហើយត្រូវបានបញ្ជាក់នៅក្នុង {accessTokenFactory: () => this.authHelper.getAccessTokenFromCache ()}
  • ចន្លោះពេលតភ្ជាប់ម្តងទៀតគឺ ១០០០០
  • កម្មវិធីជាវសារការជូនដំណឹងនិងការបោះពុម្ពផ្សាយសារអេឡិចត្រូនិករបស់ SignalR Hub
  • កម្មវិធីផ្ញើសារទៅ SignalR Hub ដោយប្រើ PublishMessage
  • បញ្ជាក់ 'API_URL'៖ 'WEB_API_URL' នៅក្នុង 'environment.ts'
services.AddSignalR(options => { options.EnableDetailedErrors = true; }).AddRedis(RedisConnectionString);

បោះពុម្ពផ្សាយ/ជាវសារទៅ SignalR Hub ដោយប្រើសេវាកម្មភ្ជាប់ Azure SignalR សម្រាប់មុខងារ Azure 2.0 ពីកម្មវិធី Angular

ប្លុកមុននៃស៊េរីនេះពិពណ៌នាអំពីជំហានដែលត្រូវការដើម្បីបង្កើតមុខងារកម្មវិធីជាមួយការភ្ជាប់សេវាកម្ម Azure SignalR សម្រាប់មុខងារ Azure ២.០គំរូកម្មវិធី Angular ត្រូវបានធ្វើបច្ចុប្បន្នភាពដើម្បីបោះពុម្ពផ្សាយ/ជាវសេវាកម្ម Azure SignalR Hub តាមរយៈមុខងារ Azure (អ្នកមិនចាំបាច់ធ្វើជាម្ចាស់ផ្ទះកម្មវិធីគេហទំព័រទេ) ។ ចង្អុលបង្ហាញសំខាន់ៗអំពីលេខកូដដែលបានរាយខាងក្រោមគឺ

  • ដំឡើង aspnet/signalr ដែលផ្តល់ការគាំទ្រដល់អតិថិជន JavaScript និង TypeScript សម្រាប់ SignalR សម្រាប់ ASP.NET ស្នូល
  • $ {this.config.get () ។ FUNCTION_APP_URL} ចរចាសំណើសំណើនឹងត្រឡប់វត្ថុ SignalRConnectionInfo ដែលមាន url និង accessToken ។
  • SignalRConnectionInfo ត្រូវការដើម្បីភ្ជាប់ទៅ Azure SignalR Service Hub ដោយបញ្ជាក់ accessTokenFactory: () => info.accessToken និង url in withUrl (url, options)
  • ចន្លោះពេលតភ្ជាប់ម្តងទៀតគឺ ១០០០០
  • កម្មវិធីផ្ញើសារទៅ SignalR Hub ដោយផ្ញើសំណើប្រកាសទៅ $ {this.config.get () ។ FUNCTION_APP_URL} sendmessage
  • ការជាវកម្មវិធីទៅ SendMessage ពោលគឺ this.hubConnection.on ('sendMessage', (ទិន្នន័យ៖ ណាមួយ) នៃ SignalR Hub
  • បញ្ជាក់ 'FUNCTION_APP_URL': 'FUNCTION_APP_URLFUNCTION_APP_URL' នៅក្នុង environment.ts
'RedisConnectionString': 'REDIS_CONNECTION_STRING'

បង្កើតរូបភាពឌឺឃឺរហើយដាក់ពង្រាយទៅសេវាកម្មអាហ្សូរគូប៊ឺណេត

បង្កើតរូបភាព docker សម្រាប់ ASP.NET Core Web API និង Angular App និងដាក់ពង្រាយរូបភាព docker ទាំងនេះទៅកាន់ចង្កោមសេវាកម្ម Azure Kubernetes ។ បន្ទាប់ពីការដាក់ពង្រាយសូមចូលទៅកាន់កម្មវិធី Angular ហើយផ្ញើសារដោយប្រើ ASP.NET ចំនុចស្នូល SignalR ឬមុខងារ Azure 2.0 ។

សង្ខេប

នេះបញ្ចប់អត្ថបទស្តីពីការបន្ថែមមុខងារគេហទំព័រតាមពេលវេលាជាក់ស្តែងទៅកម្មវិធី Angular ដោយប្រើ ASP.NET ការភ្ជាប់សេវាកម្មស្នូល SignalR និង Azure SignalR សម្រាប់មុខងារ Azure ២.០ កូដប្រភពពេញលេញអាចទាញយកពី មុខងារ GitHub-Azure និង GitHub-AKS

បោះពុម្ពដំបូងនៅលើ blogs.msdn.microsoft.com

សង្ឃឹមថាការប្រកាសនេះច្បាស់ជាជួយអ្នកហើយ! សូមអរគុណសម្រាប់ការអានសូមជួយចែករំលែកប្រសិនបើអ្នកចូលចិត្ត!

foxsportsgo com roku ធ្វើឱ្យសកម្ម

#រាងកោង #asp-net #docker #kubernetes #azure