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

Setting CORS in .NET Core ( not really necessary- see below)

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/

Setting CORS like it does not exists for Angular

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://&lt;url to the .NET Core API&gt;/",
      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 :

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

Category: signalR

Angular , CORS and .NET Core SignalR

SameId – skip

Same object edited by 2 users–proactively notifying users

Andrei Ignat weekly software news(mostly .NET)