How to Connect MVC Signalr Hub To Angular 6 web site

How to Connect MVC Signalr Hub To Angular 6 web site 

Firstly you need to install nuget package for Create Hub in 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
          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
    public class NotificationHub : Hub
        public void NotificationService(string 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)  

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.
     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;
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');
        }).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