Category: signalR

Angular , CORS and .NET Core SignalR

I have written a .NET Core  SignalR + Agular Observable of continously delivering the data. (http://msprogrammer.serviciipeweb.ro/2018/06/25/net-core-signalr-hub-angular-observable/ )

The setup is that .NET WebAPI resides in Visual Studio Project ( .sln. .csproj) and Angular Project is separate in another folder.

There are some settings in the development to be done in order to work

  1. Setting CORS in .NET Core  ( not really necessary- see below)
  2. Usually you will not need to set CORS in .NET Core if you plan to deliver Angular and .NET Core in the same site.

    But anyway, to allow anyoneto call you API , you will do something like this :

    services.AddCors();
    services.AddMvc();
    //...
     app.UseCors(it =>it.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
    //if (env.IsDevelopment())
    //{
    //    app.UseDeveloperExceptionPage();
    //}
    
    

    Of course, you can set for a domain, a header , and so on

    Also , do not forget to handle CORS errors – either by commenting the developer exception page, either by using a custom middleware, like https://blog.jonathaneckman.io/handling-net-core-web-api-exceptions-with-an-aurelia-fetch-interceptor/

  3. Setting  CORS like it does not exists for Angular
  4. For this:

    In the Angular environment.ts put those:

    export const environment = {

    production: false, //put also in the prod

    urlAPI:’/’

    }

    • In production: deliver AOT Angular compiled in the same folder with the .NET
    • This will ensure that , when you send the Angular AOT build with .NET Core WebAPI in the same site, it will work. NO CORS involved 😉

    • In development: This mean Angular ng server intercepting  calls

    Then create a file named proxy.conf.js and put this to redirect:

    const PROXY_CONFIG = [
        {
          context: [
              "/employees",
              "/api",                
          ],
          target: "http://<url to the .NET Core API>/",
          secure: false,
          "changeOrigin": true,
          "logLevel": "debug",
          ws: true
        }
    ]
    module.exports = PROXY_CONFIG;
    
    

    Then run:

    ng serve –proxy-config proxy.conf.js –open

  • Setting SignalR for Angular in development
  • See ws: true in previous proxy.conf.js ? That is all, if you run

    ng serve –proxy-config proxy.conf.js –open

    SameId – skip

    In the previous post I have show how two users can see each other if they are editing the same product ( in my example , product id 5)

    But not in all cases the users should be notified about each other – like in , let’s say, view product Id 5.

    In this case we have an attribute to apply to the action [SameIdSkip]

    A video will show you :

    Same object edited by 2 users–proactively notifying users

    This is a practical example about how two users that comes on the same page will be notified one about other( after an idea of Adrian Petcu) . See the picture :

    image

    With the NuGet package you can install in your application in this steps:

    To run :
    1. install package from Nuget
    2. in Filter.Config add following line:  filters.Add(new SameIdAlert.SameIdFilter());
    3. In Route.Config, after
    routes.MapHubs();
    GlobalHost.DependencyResolver.Register(typeof(IAssemblyLocator) ,() => new SameIdAlert.SameIdAssemblyLocator());
    4. In the View that you want the user to be notified add the following lines in the @section scripts{
    <!–Script references. –>
    <!–The jQuery library is required and is referenced by default in _Layout.cshtml. –>
    <!–Reference the SignalR library. –>
    <script src=”~/Scripts/jquery.signalR-1.1.3.js”></script>  <!–or whatever signalr library version you have –>
    <!–Reference the autogenerated SignalR hub script. –>
    <script src=”~/signalr/hubs”></script>
    <!–SignalR script to update the chat page and send messages.–>

    and somewhere:

    @{Html.RenderPartial(“SameId”);}

    5. In _Layout  move jquery declaration
    @Scripts.Render(“~/bundles/jquery”)

    before RenderBody

    6. If you decide to put into _Layout and you want to skip an action, please put  [SameIdSkipAttribute] to the action

    7. If you want more action parameters than the default id , just put
    [SameIdAttribute(“parameter name 1″,”parameter name2”)
    to the action
    8. If you decide that you want just several actions then modify
    filters.Add(new SameIdAlert.SameIdFilter(false));
    and put
    [SameIdAttribute]
    View online at http://SameId.apphb.com

    Source code at https://github.com/ignatandrei/SameId

    NuGet package at https://www.nuget.org/packages/sameid

    Video demo at http://youtu.be/wjkoMs98Z8U

    If you want to help me, see the issues that can be solved here:https://github.com/ignatandrei/SameId/issues