AngularJS与SignalR$范围变量问题

AngularJS with SignalR $scope variable issue

本文关键字：变量 问题 范围 SignalR AngularJS      更新时间：2023-09-26

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

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

在"管理"部分和"用户"部分之间，我有一个聊天区，可以在管理员和连接的任何用户之间来回发送消息。但在特定页面上，我会显示输入的消息，但它不会显示来自其他用户（或管理员）的任何消息。我可以在控制台中看到，消息被另一个页面接收，并被添加到消息数组中，但它的行为就像有两个消息数组，所以它不会将消息组合到要显示的同一数组中。我将在下面的代码段之后显示这一点。

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

用户聊天区：

<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窗口中运行的Admin屏幕上输入几条消息时，控制台中显示的内容：

[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

上面的消息正确显示在Admin聊天面板中
以下内容显示在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

消息数组的列表"应该"中仍有以前的聊天消息。

所以我不明白我做错了什么，也不明白为什么聊天显示器没有显示其他人的聊天信息。我有一个原始的示例聊天应用程序，我在两个聊天面板中使用相同的变量和模型名称在上面放置了两个聊天窗口，效果很好。所以我知道这个逻辑应该有效，但我不知道这个主应用程序阻止聊天消息显示在其他窗口中有什么错。

有人能帮我吗？

在经历了大量的尝试和错误之后，我尝试使用我的应用程序所基于的原始示例聊天程序。随着这个程序的运行，我把我的新程序一块一块地应用到它上。在我终于开始把管理部分的部分拼凑起来之后，我终于发现了我的问题。在我的"管理"部分有一个标签，里面有一行旧代码，正在设置ng控制器，这与页面顶部主屏幕上的ng控制器相同。当我移除第二个ng控制器设置后，聊天又开始正常工作了。我假设第二个ng控制器设置正在创建第二个$scope，所以这就是为什么我看到我的消息数组是重复的，即使我的消息阵列的显示不在第二个ng-controller标记内。至少现在我终于可以继续我的项目了。

相关文章：