How to bring Hub content from Any server to *another server* project Hub?

Question

There is a confusion in the arrangement of codes and the place where it pleases so I hope to find an explanation for the following:

When I have a server "https://localhost:48009/" and the application is equipped with all the requirements of Signal-R and also Hub exists on it. in folder Hubs There is a Hub Class ChatHub.cs

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the addNewMessageToPage method to update clients.
            Clients.All.addNewMessageToPage(name, message);
        }
    }
}

and in Chat.cshtml

@{
    ViewBag.Title = "Chat";
}
<h2>Chat</h2>
<div class="container">
    <input type="text" id="message" />
    <input type="button" id="sendmessage" value="Send" />
    <input type="hidden" id="displayname" />
    <ul id="discussion">
    </ul>
</div>
@section scripts {
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.--> 
    <script>
        $(function () {
            // Reference the auto-generated proxy for the hub.  
            var chat = $.connection.chatHub;
            // Create a function that the hub can call back to display messages.
            chat.client.addNewMessageToPage = function (name, message) {
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + htmlEncode(name) 
                    + '</strong>: ' + htmlEncode(message) + '</li>');
            };
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.  
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub. 
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment. 
                    $('#message').val('').focus();
                });
            });
        });
        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

Everything works fine as you open the page on more than one browser

Here all operations occur within the server "https://localhost:48009/"

I happened to have another project on another server For example "http://localhost:18098/"

in index.cshtml

@{
    ViewBag.Title = "index";
}
<h2>Chat</h2>
<div class="container">
    <input type="text" id="message" />
    <input type="button" id="sendmessage" value="Send" />
    <input type="hidden" id="displayname" />
    <ul id="discussion">
    </ul>
</div>
@section scripts {
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
      ///////////////////gotohub here
    <script src="https://localhost:48009//signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.--> 


    <script>
        $(function () {
            // Reference the auto-generated proxy for the hub. 
              ///////Link to the other server 
            var chat = $.connection.chatHub.url="https://localhost:48009/";
            // Create a function that the hub can call back to display messages.
            chat.client.addNewMessageToPage = function (name, message) {
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + htmlEncode(name) 
                    + '</strong>: ' + htmlEncode(message) + '</li>');
            };
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.  
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub. 
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment. 
                    $('#message').val('').focus();
                });
            });
        });
        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

Here I also seem to apply solutions to similar problems. Is this method correct?

Knowing another server "http://localhost:18098/" It is also equipped Signal-R

I want to bring Hub content from there to another server Hub.

Answer 1

1.Add Nuget package SignalR

2.Add "Startup" Class to App_Start

namespace YourProjectname.App_Start {
    public class Startup {
        public void Configuration(IAppBuilder app) {
            app.MapSignalR("/signalr",new Microsoft.AspNet.SignalR.HubConfiguration());
        }
    }
}

4.Change your web.config as bellow

    <appSettings>    
        <add key="owin:AppStartup" value="YourProjectName.App_Start.Startup"/>
    </appSettings>

      <system.webServer>
              <httpProtocol> 
                 <customHeaders>        
                   <add name="Access-Control-Allow-Origin" value="http://192.168.43.174:9090" />        
                       <add name="Access-Control-Allow-Credentials" value="true" />
                       <add name="Access-Control-Allow-Methods" value="true" />
                 </customHeaders>
              </httpProtocol>
     </system.webServer>

*If you have many client allow each request as above

3. Add Hub Folder under your project

4. Modify Hub Class As Bellow

   namespace YourProjectName.ChatHub {
       [HubName("ChatHub")]
       public class ChatHub : Hub {
           [HubMethodName("Sendchat")]
           public void Send(String Message,String Touser) {
                Clients.Client(Touser).GotMessages(Message);//send messages to specific user
              //Clients.All.GotMessages(Message); //seln messages to all user
               String CName = Message;
           }
   
           [HubMethodName("hubconnect")]
           public void Get_Connect(String Name) {
               Clients.All.GotMessages(Name +" Connected  Connection Id is "+ this.Context.ConnectionId);
               String CName = Name;
           }
   
           public override System.Threading.Tasks.Task OnConnected() {
               return base.OnConnected();
           }
   
           public override System.Threading.Tasks.Task OnReconnected() {
               return base.OnReconnected();
           }
   
           public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled) {
               return base.OnDisconnected(stopCalled);
           }
       }
   }
   

5. you want to only Client, Install SignalR Client

Change your Cshtml as Bellow

<h2>Chat</h2>
<div class="container">
    <input type="text" id="name" placeholder="tousername"/>
    <input type="text" id="message" placeholder="message" />
    <input type="button" id="sendmessage" value="Send" />
    <input type="hidden" id="displayname" />
    <ul id="discussion"></ul>
</div>

@section scripts{      
<script src="~/Scripts/jquery.signalR-2.3.0.min.js"></script>   
<script>
        $(function () {
             //Create Hub Connection
        var connection = $.hubConnection("http://192.168.43.174:9092", { useDefaultath: false });
       //Add your Server above IP Addess

                        //Create Chat Connection
        var proxy = connection.createHubProxy("ChatHub");
        $('#displayname').val(prompt('Enter your name:', ''));
        //Connection stablished
        connection.start().done(function () {

           try {                 
                proxy.invoke("hubconnect", $('#displayname').val());
            } catch (e) {
                alert(e.message);
            }
        });

            $('#sendmessage').on('click', function () {
            //Send Messages to specific User
            proxy.invoke("Sendchat", $('#message').val(), $('#name').val());
        });

            //Receive Messages from User
        proxy.on("GotMessages", function (Message) {
            alert(Message);
            $('#discussion').append('<div>' + Message + '</br></div>');
        }); 
     }); 
</script>
}

for mor information