How to Connect Aspl.net MVC Signalr Hub To Angular 6 web site

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

Featured Post

how to find n number of nodes have child or cildren

 how to find n number of nodes have child or cildren for that we use recursive function  const   data = {     'id' : '0' ,...

Popular Posts