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 Dynamic Upload multiple files with extra detail of model in core

 How To Dynamic Upload multiple files with extra detail of model in core  1). firstly create Model File  namespace MyModel {     pub...

Popular Posts