客户端功能未被称为SignalR

时间:2013-08-19 13:11:09

标签: javascript asp.net-mvc-4 signalr signalr-hub signalr.client

控制器类定义集线器

    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);

        }

    }

控制台应用程序,用于映射服务器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);
        }
    }

}

客户页面

<!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>

实际屏幕 screen 1st Selected类是Console应用程序类,用于映射服务器URL 2nd Selected类是定义hub的控制器类 directories

我遇到一个问题,当我创建一个调用MyHub的对象并从控制器调用它时函数被调用但另一方面我的HTML页面上没有显示任何内容当我按下屏幕上的发送按钮它调用相同的功能时但是输出也显示在页面上。请告诉我为什么会发生这种情况以及如何从控制器调用函数以便输出也显示在HTML页面上。我想我没有指定它应该写入的中心URL,这就是它的原因我直接从控制器类发送而不是从客户端调用集线器功能时不调用客户端功能,因为在客户端聊天URL已指定,我认为这就是为什么当我从客户端页面客户端调用发送功能时添加消息被执行。我是无法找到指定集线器地址的方法

当我按下屏幕上的发送按钮时,会显示此日志消息:SignalR:在集线器'MyHub'上触发客户端集线器事件'addMessage'。“。

但是当我在“GetMonitoringProfileLiveLogChart”函数中直接从控制器调用它时,不会显示此日志消息。

SignalR版本1.1.3

1 个答案:

答案 0 :(得分:13)

对我而言,看起来页面上不应显示任何内容,这是因为在启动集线器之前没有为您的集线器绑定客户端功能。

因此,为了解决您的问题,只需在执行$.connection.hub.start之前将“addMessage”功能添加到客户端中心:

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

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

接下来,您的代码中出现了一些错误:

  1. 你实际上是在执行document.ready两次,而$(function() {....})实际上是document.ready,但是你也在做$(document).ready(function() {...})里面。
  2. 在您的集线器中,您通过集线器上下文发送给客户。这有效,但没有必要这样做。您的方法不是静态的,您应该只能Clients.All.addMessage(...)