locked
Pages with different functions for onNewUserConnected, onNewUserConnected... RRS feed

  • Question

  • User1698392144 posted

    I have a Single Web Aplication, with a page called home.html that works as the Masterpage, this is the first and only page that is loaded, the others are loaded inside home.html, there is a home.js file that contains all the functions of the SignalR client and server, some of the home.js code is:

    home.js
    $(function () { var signalrHub = $.connection.hubSignalR; signalrHub.client.onConnected = function () { //code } signalrHub.client.onNewUserConnected = function () { //code... } signalrHub.client.onUserDisconnected = function (id, userName) { //code... } $.connection.hub.start().done(function () { //code... signalrHub.server.connect(user); //more... }); });

    The "$.connection.hub.start().done(function () {" is only used once in the entire application in this file home.js

    In the page index.html have a container where all other pages of the application are loaded, for example one of these pages is room.html, which has its respective file room.js that contains different functions to execute when an onNewUserConnected, onUserDisconnected, and onLoadSomething occurs. My question is how can I run the functions within each page, besides the functions that is in home.js 

    //functions in home.js
    signalrHub.client.onConnected = function () { //code } signalrHub.client.onNewUserConnected = function () { //code... } signalrHub.client.onUserDisconnected = function (id, userName) { //code... }

    Any idea how can I do this?

    Tuesday, May 9, 2017 10:57 AM

Answers

  • User-271186128 posted

    Hi Cuadros,

    I modified the code I wrote before, the following code might help you.

    (1) the entry page(this is the masterpage what you said).

    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <title>entry Page</title>
    </head>
    <body>
        <div>
            User Name:<input type="text" id="txtUserName" value="Mike" />
            <input type="button" id="btn1" value="invoke onNewUserConnected" />
            <input type="button" id="btn2" value="invoke onUserDisconnected" />
        </div>
        <div style="margin-top:10px">
            <div id="divPage1" style="border:1px solid #808080;width:350px;height:500px;float:left;margin-left:2px"></div>
            <div id="divPage2" style="border:1px solid #808080;width:350px;height:500px;float:left;margin-left:2px"></div>
            <div id="divPage3" style="border:1px solid #808080;width:350px;height:500px;float:left;margin-left:2px"></div>
        </div>
    </body>
    </html>
    <script src="@(Url.Content("~/Scripts/jquery-1.10.2.min.js"))"></script>
    <script src="@(Url.Content("~/Scripts/jquery.signalR-2.2.1.min.js"))"></script>
    <script src="@(Url.Content("~/signalr/hubs"))"></script>
    <script type="text/javascript">
        function loadPage(container, url) {
            $.ajax({
                url: url,
                type: "GET",
                dataType: "html",
                success: function (result) {
                    $("#" + container).html(result);
                }
            });
        }
        loadPage("divPage1", "@(Url.Action("Page1","Home"))");
        loadPage("divPage2", "@(Url.Action("Page2","Home"))");
        loadPage("divPage3", "@(Url.Action("Page3","Home"))");
        //it will run only once
        var myHub = $.connection.MyHub;
        myHub.client.onNewUserConnected = function (user) {
            //trigger event
            $(window).trigger("NewUserConnected", user);
        }
    
        myHub.client.onUserDisconnected = function (user) {
            //trigger event
            $(window).trigger("UserDisconnected", user);
        }
        $.connection.hub.start().done(function () {
            $("#btn1").click(function () {
                myHub.server.newUserConnect($("#txtUserName").val());
            });
            $("#btn2").click(function () {
                myHub.server.userDisconnected($("#txtUserName").val());
            });
        });
    </script>
    

    (2) inside page code
    page 1 code (inside of the entry page)

    @{
        Layout = null;
    }
    <div>
        <h1>div page 1 </h1>
    </div>
    <div id="divconsole1" style="font-size:12px;"></div>
    <script type="text/javascript">
        $(window).bind("NewUserConnected", function (ev,user) {
            $("<div></div>").text("invoke page 1 onNewUserConnected user=\"" + user + "\"").appendTo($("#divconsole1"));
        }).bind("UserDisconnected", function (ev, user) {
            $("<div></div>").text("invoke page 1 onUserDisconnected user=\"" + user + "\"").appendTo($("#divconsole1"));
        });
    </script>
    

    page 2 code (inside of the entry page)

    @{
        Layout = null;
    }
    <div>
        <h1>div page 2 </h1>
    </div>
    <div id="divconsole2" style="font-size:12px;"></div>
    <script type="text/javascript">
        $(window).bind("NewUserConnected", function (ev, user) {
            $("<div></div>").text("invoke page 2 onNewUserConnected user=\"" + user + "\"").appendTo($("#divconsole2"));
        }).bind("UserDisconnected", function (ev, user) {
            $("<div></div>").text("invoke page 2 onUserDisconnected user=\"" + user + "\"").appendTo($("#divconsole2"));
        });
    </script>
    

    page 3 code (inside of the entry page)

    @{
        Layout = null;
    }
    <div>
        <h1>div page 3 </h1>
    </div>
    <div id="divconsole3" style="font-size:12px;"></div>
    <script type="text/javascript">
        $(window).bind("NewUserConnected", function (ev, user) {
            $("<div></div>").text("invoke page 3 onNewUserConnected user=\"" + user + "\"").appendTo($("#divconsole3"));
        }).bind("UserDisconnected", function (ev, user) {
            $("<div></div>").text("invoke page 3 onUserDisconnected user=\"" + user + "\"").appendTo($("#divconsole3"));
        });
    </script>
    

    (3) MyHub.cs (no modify)

    [HubName("MyHub")]
        public class MyHub : Hub
        {
            public void NewUserConnect(string user)
            {
                //notify all clients
                Clients.All.onNewUserConnected(user);
            }
    
            public void UserDisconnected(string user)
            {
                //notify all clients
                Clients.All.onUserDisconnected(user);
            }
       }
    

    (4)the result of run

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 10, 2017 8:10 AM

All replies

  • User-271186128 posted

    Hi Cuadros,

    According to your description, you want to synchronize other pages when received from the signalr server.

    The following code might help you.

    (1) the entry page(this is the masterpage what you said).

    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>entry Page</title>
    </head>
    <body>
        <div>
            User Name:<input type="text" id="txtUserName" value="Mike" />
            <input type="button" id="btn1" value="invoke onNewUserConnected" />
            <input type="button" id="btn2" value="invoke onUserDisconnected" />
        </div>
        <div id="framecontainer" style="margin-top:10px">
            <iframe src="@(Url.Action("Page1","Home"))" frameborder="1" width="350" height="500"></iframe>
            <iframe src="@(Url.Action("Page2","Home"))" frameborder="1" width="350" height="500"></iframe>
            <iframe src="@(Url.Action("Page3","Home"))" frameborder="1" width="350" height="500"></iframe>
        </div>
    </body>
    </html>
    <script src="@(Url.Content("~/Scripts/jquery-1.10.2.min.js"))"></script>
    <script src="@(Url.Content("~/Scripts/jquery.signalR-2.2.1.min.js"))"></script>
    <script src="@(Url.Content("~/signalr/hubs"))"></script>
    <script type="text/javascript">
        //it will run only once when application start
        var myHub = $.connection.MyHub;
        myHub.client.onNewUserConnected = function (user) {
            $("#framecontainer iframe").each(function () {
                //will called each iframe's onNewUserConnected
                this.contentWindow && this.contentWindow.onNewUserConnected && this.contentWindow.onNewUserConnected(user);
            });
        }
    
        myHub.client.onUserDisconnected = function (user) {
            $("#framecontainer iframe").each(function () {
                //will called each iframe's onUserDisconnected
                this.contentWindow && this.contentWindow.onUserDisconnected && this.contentWindow.onUserDisconnected(user);
            });
        }
        $.connection.hub.start().done(function () {
            $("#btn1").click(function () {
                myHub.server.newUserConnect($("#txtUserName").val());
            });
            $("#btn2").click(function () {
                myHub.server.userDisconnected($("#txtUserName").val());
            });
        });
    </script>
    

    (2) inside page code
    page 1 code (inside of the entry page)

    @{
        Layout = null;
    }
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>page 1</title>
    </head>
    <body>
        <div>
            <h1> page 1 </h1>
        </div>
        <div id="divconsole" style="font-size:12px;"></div>
    </body>
    </html>
    <script src="@(Url.Content("~/Scripts/jquery-1.10.2.min.js"))"></script>
    <script type="text/javascript">
        window.onNewUserConnected = function (user) {
            // it will called by the entry page
            $("<div></div>").text("invoke page 1 onNewUserConnected user=\"" + user + "\"").appendTo($("#divconsole"));
        }
    
        window.onUserDisconnected = function (user) {
            // it will called by the entry page
            $("<div></div>").text("invoke page 1 onUserDisconnected user=\"" + user + "\"").appendTo($("#divconsole"));
        }
    </script>
    

    page 2 code (inside of the entry page)

    @{
        Layout = null;
    }
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>page 2</title>
    </head>
    <body>
        <div> 
            <h1> page 2 </h1>
        </div>
        <div id="divconsole" style="font-size:12px;"></div>
    </body>
    </html>
    <script src="@(Url.Content("~/Scripts/jquery-1.10.2.min.js"))"></script>
    <script type="text/javascript">
        window.onNewUserConnected = function (user) {
            // it will called by the entry page
            $("<div></div>").text("invoke page 2 onNewUserConnected user=\"" + user + "\"").appendTo($("#divconsole"));
        }
    
        window.onUserDisconnected = function (user) {
            // it will called by the entry page
            $("<div></div>").text("invoke page 2 onUserDisconnected user=\"" + user + "\"").appendTo($("#divconsole"));
        }
    </script>
    

    page 3 code (inside of the entry page)

    @{
        Layout = null;
    }
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>page 3</title>
    </head>
    <body>
        <div> 
            <h1> page 3 </h1>
        </div>
        <div id="divconsole" style="font-size:12px;"></div>
    </body>
    </html>
    <script src="@(Url.Content("~/Scripts/jquery-1.10.2.min.js"))"></script>
    <script type="text/javascript">
        window.onNewUserConnected = function (user) {
            // it will called by the entry page
            $("<div></div>").text("invoke page 3 onNewUserConnected user=\"" + user + "\"").appendTo($("#divconsole"));
        }
    
        window.onUserDisconnected = function (user) {
            // it will called by the entry page
            $("<div></div>").text("invoke page 3 onUserDisconnected user=\"" + user + "\"").appendTo($("#divconsole"));
        }
    </script>
    

    (3) MyHub.cs

    [HubName("MyHub")]
        public class MyHub : Hub
        {
            public void NewUserConnect(string user)
            {
                //notify all clients
                Clients.All.onNewUserConnected(user);
            }
    
            public void UserDisconnected(string user)
            {
                //notify all clients
                Clients.All.onUserDisconnected(user);
            }
       }
    

    (4)the result of run

    If you have any other questions, please feel free to contact me any time.

    Best Regards,
    Dillion

    Wednesday, May 10, 2017 5:32 AM
  • User1698392144 posted

    Hi Dillion,

    First of all I must thank you for your elaborate answer, on the other hand I would like to know if I can do it without using an iframe, only with a div container, considering that in the pages I am loading the file .js using the traditional "body. AppendChild(script); ". 

    Wednesday, May 10, 2017 7:00 AM
  • User-271186128 posted

    Hi Cuadros,

    I modified the code I wrote before, the following code might help you.

    (1) the entry page(this is the masterpage what you said).

    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <title>entry Page</title>
    </head>
    <body>
        <div>
            User Name:<input type="text" id="txtUserName" value="Mike" />
            <input type="button" id="btn1" value="invoke onNewUserConnected" />
            <input type="button" id="btn2" value="invoke onUserDisconnected" />
        </div>
        <div style="margin-top:10px">
            <div id="divPage1" style="border:1px solid #808080;width:350px;height:500px;float:left;margin-left:2px"></div>
            <div id="divPage2" style="border:1px solid #808080;width:350px;height:500px;float:left;margin-left:2px"></div>
            <div id="divPage3" style="border:1px solid #808080;width:350px;height:500px;float:left;margin-left:2px"></div>
        </div>
    </body>
    </html>
    <script src="@(Url.Content("~/Scripts/jquery-1.10.2.min.js"))"></script>
    <script src="@(Url.Content("~/Scripts/jquery.signalR-2.2.1.min.js"))"></script>
    <script src="@(Url.Content("~/signalr/hubs"))"></script>
    <script type="text/javascript">
        function loadPage(container, url) {
            $.ajax({
                url: url,
                type: "GET",
                dataType: "html",
                success: function (result) {
                    $("#" + container).html(result);
                }
            });
        }
        loadPage("divPage1", "@(Url.Action("Page1","Home"))");
        loadPage("divPage2", "@(Url.Action("Page2","Home"))");
        loadPage("divPage3", "@(Url.Action("Page3","Home"))");
        //it will run only once
        var myHub = $.connection.MyHub;
        myHub.client.onNewUserConnected = function (user) {
            //trigger event
            $(window).trigger("NewUserConnected", user);
        }
    
        myHub.client.onUserDisconnected = function (user) {
            //trigger event
            $(window).trigger("UserDisconnected", user);
        }
        $.connection.hub.start().done(function () {
            $("#btn1").click(function () {
                myHub.server.newUserConnect($("#txtUserName").val());
            });
            $("#btn2").click(function () {
                myHub.server.userDisconnected($("#txtUserName").val());
            });
        });
    </script>
    

    (2) inside page code
    page 1 code (inside of the entry page)

    @{
        Layout = null;
    }
    <div>
        <h1>div page 1 </h1>
    </div>
    <div id="divconsole1" style="font-size:12px;"></div>
    <script type="text/javascript">
        $(window).bind("NewUserConnected", function (ev,user) {
            $("<div></div>").text("invoke page 1 onNewUserConnected user=\"" + user + "\"").appendTo($("#divconsole1"));
        }).bind("UserDisconnected", function (ev, user) {
            $("<div></div>").text("invoke page 1 onUserDisconnected user=\"" + user + "\"").appendTo($("#divconsole1"));
        });
    </script>
    

    page 2 code (inside of the entry page)

    @{
        Layout = null;
    }
    <div>
        <h1>div page 2 </h1>
    </div>
    <div id="divconsole2" style="font-size:12px;"></div>
    <script type="text/javascript">
        $(window).bind("NewUserConnected", function (ev, user) {
            $("<div></div>").text("invoke page 2 onNewUserConnected user=\"" + user + "\"").appendTo($("#divconsole2"));
        }).bind("UserDisconnected", function (ev, user) {
            $("<div></div>").text("invoke page 2 onUserDisconnected user=\"" + user + "\"").appendTo($("#divconsole2"));
        });
    </script>
    

    page 3 code (inside of the entry page)

    @{
        Layout = null;
    }
    <div>
        <h1>div page 3 </h1>
    </div>
    <div id="divconsole3" style="font-size:12px;"></div>
    <script type="text/javascript">
        $(window).bind("NewUserConnected", function (ev, user) {
            $("<div></div>").text("invoke page 3 onNewUserConnected user=\"" + user + "\"").appendTo($("#divconsole3"));
        }).bind("UserDisconnected", function (ev, user) {
            $("<div></div>").text("invoke page 3 onUserDisconnected user=\"" + user + "\"").appendTo($("#divconsole3"));
        });
    </script>
    

    (3) MyHub.cs (no modify)

    [HubName("MyHub")]
        public class MyHub : Hub
        {
            public void NewUserConnect(string user)
            {
                //notify all clients
                Clients.All.onNewUserConnected(user);
            }
    
            public void UserDisconnected(string user)
            {
                //notify all clients
                Clients.All.onUserDisconnected(user);
            }
       }
    

    (4)the result of run

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 10, 2017 8:10 AM
  • User1698392144 posted

    Hi Dillion,

    Thank you very much for your answer, it has helped me to define an architecture that I was thinking for a long time.

    After doing what you said, I had a problem with the the files .js because the events were binned several times but I solved it. I would like to know if is advisable to start the connection to signalr several times from different places or pages ($.connection.hub.start().done(function () {)

    I like to know every detail of signalr, is one of my favorites thank you :)

    Best Regards, 

    Cuadros

    Thursday, May 11, 2017 12:33 PM