问题
I want to read data sent from asp.net web api through signalr in angular client.
For that, I created the Hub at my web api given below :
//ProgressHub.cs
public class ProgressHub : Hub
{
public Task Send(string data)
{
return Clients.All.SendAsync("Send", data);
}
public async Task<string> GetServerTime(IProgress<int> prog)
{
await Task.Run(() => {
for (int i = 0; i < 10; i++)
{
prog.Report(i * 10);
// Call to your client side method.
Clients.Client(Context.ConnectionId).progress(i);
System.Threading.Thread.Sleep(200);
}
});
return DateTime.Now.ToString()+" Test";
}
}
//startup.cs
app.MapSignalR();
and in angular client ,
private proxy: any;
private proxyName: string = 'progressHub';
private connection: any;
constructor(){
// create hub connection
this.connection = $.hubConnection("http://localhost:53642/");
// create new proxy as name already given in top
this.proxy = this.connection.createHubProxy(this.proxyName);
// call the connecion start method to start the connection to send and receive events.
this.startConnection();
this.proxy.on('Send', (data: any) => {
const received = `Received: ${data}`;
alert(received); //here i want to get the data
});
}
startConnection(): void {
this.connection.start().done((data: any) => {
console.log('Now connected ' + data.transport.name + ', connection ID= ' + data.id);
this.proxy.invoke('GetServerTime', serverMessage =>
{
console.log(serverMessage)
});
}).fail((error: any) => {
console.log('Could not connect ' + error);
});
}
when I run debug application , client successfully get connected to signalr console output:
Now connected webSockets, connection ID= 19156d89-d82c-46f9-a109-d8a4828f8ea9
but doesn't return any data that I want to be alert .
回答1:
Edit: Only for asp.net core
Use @aspnet/signalr package to work with SignalR
Example private hub;
this.hub = new HubConnectionBuilder()
.withUrl("/signalr")
.configureLogging(LogLevel.Error)
.build();
this.hub.start().catch(err => console.error(err.toString()));
Then listen in event send from server
this.hub.on("Send", (data) =>
console.log(data);
);
Update
public class HomeController : Controller
{
private readonly IHubContext<NotificationHub> _hubContext;
public HomeController(IHubContext<NotificationHub> hubContext)
{
_hubContext = hubContext;
}
}
public async Task<IActionResult> Index()
{
await _hubContext.Clients.All.SendAsync("Notify", $"Home page loaded at: {DateTime.Now}");
return View();
}
You can view here
回答2:
I got the answer :
My new hub (at asp.net web api) as given below :
public class ProgressHub : Hub
{
public string msg = string.Empty;
public int count = 0;
public void CallLongOperation()
{
Clients.Caller.sendMessage(msg, count);
}
}
and in angular client (using signalr) :
constructor() {
// create hub connection
this.connection = $.hubConnection("http://localhost:53642/");
// create new proxy as name already given in top
this.proxy = this.connection.createHubProxy(this.proxyName);
// call the connecion start method to start the connection to send and receive events.
this.proxy.on('sendMessage', (percentage) =>
{
this.onProgressReceived(percentage)
});
this.startConnection();
}
startConnection(): void {
this.connection.start().done((data: any) => {
this.getProgress();
}).fail((error: any) => {
console.log('Could not connect ' + error);
});
}
private getProgress(): void {
this.proxy.invoke('CallLongOperation')
.catch((error: any) => {
console.log('broadcastMessage error -> ' + error);
});
}
private onProgressReceived(percentage: number) {
//your code logic with data
}
回答3:
Github
Web API with netcoreapp2.2
Install Microsoft.AspNetCore.SignalR
Now send signalR message like the below example
[Route("api/[controller]")]
[ApiController]
[EnableCors("CorsPolicy")]
public class ValuesController : ControllerBase
{
private IHubContext<SignalRHub> _hub;
public ValuesController(IHubContext<SignalRHub> hub)
{
_hub = hub;
}
// GET api/values
[HttpGet]
public ActionResult<IEnumerable<string>> Get()
{
_hub.Clients.All.SendAsync("clientMethodName", "get all called");
return new string[] { "value1", "value2" };
}
// GET api/values/5
[HttpGet("{connectionId}")]
public ActionResult<string> Get(string connectionId)
{
_hub.Clients.Client(connectionId).SendAsync("clientMethodName", "get called");
return "value";
}
}
}
Startup.cs
Client is running on port 4200 ("http://localhost:4200").
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
namespace SignalRWebApp
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
services.AddCors(option =>
{
option.AddPolicy("CorsPolicy", builder =>
builder.WithOrigins("http://localhost:4200")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
});
services.AddSignalR();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseCors("CorsPolicy");
app.UseSignalR(routes =>
{
routes.MapHub<SignalRHub>("/chathub");
});
app.UseHttpsRedirection();
app.UseMvc();
}
}
}
SignalRHub.cs
using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace SignalRWebApp
{
public class SignalRHub : Hub
{
public void GetDataFromClient(string userId, string connectionId)
{
Clients.Client(connectionId).SendAsync("clientMethodName", $"Updated userid {userId}");
}
public override Task OnConnectedAsync()
{
var connectionId = Context.ConnectionId;
Clients.Client(connectionId).SendAsync("WelcomeMethodName", connectionId);
return base.OnConnectedAsync();
}
public override Task OnDisconnectedAsync(Exception exception)
{
var connectionId = Context.ConnectionId;
return base.OnDisconnectedAsync(exception);
}
}
}
- Angular sample app
Install signalR package
npm install @aspnet/signalr --save
import { Component, OnInit } from '@angular/core';
import { HubConnection } from '@aspnet/signalr';
import * as signalR from '@aspnet/signalr';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
private hubConnection: HubConnection;
public ngOnInit() {
this.hubConnection = new signalR.HubConnectionBuilder()
.withUrl("http://localhost:8080/chathub").build();
this.hubConnection.start().then(() => {
console.log("connection started");
}).catch(err => console.log(err));
this.hubConnection.onclose(() => {
debugger;
setTimeout(() => {
debugger;
this.hubConnection.start().then(() => {
debugger;
console.log("connection started");
}).catch(err => console.log(err));
}, 5000);
});
this.hubConnection.on("clientMethodName", (data) => {
debugger;
console.log(data);
});
this.hubConnection.on("WelcomeMethodName", (data) => {
debugger;
console.log(data);
this.hubConnection.invoke("GetDataFromClient", "user id", data).catch(err => console.log(err));
});
}
public stopConnection() {
this.hubConnection.start().then(() => {
console.log("stopped");
}).catch(err => console.log(err));
}
}
来源：https://stackoverflow.com/questions/57087642/how-to-read-data-sent-from-web-api-using-signalr-in-angular