locked
Multiple Views connect same hub SignalR RRS feed

  • Question

  • User1806771833 posted

    Hi,

        Is it possible to connect multiple views to same hub. When I do this I can call hub methods on different view but not receiving events in  2nd and 3rd view.  Is there anything I need to check. Below part is not working in 2nd & 3rd view but it works in first view.

     $.connection.myHub.client.triggerEvent = function (triggerEventRequest) {
                        console.log(JSON.stringify(triggerEventRequest));
                        $('#events').prepend(JSON.stringify(triggerEventRequest) + "\n");
                    };

    Monday, January 4, 2021 1:59 AM

All replies

  • User-1330468790 posted

    Hi dnyatiganesan@gmail.com,

     

    It is definitely possible to connect to a same hub from different views. 

    I did a test with few settings:

    • "triggerEventRequest" is a string parameter 
    • "events" is a div area to display the events
    • Server side has a "send" method to call the client "triggerEvent" function.

    and it turns out that the hub can be connected with multiple views. Maybe you need to specify your problem with more details.

    You could refer to the demo in the end for more details.

    dnyatiganesan@gmail.com

    Is there anything I need to check.

     

    dnyatiganesan@gmail.com

    Is there anything I need to check

    With the given insufficient information, I can not target the problem directly. You should check below points:

    • whether you have started a connection successfully with no errors in console tab
    • have you registered the callback function before you start the connection?
    • is there anything mismatching with the function signature?

     

    My testing demo is as below.

    Home Controller: simply return the view

     public ActionResult FirstEventView()
            {
                return View();
            }
    
            public ActionResult SecondEventView()
            {
                return View();
            }

    FirstEventView.cshtml:

    @{
        ViewBag.Title = "FirstEventView";
    }
    
    <h2>FirstEventView</h2>
    
    <input type="text" id="eventName" />
    <input type="button" id="sendEvent" value="Send" />
    
    
    <div id="events"></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.2.2.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 () {
    
                $.connection.myHub.client.triggerEvent = function (triggerEventRequest) {
                    console.log(JSON.stringify(triggerEventRequest));
                    $('#events').prepend(JSON.stringify(triggerEventRequest) + "\n");
                };
    
                $.connection.hub.start().done(function () {
                    $('#sendEvent').click(function () {
                        // Call the Send method on the hub.
                        $.connection.myHub.server.send($('#eventName').val());
                        // Clear text box and reset focus for next comment.
                        $('#eventName').val('').focus();
                    });
                });
    
            });
    
        </script>
    
    }

    SecondEventView.cshtml:

    @{
        ViewBag.Title = "SecondEventView";
    }
    
    <h2>SecondEventView</h2>
    
    <div id="events"></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.2.2.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 () {
    
                $.connection.myHub.client.triggerEvent = function (triggerEventRequest) {
                    console.log(JSON.stringify(triggerEventRequest));
                    $('#events').prepend(JSON.stringify(triggerEventRequest) + "\n");
                };
    
                $.connection.hub.start();
    
            })
    
        </script>
    
    }

    myHub.cs

    public class myHub : Hub
    {
            public void Send(string eventName)
            {
                // Call the triggerEvent method to update clients.
                Clients.All.triggerEvent(eventName);
            }
    }

    Startup.cs

      public class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                // Any connection or hub wire up and configuration should go here
                app.MapSignalR();
            }
        }

    Demo:

     

    Hope helps.

    Best regards,

    Sean

    Tuesday, January 5, 2021 4:10 AM