Question

我是AngularJS和SignalR的新手，但是我遇到了一个我无法解决或找到其他可能对我有帮助的类似帖子的问题。对不起，这变得相当冗长，但我想提供尽可能多的信息。

我试图创建一个相当简单的SPA，其中页面将有三个基本区域。一个大厅（如登录区域），然后是管理员部分和用户部分。因此，根据他们登录的方式，他们将显示“管理”部分或“用户”部分。（这一切对我来说都很好）

在管理部分和用户部分之间，我有一个聊天区域，因此可以在管理员和连接的任何用户之间来回发送消息。但是在特定页面上，我显示输入的消息的显示，但是它不会＆＃39;显示来自其他用户（或管理员）的任何消息。我可以在控制台中看到该消息是由另一个页面接收的，并且它被添加到messages数组中，但它的行为就像有两个消息数组，因此它没有将消息组合到同一个数组中显示。我会在代码段之后显示以下内容。

这两个聊天区域都显示相同的消息数组：

用户聊天区：

<div class="panel-body">
    <div class="scrollable" style="min-height: 150px; max-height: 170px; overflow-y: auto;">
        <div ng-repeat="msg in messages">
            {{msg.message}}
        </div>
    </div>
    <input ng-model="newMemberMessage" class="form-control input-sm pull-left" style="width: 80%" type="text" />
    <button ng-click="sendMemberMessage()" class="pull-right btn btn-primary btn-sm">Send</button>
</div>

管理员聊天区域：

<div class="panel-body">
    <div class="scrollable" style="min-height: 150px; max-height: 170px; overflow-y: auto;">
        <div ng-repeat="msg in messages">
            {{msg.message}}
        </div>
    </div>
    <input ng-model="newAdminMessage" class="form-control input-sm pull-left" style="width: 80%" type="text" />
    <button ng-click="sendAdminMessage()" class="pull-right btn btn-primary btn-sm">Send</button>
</div>

我创建了以下ChatHub方法：

    public void SendMessage(SendData data)
    {
        Clients.Group(data.roomNumber, Context.ConnectionId).newBroadcastMessage(data.name + ": " + data.message);
    }

在我的控制器中，我有一个变量定义为：

$scope.messages = [];

然后我声明了以下指令：

$scope.sendMemberMessage = function () {
    chat.server.sendMessage({ name: $scope.name, message: $scope.newMemberMessage, roomNumber: $scope.roomNumber });
    displayMessage("You: " + $scope.newMemberMessage);
    $scope.newMemberMessage = "";
};

$scope.sendAdminMessage = function () {
    chat.server.sendMessage({ name: $scope.name, message: $scope.newAdminMessage, roomNumber: $scope.adminRoomNumber });
    displayMessage("You: " + $scope.newAdminMessage);
    $scope.newAdminMessage = "";
};

chat.client.newBroadcastMessage = onNewBroadcastMessage;

function onNewBroadcastMessage(message) {
    displayMessage(message);
    $scope.$apply();        //Required to update the scope digest bindings.
    console.log(message);
};

function displayMessage(message) {
    $scope.messages.unshift({ message: message });
    console.log("Added new member message to messages.  Current Messages: ");
    for (var i = 0; i < $scope.messages.length ; i++) {
        console.log($scope.messages[i]);
    }
};

当我运行我的应用程序时，我在Chrome窗口和Firefox窗口中打开表单，以确保它们彼此独立运行。

当我在Chrome窗口中运行的管理员界面中输入几条消息时，这是我在consol中显示的内容：

[08:44:28 GMT-0500 (Central Daylight Time)] SignalR: Invoking chat.SendMessage jquery.signalR-2.1.2.js:81
Added new member message to messages.  Current Messages:                       mainCtrl.js:293
Object {message: "You: Admin Test 1"}                                          mainCtrl.js:295
[08:44:28 GMT-0500 (Central Daylight Time)] SignalR: Invoked chat.SendMessage  jquery.signalR-2.1.2.js:81
[08:45:06 GMT-0500 (Central Daylight Time)] SignalR: Invoking chat.SendMessage jquery.signalR-2.1.2.js:81
Added new member message to messages.  Current Messages:                       mainCtrl.js:293
Object {message: "You: Admin Test 2"}                                          mainCtrl.js:295
Object {message: "You: Admin Test 1", $$hashKey: "004"}                        mainCtrl.js:295
[08:45:06 GMT-0500 (Central Daylight Time)] SignalR: Invoked chat.SendMessage  jquery.signalR-2.1.2.js:81

上述消息正确显示在管理员聊天面板中以下内容显示在Firefox的控制台中，但这些都不会显示在“用户”聊天面板中：

"[08:44:28 GMT-0500 (Central Standard Time)] SignalR: Triggering client hub event 'newBroadcastMessage' on hub 'chat'." jquery.signalR-2.1.2.js:81
"Added new member message to messages.  Current Messages: "      mainCtrl.js:293
Object { message: "Admin: Admin Test 1" }                        mainCtrl.js:295
"Admin: Admin Test 1"                                            mainCtrl.js:278
"[08:45:06 GMT-0500 (Central Standard Time)] SignalR: Triggering client hub event 'newBroadcastMessage' on hub 'chat'." jquery.signalR-2.1.2.js:81
"Added new member message to messages.  Current Messages: "      mainCtrl.js:293
Object { message: "Admin: Admin Test 2" }                        mainCtrl.js:295
Object { message: "Admin: Admin Test 1" }                        mainCtrl.js:295
"Admin: Admin Test 2"                                            mainCtrl.js:278

现在，如果我在Firefox的用户界面上输入聊天消息，Firefox控制台会显示：

"[09:04:38 GMT-0500 (Central Standard Time)] SignalR: Invoking chat.SendMessage" jquery.signalR-2.1.2.js:81
"Added new member message to messages.  Current Messages: " mainCtrl.js:293
Object { message: "You: User Test 1", $$hashKey: "004" } mainCtrl.js:295
"[09:04:38 GMT-0500 (Central Standard Time)] SignalR: Invoked chat.SendMessage" jquery.signalR-2.1.2.js:81

输入的文字在Firefox用户聊天显示中显示正常以下内容显示在Chrome控制台上，但不会显示在Chrome聊天面板中。（聊天面板仍显示以前的管理员聊天消息。）

[09:04:38 GMT-0500 (Central Daylight Time)] SignalR: Triggering client hub event 'newBroadcastMessage' on hub 'chat'. jquery.signalR-2.1.2.js:81
Added new member message to messages.  Current Messages:  mainCtrl.js:293
Object {message: "Mike: User Test 1"} mainCtrl.js:295
Mike: User Test 1 mainCtrl.js:278

消息数组的列表，＆＃39;应该＆＃39;将之前的聊天消息保留在数组中。

所以我无法弄清楚我做错了什么，或者为什么聊天显示器没有显示来自其他人的聊天消息。我有一个原始的示例聊天应用程序，我在两个聊天面板中使用相同的变量和模型名称在其上放置了两个聊天窗口，它工作正常。所以我知道这个逻辑应该有效，但我无法弄清楚我对这个主要应用程序做错了什么，导致聊天消息显示在其他窗口中。

有人可以给我任何帮助吗？

Answer 1

经过多次尝试和试错后，我尝试使用原来的示例聊天程序，这是基于我的应用程序。随着该程序的运作，我逐个应用了我的新程序。在我最终将管理部分的部分拼凑到其中后，我终于找到了我的问题。我的管理部分中有一个标签，其中有一行旧的代码，它在其上设置了ng-controller，它与页面顶部主要的ng-controller相同。一旦我删除了第二个ng-controller设置，聊天就开始再次正常工作。我假设第二个ng-controller设置正在创建第二个$ scope，这就是为什么我看到我的消息数组被复制，即使我的消息数组的显示不在第二个ng-controller标记内。至少现在我终于可以继续我的项目了。

具有SignalR $范围变量问题的AngularJS

1 个答案: