Chat using signalR in asp.net mvc - asp.net-mvc

Question

I am trying to make a chat application using SignalR wherein the user can chat with other users in a private box. Everything works fine except for the fact that the client and the user chats are displayed on the same side and work fine when refreshed.
Here's my code for the Same:
public class ChatHub : Hub
{
static List<ConnectedUser> objConnectedUserList = new List<ConnectedUser>();
MessagingDAL objMessagingDAL = new MessagingDAL();
NurseDAL objNurseDAL = new NurseDAL();
public void SendPrivateMessage(Messaging objMessaging)
{
var fromNurse = objConnectedUserList.FirstOrDefault(x => x.NurseId == objMessaging.FromNurseId);
var toNurse = objConnectedUserList.FirstOrDefault(x => x.NurseId == objMessaging.ToNurseId);
var chatObject = new { MessageThreadId = 0, Name = fromNurse.NurseName, Message = objMessaging.Message, DTStmp = DateTime.Now, frmNurseId = fromNurse.NurseId };
Result objResult = objMessagingDAL.InsertMessage(objMessaging);
if (toNurse != null)
{
Clients.Client(toNurse.ConnectionId).ReceivePrivateMessage(chatObject);
}
Clients.Caller.ReceivePrivateMessage(chatObject);
}
}
}
Here's my code for Controller:
$scope.SendPrivateMessage = function (message) {
if ($scope.Thread.MessageThreadId == null) {
UserService.showAlert('Please select a Nurse', 0);
return;
}
else {
var chatObject =
{
MessagingThreadId: $scope.Thread.MessageThreadId,
Message: message,
ToRecruiter: null,
ToRecruiterId: null,
FromRecruiter: null,
FromRecruiterId: null,
ToNurse: null,
ToNurseId: $scope.Thread.ToNurseId,
FromNurse: null,
FromNurseId: $scope.Thread.FromNurseId,
CreatedOn: new Date(),
RecivedOn: new Date(),
LastMessageOn: new Date(),
}
}
signalR.SendPrivateMessage(chatObject);
$scope.Messaging.Message = '';
$scope.Init(chatObject.Message);
}
signalR.ReceivePrivateMessage(function (chatObject) {
$scope.Messages.push(chatObject);
//$scope.Messages.push({ chatObject });
$("#autoscroll").animate({ scrollTop: $("#autoscroll")[0].scrollHeight * 2 }, 100);
$scope.$apply();
$scope.Init(chatObject.Message);
});
Following is my code for the HTML Page:
<div class="chat_container no-margin no-padding">
<div class="no-margin no-padding MsgRightPnlHdr">
<span class="chatNameRight" ng-bind="Thread.Name"></span>
<span class="chatNameDesigRight" ng-bind="Thread.Designation"></span>
</div>
<div class="userTyping">
<span class="chatNameDesigRight" ng-bind=usertyping></span>
</div>
<div class="no-margin no-padding msgDsplyPnl message-right" id="autoscroll">
<div ng-repeat="msg in Messages" ng-if="msg.Message">
<div class="no-margin no-padding imgDiv1" ng-if="msg.Type=='in'">
<img src="#baseUrl{{Thread.img}}" class="img-responsive" />
</div>
<span class="{{msg.Type=='in'?'pull-left lt-box inMsg':'pull-left rt-box outMsg'}}">{{msg.Message}}<br />
<span class="chatLstDTstmp message-time">{{msg.DTStmp | date:'dd MMM, yyyy hh:mm a'}}</span>
</span>
</div>
</div>
<div class="form-group no-margin no-padding">
<div class="no-margin no-padding">
<textarea name="Message" class="form-control txt-area" style="height:36px; margin-bottom: 10px; resize:none;"
placeholder="Type your Message here..." ng-model="Messaging.Message" ng-keypress="SkeyPress($event)"></textarea>
</div>
<div class="no-margin no-padding">
<button class="btn sendBtn ms-btn" style="width: 100%;height: 60px;border-radius: 0;" ng-click="SendPrivateMessage(Messaging.Message);" ng-disabled="!Messaging.Message">
Send
</button>
</div>
</div>
</div>
Also, the CSS is fine as once the page is refreshed, the chat goes to its respective sides.
Attached image for reference:
Error I am facing

Answer 1

Try this in your ReceivePrivateMessage in app.js:
chatObject.Type = ($scope.UserId == chatObject.frmNurseId ? "out" : "in");

Answer 2

As I've understood is that the position of the message from the other user is not correct?
You're doing the formatting based on the message type: msg.Type='in'
<span class="{{msg.Type=='in'?'pull-left lt-box inMsg':'pull-left rt-box outMsg'}}">{{msg.Message}}<br />
I do not see where do you declare the type of the message, and what does the function $scope.Init(message) actually do?
Also on the hub you do send same message to the caller and the client and what I think is wrong is that they get message with same type, which should not be the case.
What should you do there (at the Hub class) is set message type 'in' for caller, 'out' for client (or vise versa, as you prefer) and in that case the rendering should be fine.
Example:
public void SendPrivateMessage(Messaging objMessaging)
{
var fromNurse = objConnectedUserList.FirstOrDefault(x => x.NurseId == objMessaging.FromNurseId);
var toNurse = objConnectedUserList.FirstOrDefault(x => x.NurseId == objMessaging.ToNurseId);
var chatObject = new { MessageThreadId = 0, Name = fromNurse.NurseName, Message = objMessaging.Message, DTStmp = DateTime.Now, frmNurseId = fromNurse.NurseId };
Result objResult = objMessagingDAL.InsertMessage(objMessaging);
if (toNurse != null)
{
chatObject.Type = "in"; //set different type for receiver and sender
Clients.Client(toNurse.ConnectionId).ReceivePrivateMessage(chatObject);
}
chatObject.Type = "out";
Clients.Caller.ReceivePrivateMessage(chatObject);
}