5

Controller class Where Hub is defined

    public abstract class MonitoringProfileLogChartController : Croem.NotificationManager.Website.Base.BaseController.BaseController
        {

            public ActionResult Index()
            {
                BusinessLogicReturn result = new ProcessBusinessLogic.Logic().GetRegisteredContexts();
                return base.TransalateToAction(result);
            }
            public ActionResult LiveMonitoringProfileLogChart()
            {
                return View();
            }
            public ActionResult test()
            {
                return View();
            }

**below is rest of the code of controller where our focus should be**


  public JsonResult GetMonitoringProfileLogChart(string FromDate, string ToDate, int ContextId)
        {
            BusinessLogicReturn result = new ProcessBusinessLogic.Logic().GetMonitoringProfileLogChart(FromDate, ToDate, ContextId);
            return Json(result.Model, JsonRequestBehavior.AllowGet);
        }
        public JsonResult GetMonitoringProfileLiveLogChart(string FromTime, string ToTime, string DataMinutes)
        {
            BusinessLogicReturn result = new ProcessBusinessLogic.Logic().GetMonitoringProfileLiveLogChart(FromTime, ToTime, DataMinutes);
            IHubContext context = GlobalHost.ConnectionManager.GetHubContext<MyHub>();
            context.Clients.All.addMessage(result.Model);
            var hub = new MyHub();
            hub.Send("", "");
            return Json(result.Model, JsonRequestBehavior.AllowGet);

        }
        public JsonResult GetMonitoringProfileCombinationChart(string FromTime, string ToTime)
        {
            BusinessLogicReturn result = new ProcessBusinessLogic.Logic().GetMonitoringProfileCombinationChart(FromTime, ToTime);
            return Json(result.Model, JsonRequestBehavior.AllowGet);
        }
    }
    public class MyHub : Hub
    {
        IHubContext context = GlobalHost.ConnectionManager.GetHubContext<MyHub>();
        public void Send(string name, string message)
        {

            BusinessLogicReturn result = new ProcessBusinessLogic.Logic().GetMonitoringProfileLiveLogChart(null, null, null);
            context.Clients.All.addMessage(result.Model);
        }
        public void test()
        {

            BusinessLogicReturn result = new ProcessBusinessLogic.Logic().GetMonitoringProfileLiveLogChart(null, null, null);
            context.Clients.All.addMessage(result.Model);

        }

    }

Console application which is used for mapping server url

class Program
{
    static void Main(string[] args)
    {
        string info = LoggingServer.Open();
        Console.WriteLine(info);

        string url = "http://localhost:8080";
        using (WebApp.Start<Startup>(url))
        {
            Console.WriteLine("Server running on {0}", url);
            var hubs = new Croem.NotificationManager.Website.Base.Controllers.MyHub();
            Console.ReadLine();
        }
        LoggingServer.Close();
    }
    class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Turn cross domain on 
            var config = new HubConfiguration { EnableCrossDomain = true };

            // This will map out to http://localhost:8080/signalr by default
            app.MapHubs(config);
        }
    }

}

Client Page

<!DOCTYPE html>
<html>
<head>
    <title>SignalR Live Chat</title>

</head>
<body>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <strong>Error Count</strong>
        <input type="text" id="Error_count" value="0" />
        <ul id="discussion"></ul>
    </div>
    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-1.1.3.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="http://localhost:8080/signalr/hubs"></script>
    <!--Add script to update the page and send messages.-->
    <script type="text/javascript">
        var chart;
        var timer;
        $(function () {



                Highcharts.setOptions({
                    global: {
                        useUTC: false
                    }
                });
                //Set the hubs URL for the connection
                $.connection.hub.url = "http://localhost:8080/signalr";

                // Declare a proxy to reference the hub.
                var chat = $.connection.myHub;

                // Create a function that the hub can call to broadcast messages.
                chat.client.addMessage = function (data) {

                    dataRecieved(data);
                    clearInterval(timer);
                    timer = setInterval(function () {
                        dataNotRecieved();
                    }, 10000);
                };
                $.connection.hub.logging = true;
                $.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();
                    });
                });

                $.ajax({
                    type: "GET",
                    dataType: "json",
                    data: {
                        DataMinutes: 5,
                        FromTime: null,
                        ToTime: null
                    },
                    url: "@Url.Action("GetMonitoringProfileLiveLogChart", "MonitoringProfileLogChart")",
                    success: function (data) {
                        chart = new Highcharts.Chart({
                            chart: {
                                renderTo: 'container',
                                type: 'spline',
                                animation: Highcharts.svg, // don't animate in old IE
                                marginRight: 10,


                            },
                            title: {
                                text: 'Live Profile Monitoring'
                            },
                            xAxis: {
                                type: 'datetime',

                                tickPixelInterval: 150
                            },
                            yAxis: {
                                title: {
                                    text: 'Value'
                                },
                                plotLines: [{
                                    value: 0,
                                    width: 1,
                                    color: '#808080'
                                }]
                            },
                            tooltip: {
                                formatter: function () {
                                    return '<b>' + this.series.name + '</b><br/>' +
                                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                                    Highcharts.numberFormat(this.y, 2);
                                }
                            },
                            legend: {
                                enabled: true
                            },
                            exporting: {
                                enabled: false
                            },
                            series: data.series,

                        });
                    }
                });


                timer = setInterval(function () {
                    dataNotRecieved();
                }, 10000);

                function dataNotRecieved() {
                    var shift = false;
                    for (var j = 0; j < chart.series.length; j++) {
                        if (chart.series[j].data.length < 50) {
                            shift = false;

                        }
                        else {
                            shift = true;
                        }
                        chart.series[j].addPoint([new Date().getTime() - 4 * 1000 * 60 * 60, 0], true, shift);
                    }

                }
                function dataRecieved(data) {
                    // checking if series exsist in chart but is not in data coming from ajax call . and if it does not exsist add that series point with zero
                    var series_name_exist = 0;
                    var series_exist = 0;
                    var index = 0;
                    var shift = false;
                    var length = chart.series.length;
                    for (var j = 0; j < chart.series.length; j++) {

                        for (var k = 0; k < data.series.length; k++) {
                            if (chart.series[j].name == data.series[k].name) {
                                series_name_exist = 1;
                                break;
                            }

                        }
                        if (series_name_exist == 0) {

                            if (chart.series[j].data.length < 50) {
                                shift = false;

                            }
                            else {
                                shift = true;
                            }
                            chart.series[j].addPoint([new Date().getTime() - 4 * 1000 * 60 * 60, 0], true, shift);
                        }
                        else {
                            series_name_exist = 0;
                        }



                    }
                    //  if series exist add point otherwise add series
                    for (var k = 0; k < data.series.length; k++) {

                        for (var j = 0; j < chart.series.length; j++) {
                            if (chart.series[j].name == data.series[k].name) {
                                series_exist = 1;
                                index = j;
                                break;
                            }

                        }
                        if (series_exist == 1) {

                            if (chart.series[index].data.length < 50) {
                                shift = false;

                            }
                            else {
                                shift = true;
                            }
                            //chart.series[index].addPoint([data.series[k].time, data.series[k].count], true, shift);
                            chart.series[index].addPoint([new Date().getTime() - 4 * 1000 * 60 * 60, data.series[k].count], true, shift);
                            series_exist = 0;

                        }

                        else {

                            chart.addSeries({ name: '' + data.series[k].name + '', data: [] });
                            //chart.series[length].addPoint([data.series[k].time, data.series[k].count], true);
                            chart.series[length].addPoint([new Date().getTime() - 4 * 1000 * 60 * 60, data.series[k].count], true);
                            length = length + 1;
                        }


                    }
                }



                $('#message').focus();
                // Start the connection.


        });

    </script>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

</body>
</html>

Actual screen screen 1st Selected class is the Console application class which is used for mapping server url 2nd Selected class is the controller class where hub is defined directories

I am facing a problem when i make an object of call MyHub and call it from controller the function is getting called but nothing is displayed on my HTML page on the other hand when i press send button on screen it calls the same function but the output is also show on the page .Please tell me why is this happening and how to call function from controller so that output is shown on HTMLpage as well.I think I am not specifying hub URL where it should write and that's why it's not calling client side function when i send it directly from controller class instead of calling hub function from client side because in client side chat URL is specified and I think that's why when i call send function from client page client add message is executed.I am unable to find a way to specify address for hub

When I press send button on screen ,This logging message is shown: SignalR: Triggering client hub event 'addMessage' on hub 'MyHub'.".

But when I call it direct from controller in "GetMonitoringProfileLiveLogChart" function this logging message is not shown.

SignalR version 1.1.3

user2137186
  • 817
  • 6
  • 22
  • 39

1 Answers1

13

To me it looks like nothing should be displayed on the page, this is due to not having a client side function for your hub bound prior to starting your hub.

Therefore to fix your issue just add your "addMessage" function to the client hub before you do $.connection.hub.start:

chat.client.addMessage = function() {...}

$.connection.hub.start().done(function() {...});

Next you have a few errors in your code:

  1. You're essentially doing document.ready twice, doing $(function() {....}) is essentially document.ready, however you're ALSO doing $(document).ready(function() {...}) inside.
  2. In your hub you're sending to clients via the hubs context. This works, but there's no need to do it. Your method is not static and you should just be able to do Clients.All.addMessage(...).
N. Taylor Mullen
  • 18,061
  • 6
  • 49
  • 72
  • You can push message directly from server to client without calling it from client side? – user2137186 Aug 20 '13 at 07:10
  • 1
    You're self hosting a server, and then it looks like you have a seperate server for your website. Your JS client is connecting to the Self Host server so when you invoke the server side function it's getting the appropriate response. However, since your controllers appear to be in a different app domain they do not share the same SignalR server as the self host server. Therefore, your controllers cannot send to clients that are connected to your self host server which is why you're not seeing the response. – N. Taylor Mullen Aug 20 '13 at 18:02
  • If you want to keep the same architecture, whenever you want your site to invoke a function on the client you can have your website post to your self hosted server; then your self host server can invoke the method on the client. This involves setting up an endpoint on your self host server to handle incoming posts and to handle them correctly. Of course if you don't want to keep the architecture you can just move all your SignalR logic onto your website then everything will just work once you've re-pointed everything to it. – N. Taylor Mullen Aug 21 '13 at 03:30
  • Well I tried that but didn't work can you make me a psuedo or edit this code? – user2137186 Aug 21 '13 at 04:39
  • You are a genius..I had to install this package"Install-Package Microsoft.AspNet.SignalR.Client " in my controller folder and then i had to do this in test function: var hubConnection = new Microsoft.AspNet.SignalR.Client.Hubs.HubConnection("http://localhost:8080"); var chat = hubConnection.CreateHubProxy("myHub"); hubConnection.Start().Wait(); chat.Invoke("Send", //parameters); – user2137186 Aug 21 '13 at 07:09
  • Key point for my issue was i was assigning the handler after starting the connection. soon as i moved it before starting, it worked like a charm – Gurpreet Jun 16 '17 at 23:10