在asp.net mvc中使用signalR聊天

Question

我正在尝试使用SignalR制作聊天应用程序，其中用户可以在私人包装盒中与其他用户聊天。一切正常，除了客户端和用户聊天显示在同一侧并在刷新时工作正常的事实。

这是我的相同代码：

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);

    }
  }
}

这是我的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);
});

以下是我的HTML页面代码：

<div class="chat_container no-margin no-padding">
    <div class="no-margin no-padding MsgRightPnlHdr">
        &nbsp;&nbsp;<span class="chatNameRight" ng-bind="Thread.Name"></span>
        &nbsp;&nbsp;<span class="chatNameDesigRight" ng-bind="Thread.Designation"></span>
    </div>
    <div class="userTyping">
        &nbsp;<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>

此外，CSS很好，因为一旦刷新页面，聊天就会到达各自的一方。

附图供参考：Error I am facing

Answer 1

在app.js中的ReceivePrivateMessage中试试这个：

    chatObject.Type = ($scope.UserId == chatObject.frmNurseId ? "out" : "in");

Answer 2

据我所知，来自其他用户的消息的位置不正确？

您正在根据消息类型进行格式化：msg.Type ='in'

 <span class="{{msg.Type=='in'?'pull-left lt-box inMsg':'pull-left rt-box outMsg'}}">{{msg.Message}}<br />

我没有看到你在哪里声明消息的类型，以及函数$ scope.Init（message）实际上做了什么？

同样在集线器上，你会向调用者和客户端发送相同的消息，我认为错误的是他们得到的消息类型相同，但情况并非如此。你应该在那里做什么（在Hub类中）为调用者设置消息类型'in'，为客户设置'out'（或者反之亦然，如你所愿），在这种情况下渲染应该没问题。

例：

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);

}