在ASP.NET MVC中使用SignalR聊天

时间:2018-08-24 06:57:03

标签: asp.net-mvc signalr

我正在尝试使用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

2 个答案:

答案 0 :(得分:0)

据我了解,来自其他用户的消息位置不正确吗? enter image description here

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

cosine_similarity()

我看不到您在哪里声明消息的类型,以及$ scope.Init(message)函数实际上是做什么的?

在集线器上,您也会向呼叫者和客户端发送相同的消息,我认为这是错误的,因为它们会收到相同类型的消息,事实并非如此。 您应该在那里(在Hub类上)对呼叫者设置消息类型为“输入”,为客户端设置消息类型为“输出”(或者,根据需要,反之亦然),并且在这种情况下,呈现应该很好。

示例:

from sklearn.metrics.pairwise import cosine_similarity as cosine

results = []
for i in range(Array1.shape[0]):
     results.append(numpy.max(cosine(Array1[None,i,:], Array2)))

答案 1 :(得分:0)

在app.js的ReceivePrivateMessage中尝试以下操作:

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