پیام فرستاده شده از هسته ASP.NET به Client Angular با استفاده از SignalRTechnologies

Broadcasting Message From ASP.NET Core To Angular Client Using SignalR

Technologies

اخیرا تیم دات نت(.Net) SignalR را برای ASP.NET Core اعلام کردند. بنابراین، در این مقاله، من سعی می کنم نشان دهم چگونه می توانیم SignalR را با هسته ASP.NET برای یک Angular client استفاده کنیم.

قبل از شروع، تنظیمات و مشخصات محیط کد نویسی من به صورت زیر است.

در این مقاله، من قصد دارم برای پوشش سناریو، در آن یک client را با استفاده از Angular بسازم (که می تواند هر client جاوا اسکریپت باشد). برای طرف سرور(server side)، من از ASP.NET Core استفاده می کنم که متد POST API را دارد. در روش POST، من میخواهم پیامی به تمام clients های فعال با استفاده از سوکت SignalR ارسال کنم.

Building ASP.NET Core application (MessageHub and WebApi)

ابتدا ما یک ASP.NET Core web application ایجاد می کنیم. برای این منظور، command prompt را باز کنید و این دستور را تایپ کنید.

dotnet new web

این یک پوشه خالی web application را ایجاد می کند. این برنامه بسیار کم ASP.NET Core خواهد بود. این پروژه را با استفاده از کد VS باز کنید.

در فایل (.csproj) signalR alpha release package را اضافه کنید:

< Project Sdk="Microsoft.NET.Sdk.Web" >  
    < PropertyGroup >  
        < TargetFramework >netcoreapp2.0< /TargetFramework >  
  < /PropertyGroup >  
  < ItemGroup >  
    < Folder Include="wwwroot\" / >
  < /ItemGroup >  
  < ItemGroup >  
    < PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" / >
    < PackageReference Include="Microsoft.AspNetCore.SignalR" Version="1.0.0-alpha1-final" / >
  < /ItemGroup >  
< /Project >

فایل (.csproj) را ذخیره کنید و به command prompt بروید.دستور زیر را وارد کنید تا SignalR package به برنامه ASP.NET Core اضافه شود. گاهی اوقات، شما باید کد VS را مجددا راه اندازی کنید تا intelliSense بسته شده را دوباره دریافت کنید.

dotnet restore

حالا SignalR را در startup.cs اضافه کنید

public void ConfigureServices(IServiceCollection services)  
        {  
            services.AddSignalR();  
            services.AddMvc();  
        }

در حال حاضر، ما می خواهیم یک Hub ایجاد کنیم (به عنوان مثال MessagingHub) این هابی (Hub) است که clients ها در آن قرار می گیرند و سپس broadcast messages را دریافت می کنند.

یک فایل جدید به نام MessageHub.cs ایجاد کنید. در اینجا ما متد " Send " را در جایی که میخواهیم پیام را منتقل کنیم و این پیام را برای همه clients ها پخش کنیم قرار می دهیم.

public class MessageHub : Hub  
{  
    public Task Send(string message)  
    {  
        return Clients.All.InvokeAsync("Send", message);  
    }  
}

سپس، مسیر(route) ASP.NET Core را به hub خود (یعنی MessageHub) پیکربندی کنید.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)  
        {  
            app.UseSignalR(routes =>  
            {  
                routes.MapHub< MessageHub >("message");  
            });  
  
            app.UseMvc();  
  
        }

حالا ما یک Controller ساده با اکشن Post ایجاد می کنیم.برای اهداف آزمایشی ، اکشن POST را از postman فرا می خوانیم و این پیام را برای همه clients ها پخش (broadcast) خواهیم کرد.

public class MessageController : Controller   
    {  
        private IHubContext< MessageHub > _messageHubContext;  
  
        public MessageController(IHubContext< MessageHub > messageHubContext)  
        {   
            _messageHubContext = messageHubContext;  
        }  
  
        public IActionResult Post()  
        {  
            //Broadcast message to client  
            _messageHubContext.Clients.All.InvokeAsync("send", "Hello from the hub server at " +   
DateTime.Now.ToString("dd-MM-yyyy HH:mm:ss"));  
   
            return Ok();  
        }  
    }

از آنجا که ما در حال ساخت یک برنامه Angular client جداگانه هستیم که در port جداگانه اجرا می شود، ما باید CORS را در startup فعال کنیم.

public class Startup  
    {  
        // This method gets called by the runtime. Use this method to add services to the container.  
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940  
        public void ConfigureServices(IServiceCollection services)  
        {  
            services.AddSignalR();  
            services.AddCors(options => options.AddPolicy("AllowAny", x=> {  
                    x.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin();  
                }));  
            services.AddMvc();  
        }  
  
        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.  
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)  
        {  
            app.UseCors("AllowAny");  
  
            app.UseSignalR(routes =>  
            {  
                routes.MapHub< MessageHub >("message");  
            });  
  
            app.UseMvc();  
  
        }  
    }

ساخت Angular Client App

حالا اجازه دهید که یک برنامه Angular client با استفاده از angular CLI را ایجاد کنیم.برای ایجاد یک برنامه ساده angular نوع (ng new ) در پنجره node.js command prompt وارد کنید.این دستور یک basic Angular را ایجاد می کند. هنگامی که پروژه با موفقیت ایجاد می شود، npm install را تایپ کنید تا dependencies ها را نصب کنید.

برای استفاده از signalR در client، ما ابتدا باید با استفاده از دستور زیر، ماژول signalper client npm را نصب کنیم:

npm install @aspnet/signalr-client –save

بعد از نصب موفق ، package.json به شکل زیر در می آید:

{  
  "name": "signal-r-angular4",  
  "version": "0.0.0",  
  "license": "MIT",  
  "scripts": {  
    "ng": "ng",  
    "start": "ng serve",  
    "build": "ng build",  
    "test": "ng test",  
    "lint": "ng lint",  
    "e2e": "ng e2e"  
  },  
  "private": true,  
  "dependencies": {  
    "@angular/animations": "^4.2.4",  
    "@angular/common": "^4.2.4",  
    "@angular/compiler": "^4.2.4",  
    "@angular/core": "^4.2.4",  
    "@angular/forms": "^4.2.4",  
    "@angular/http": "^4.2.4",  
    "@angular/platform-browser": "^4.2.4",  
    "@angular/platform-browser-dynamic": "^4.2.4",  
    "@angular/router": "^4.2.4",  
    "@aspnet/signalr-client": "^1.0.0-alpha1-final",  
    "core-js": "^2.4.1",  
    "rxjs": "^5.4.2",  
    "zone.js": "^0.8.14"  
  },  
  "devDependencies": {  
    "@angular/cli": "1.4.4",  
    "@angular/compiler-cli": "^4.2.4",  
    "@angular/language-service": "^4.2.4",  
    "@types/jasmine": "~2.5.53",  
    "@types/jasminewd2": "~2.0.2",  
    "@types/node": "~6.0.60",  
    "codelyzer": "~3.2.0",  
    "jasmine-core": "~2.6.2",  
    "jasmine-spec-reporter": "~4.1.0",  
    "karma": "~1.7.0",  
    "karma-chrome-launcher": "~2.1.1",  
    "karma-cli": "~1.0.1",  
    "karma-coverage-istanbul-reporter": "^1.2.1",  
    "karma-jasmine": "~1.1.0",  
    "karma-jasmine-html-reporter": "^0.2.2",  
    "protractor": "~5.1.2",  
    "ts-node": "~3.2.0",  
    "tslint": "~5.7.0",  
    "typescript": "~2.3.3"  
  }  
}

سپس، Angular app را در کد VS باز کنید و سعی کنید signalR را مصرف(consume) کنید. در این راستا ما تلاش می کنیم تا دو چیز را انجام دهیم:

ما سعی خواهیم کرد با HubConnection ارتباط برقرار کنیم و بعد از این که این ارتباط موفقیت آمیز بود ، یک console log می برای گفتن (MessageHub Connected) می نویسیم.
در هر پیامی که از client دریافت شده است، ما این پیام را در client’s console نمایش می دهیم.

در برنامه Angular client ، فایل app.component.ts را باز کرده و کد زیر را در آن اضافه کنید:

import { Component, OnInit } from '@angular/core';  
import { HubConnection } from '@aspnet/signalr-client';  
  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent implements OnInit {  
  title = 'app';  
  
  ngOnInit() : void {  
  
    let connection = new HubConnection('http://localhost:5000/message');  
      
    connection.on('send', data => {  
        console.log(data);  
    });  
      
    connection.start()  
    .then(() => {  
      console.log('MessageHub Connected');  
    });  
  
  }  
}

Test our sample

همانطور که هر دو برنامه ما آماده هستند، وقت آن است که این قابلیت را بپذیریم. برای آزمایش، ما قصد داریم مراحل زیر را دنبال کنیم:

در command prompt ، dotnet را اجرا کنید تا برنامه ASP.NET Core ما اجرا شود.
در node.js command prompt ، ng serve را اجرا کنیدتا Angular application ما اجرا می شود.
مرور گر و کنسولش را باز کرده و به http://localhost:4200 بروید.
برنامه Postman را باز کنید، درخواست POST را به (http://localhost:5000/api/message) ارسال کنید.
شما نتیجه 200 OK را در postman دریافت خواهید کرد.
در کنسول مرورگر، پیامی به عنوان "( Hello from the hub server at 08-10-2017 00:41:12)" را مشاهده خواهید کرد.

در آزمایش من، از 3 مرورگر مختلف (به عنوان 3 clients مختلف) استفاده کرده ام و همه 3 پیام را از هاب دریافت کرده ام. در زیر تصاویری از آزمایشات من هستند.