How to Connect Aspl.net MVC Signalr Hub To Angular 6 web site
Firstly you need to install nuget package for Create Hub in asp.net web api
for install package
1). open nuget package manage :- (first Create Project )
1) Open Visual Studio go to > File >New Project Choose ASP.Net MVC application.
2). Used MVC. Check Web API reference then hit ok button
3). Right click the project > Manage NuGet package > Browse to install
or
write command nuget package manager console
"Install-Package Microsoft.AspNet.SignalR."
2). now you need to create hub class
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
namespace Tritex.Api
{
[HubName("SendNotificationHub")]
public class NotificationHub : Hub
{
public void NotificationService(string message)
{
Clients.All.messageReceived(message);
}
}
}
3). Create Owin startup.cs class if not avaible
using Microsoft.Owin;
using Owin;
[assembly: OwinStartupAttribute(typeof(NotifSystem.Web.Startup))]
namespace NotifSystem.Web
{
public partial class Startup
{
public void Configuration(IAppBuilder app)
{
app.MapSignalR();
}
}
}
4). Now You Need to Create Controller for api
public class StudentController : ApiController
{
public IHttpActionResult Get(int id, string name)
{
var context = Microsoft.AspNet.SignalR.GlobalHost.ConnectionManager.
GetHubContext<NotificationHub>();
context.Clients.All.messageReceived("Get Student Called");
return Ok("Done");
}
}
5). Now You Need to Impliment Your Agnular 6 code in Create New Service
I Have Created Angular 6 service name "Signalr"
import { Injectable } from '@angular/core';
declare var $: any;
@Injectable()
export class SignalrService {
private connection: any;
private proxy: any;
constructor() { }
public initializeSignalRConnection(): void {
// Host address with port (url) of domain where hub is published
const signalRServerEndPoint = 'http://localhost:57311/';
// Initialize Connection to hubConnection by assign end url
this.connection = $.hubConnection(signalRServerEndPoint);
// Create Hub Proxy By assign name of Hub in CreateHubProxy Methord
this.proxy = this.connection.createHubProxy('SendNotificationHub');
// After Proxy Create "messageRecive" method of Hub(server) Get Response of other Client Notificaiton and "serverMessage" is variable hold message and assign to other method Name is "onMessageRecived" method
this.proxy.on('messageReceived', (serverMessage) => this.onMessageReceived(serverMessage));
// Now Here Connect stablish and if application is Connected to Hub
You Can Send Notification To Other User by This Method "broadcastMessage"
this.connection.start().done((data: any) => {
console.log('Connected to Notification Hub');
this.broadcastMessage();
}).catch((error: any) => {
console.log('Notification Hub error -> ' + error);
});
}
// this method send message to Hub For Other Client
public broadcastMessage(): void {
this.proxy.invoke('notificationService', 'Welcome to Dashboard')
.catch((error: any) => {
console.log('broadcastMessage error -> ' + error);
});
}
// This method Recived Message from Hub send by other client
private onMessageReceived(serverMessage: string) {
console.log('New message received from Server: ' + serverMessage);
}
}
No comments:
Post a Comment
Thank You For Your Great Contribution