I'm new with AngularJS and SignalR but I've ran into an issue that I just haven't been able to resolve or find other similar postings that might help me. Sorry that this became fairly lengthy but I wanted to supply as much information as possible.
I'm trying to create a fairly simple SPA in which the page will have three basic areas. A Lobby (like a sign in area), then an Admin section and a User section. So based on how they sign in, they would be displayed either the Admin section or the User section. (Which all this works fine for me)
Between the Admin section and User sections I have a chat area so messages can be sent back and forth between the Admin and any users connected in. But on the specific page, I get the display for the message that was entered, but it will 'not' display any messages coming from the other users (or Admin). I can see in the console that the message is received by the other page and it's added to the messages array but it acts like there are two messages array so it's not combining the messages into the same array to be displayed. I'll show this below after the code segments.
Both of these chat areas are displaying the same messages array as:
User chat area:
<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>
Admin chat area:
<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>
I have the following ChatHub method created:
public void SendMessage(SendData data)
{
Clients.Group(data.roomNumber, Context.ConnectionId).newBroadcastMessage(data.name + ": " + data.message);
}
In my controller I have a variable defined as:
$scope.messages = [];
I then have the following directives declared:
$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]);
}
};
When I run my application I'm opening the form in a Chrome window and in a Firefox window to make sure they are running independent of each other.
This is what I get displayed in the consol when I enter a couple messages in my Admin screen running in the Chrome window:
[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
The messages above show up in the Admin chat panel correctly.
The following is displayed in the console of the Firefox but neither of these show up in the Users chat panel:
"[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
Now if I enter a chat message on my users screen in Firefox, the Firefox console shows:
"[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
The entered text shows up fine on the Firefox users chat display.
And the following is displayed on the Chrome console but does not display in the Chrome chat panel. (The chat panel still displays the previous Admin chat messages.)
[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
That listing of the messages array, 'should' have the previous chat messages still in the array.
So I can't figure out what I've done wrong or why the chat displays are not displaying the chat messages from the other persons. I've got an original sample chat application where I've put two chat windows on it using the same variable and model names in both chat panels and it works fine. So I know this logic should work but I can't figure out what I've done wrong with this main application preventing the chat messages to be displayed in the other windows.
Can anyone give me any help on this?
