如何从SignalR调用多个hub方法

时间:2016-01-26 12:24:53

标签: jquery asp.net-mvc signalr signalr-hub signalr.client

我正在使用SignalR和MVC。

我开发了一个管理页面,可以发送通知。有一个带有图标的菜单可显示未读通知。

如果我点击计数,通知面板将显示最新的5个通知。

还有一个“查看全部”链接,可打开一个新页面以显示所有通知。如果管理员添加新通知,我想更新通知计数以及视图“所有通知”页面。

如何在管理员发送按钮上同时调用集线器方法?我希望在ViewAllNotification页面中看到新添加的通知而不刷新。期望SignalR推送数据。

我跟随http://venkatbaggu.com/signalr-database-update-notifications-asp-net-mvc-usiing-sql-dependency/进行了开发。

这里我没有使用sql依赖。在发送按钮(管理员屏幕)上,我正在调用集线器方法来推送通知

    <script type="text/javascript">
        $(function () {
            $.connection.hub.logging = true;
            var proxy = $.connection.broadcastMessage;

            $.connection.hub.start().done(function () {
                $('#button1').click(function () {
                    proxy.server.broadcastNotifications($("#Message").val());
                    proxy.server.sendMessages();
                });
            });
        });
    </script>

这是Hub方法。

    public class BroadcastMessage: Hub
        {
        public void BroadcastNotifications(string message)
        {         
            Utility.AddNotification(message);

            int UnreadCount = Utility.getUnreadMessageCount();

            IHubContext context = GlobalHost.ConnectionManager.GetHubContext<BroadcastMessage>();
            context.Clients.All.receiveNotification(message, UnreadCount);
        }

        public static void SendMessages()
        {
            IHubContext context = GlobalHost.ConnectionManager.GetHubContext<BroadcastMessage>();
            context.Clients.All.updateMessages();
        }
    }

我已经尝试了上面的jQuery和信号r来逐个调用方法。但这不起作用。它调用第一个方法,第二个方法没有被调用。

@model IEnumerable<Notification>
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>ViewAllNotifications</h2>
<div class="container">
<table class="table">
    <tr>
        <th>@Html.DisplayNameFor(model => model.NotificationID)</th>
        <th>
            @Html.DisplayNameFor(model => model.Message)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CreatedBy)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CreatedDate)
        </th>

    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.NotificationID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Message)
        </td>
        <th>
            @Html.DisplayFor(modelItem => item.CreatedBy)
        </th>
        <td>
            @Html.DisplayFor(modelItem => item.CreatedDate)
        </td>

    </tr>
}

</table>

</div>
<script type="text/javascript">

        $(function () {
            debugger;
            $.connection.hub.logging = true;
            var proxy = $.connection.broadcastMessage;

            proxy .client.updateMessages = function () {
                getAllMessages()
            };
            $.connection.hub.start().done(function () {
                alert("connection started")

                getAllMessages();
            }).fail(function (e) {
                alert(e);
            });
            function getAllMessages() {
                var tbl = $('#messagesTable');

                $.ajax({
                    url: '/Notifications/GetMessages',
                    cache: false,
                    contentType: 'application/html ; charset:utf-8',
                    type: 'GET',
                    dataType: 'html'
                }).success(function (result) {
                    tbl.empty().append(result);
                }).error(function () {

                });
            }

        });
</script>

以上是局部视图。我指的是http://venkatbaggu.com/signalr-database-update-notifications-asp-net-mvc-usiing-sql-dependency/ 我的需求是在管理员发送通知时将通知推送到此页面。

2 个答案:

答案 0 :(得分:1)

假设所有依赖项都在同一个进程中,如果是这样,则不需要GetHubContext

您应该重新组织逻辑:

<强>集线器

[HubName("messageHub")]
public class MessageHub: Hub
{
    public void BroadcastNotifications(string message)
    {         
        Utility.AddNotification(message);
        int UnreadCount = Utility.getUnreadMessageCount();
        Clients.All.receiveNotification(message, UnreadCount);

        SendMessages();
    }

    public void SendMessages()
    {
        Clients.All.updateMessages();
    }
}

<强> JS

<script type="text/javascript">
    $(function () {
        $.connection.hub.logging = true;
        var messageHub = $.connection.messageHub;

        $.connection.hub.start().done(function () {
            $('#button1').click(function () {
                messageHub.server.broadcastNotifications($("#Message").val());
            });
        });
    });
</script>

答案 1 :(得分:0)

你应该一个接一个地串联电话,如下:

$.connection.hub.start().done(function () {
        $('#button1').click(function () {
            proxy.server.broadcastNotifications($("#Message").val()).done(function () {
                proxy.server.sendMessages();
            });        
        });
    });

<强>更新

请参阅下面的评论,您需要在ViewAllNotifications视图中添加一些代码,以便SignalR刷新它。您目前正在服务器端渲染数据,因此SignalR不会导致重新加载。

你可以试试这个,但我建议你像@Tez描述的那样重新思考你的方法。

<script type="text/javascript">
    $(function () {
        $.connection.hub.logging = true;
        var proxy = $.connection.broadcastMessage;

        proxy.client.updateMessages = function () {
            location.reload();
            // reload the page from the server
        };

        $.connection.hub.start();   
    });
</script>