Javascript SignalR Chat：区分Css的ListItem发送者和接收者

我正在基于微软的signar和JavaScript教程构建一个小型聊天中心应用程序

简而言之：集线器消息放在按需创建（li）中

出于样式设计的目的，我希望为这些（li）添加一个类名，将它们区分为“发送者”和“接收者”两类

背景： 聊天室连接的每一侧都有不同的视图。我仍然建立在发短信的逻辑基础上，所以这远非完美无缺

我的dbo for friendstable是UserFriends，根据您是友谊的哪一方，您会得到一个不同的（但镜像的）聊天窗口

Cshtml代码段：

     @foreach (var item in Model.UserFriends)
        {
            @if (item.FriendChatName == @User.Identity.Name)
            {

                <div>
                    <button class="open-button" onclick="openChatForm()">@item.UserChatName</button>
                    <div class="chat-popup" id="myChatForm" style="display:none">
                        <form action="/action_page.php" class="form-container">
                            <button type="button" class="btn cancel" onclick="closeChatForm()">@item.UserChatName</button>
                           <input type="hidden" id="receiverInput" value="@item.UserChatName"/>
                                <ul id="messagesList" class="chatmessage receiver" ></ul>


                            <input type="hidden" id="userInput" class="receiverInput" value="@item.FriendChatName" />
                            <textarea placeholder="Type message.." required style="height:32px;" id="messageInput"></textarea>
                            <button type="submit" asp-route-user="@User.Identity.Name" asp-route-sender="@User.Identity.Name" asp-route-receiver="@item.UserChatName" class="btn" id="sendButton">Send</button>
                        </form>
                    </div>
                </div>


            }
            @if (item.UserChatName == @User.Identity.Name)
            {
                <div>
                    <button class="open-button" onclick="openChatForm()">@item.FriendChatName</button>
                    <div class="chat-popup" id="myChatForm" style="display:none">
                        <form action="/action_page.php" class="form-container">
                            <button type="button" class="btn cancel" onclick="closeChatForm()">@item.FriendChatName</button>
                            <input type="hidden" id="receiverInput" value="@item.FriendChatName" />
                            <ul id="messagesList" class="chatmessage sender" ></ul>

                            <input type="hidden" id="userInput" value="@item.UserChatName" />
                            <textarea placeholder="Type message.." required style="height:32px;" id="messageInput"></textarea>
                            <button type="submit" asp-area="" asp-route-user="@User.Identity.Name" asp-route-sender="@User.Identity.Name" asp-route-receiver="@item.FriendChatName" class="btn" id="sendButton">Send</button>
                        </form>
                    </div>
                </div>
            }
        }

以及chat.js脚本片段：

    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
     connection.on("ReceiveMessage", function (user, message) {
var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
var encodedMsg = user + ": " + msg;
var li = document.createElement("li");    
li.textContent = encodedMsg;    
document.getElementById("messagesList").appendChild(li);
    });
    connection.start().catch(function (err) {
return console.error(err.toString());
    });
    document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("userInput").value;
var message = document.getElementById("messageInput").value;


connection.invoke("SendMessage", user, message).catch(function (err) {
    return console.error(err.toString());
});
event.preventDefault();
    });

在这个片段的帮助下

    var sender = document.getElementById("senderInput").value;
var receiver = document.getElementById("receiverInput").value;

但当一切顺利时，我只得到一个运行时错误

这是两个浏览器窗口中的视图

---

如果有人能在chat.Js中帮助我构建If，或者有其他结构说明，告诉我如何以不同的方式设计SenderMessages和receivermessages，我将不胜感激

我回来发布这个问题的解决方案：

     @foreach (var item in Model.User.Friends)
            {
                <li>
                    <button class="open-button" onclick="openChatForm(event, '@item.Id@@ChatForm')" type="button" style="max-width:200px;">@item.UserName</button>
                    <div class="chat-popup" id="@item.Id@@ChatForm" style="display:none; width:300px; margin-left:900px;">
                        <div>
                            <form action="/action_page.php" class="form-container" style="position:absolute">
                                <button class="btn cancel" onclick="closeChatForm(event, '@item.Id@@ChatForm')" type="button">@item.FirstName</button>
                                <input type="hidden" id="receiverInput" value="@item.UserName" />
                                <ul id="messagesList" class="chatmessage" style="max-height:600px;"></ul>
                                <input type="hidden" id="senderInput" value="@User.Identity.Name" />
                                <textarea placeholder="Type message.." required style="height:32px;" id="messageInput"></textarea>
                                <button type="submit" class="btn" id="sendButton">Send</button>
                            </form>
                        </div>
                    </div>
                    <script>

                    </script>

                </li>
            }

@foreach（Model.User.Friends中的变量项）
{

@item.UserName
@item.FirstName

邮寄

}

这是chat.js

    connection.on("ReceiveMessage", function (user, message) {
var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
var encodedMsg = user + ": " + msg;

var li = document.createElement("li");
li.className += user;

var senderForSenderForm = document.getElementById("senderInput").value;
var senderForReceiverForm = document.getElementById("receiverInput").value;
var receiverForSenderForm = document.getElementById("receiverInput").value;
var receiverForReceiverForm = document.getElementById("senderInput").value;

if (senderForSenderForm === li.className ) {
    li.className += " toRight";
}
if (receiverForSenderForm === li.className) {
    li.className += " toLeft";
}
if (senderForReceiverForm === li.className ) {
    li.className += " toRight";
}
if (receiverForReceiverForm === li.className) {
 li.className += " toLeft";
}

li.textContent = encodedMsg;
document.getElementById("messagesList").appendChild(li);

    });

    connection.start().catch(function (err) {
return console.error(err.toString());
    });

    document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("senderInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
    return console.error(err.toString());
});
event.preventDefault();
    });

connection.on（“接收消息”，函数（用户，消息）{
var msg=message.replace（//&/g，“&；”）.replace（//g，”）；
var encodedMsg=user+“：”+msg；
var li=document.createElement（“li”）；
li.className+=用户；
var senderForSenderForm=document.getElementById（“senderInput”）.value；
var senderForReceiverForm=document.getElementById（“receiverInput”）.value；
var receiverForSenderForm=document.getElementById（“receiverInput”）.value；
var receiverForReceiverForm=document.getElementById（“senderInput”）.value；
if（senderForSenderForm===li.className）{
li.className+=“toRight”；
}
if（receiverForSenderForm==li.className）{
li.className+=“toLeft”；
}
if（senderForReceiverForm==li.className）{
li.className+=“toRight”；
}
if（receiverForReceiverForm==li.className）{
li.className+=“toLeft”；
}
li.textContent=encodedMsg；
document.getElementById（“messagesList”）.appendChild（li）；
});
connection.start（）.catch（函数（err）{
返回console.error（err.toString（））；
});
document.getElementById（“sendButton”）.addEventListener（“单击”），函数（事件）{
var user=document.getElementById（“senderInput”）.value；
var message=document.getElementById（“messageInput”）.value；
connection.invoke（“SendMessage”、用户、消息）.catch（函数（err）{
返回console.error（err.toString（））；
});
event.preventDefault（）；
});

聊天中心仍然是一样的

简言之，我将聊天窗口重构为一个范围， 为消息生成（li），并向其中添加一个类，以最终基于此类名创建样式

所有朋友的风格都是好的，聊天atm机只可能与一个朋友，将更新时修复

     @foreach (var item in Model.User.Friends)
            {
                <li>
                    <button class="open-button" onclick="openChatForm(event, '@item.Id@@ChatForm')" type="button" style="max-width:200px;">@item.UserName</button>
                    <div class="chat-popup" id="@item.Id@@ChatForm" style="display:none; width:300px; margin-left:900px;">
                        <div>
                            <form action="/action_page.php" class="form-container" style="position:absolute">
                                <button class="btn cancel" onclick="closeChatForm(event, '@item.Id@@ChatForm')" type="button">@item.FirstName</button>
                                <input type="hidden" id="receiverInput" value="@item.UserName" />
                                <ul id="messagesList" class="chatmessage" style="max-height:600px;"></ul>
                                <input type="hidden" id="senderInput" value="@User.Identity.Name" />
                                <textarea placeholder="Type message.." required style="height:32px;" id="messageInput"></textarea>
                                <button type="submit" class="btn" id="sendButton">Send</button>
                            </form>
                        </div>
                    </div>
                    <script>

                    </script>

                </li>
            }

    connection.on("ReceiveMessage", function (user, message) {
var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
var encodedMsg = user + ": " + msg;

var li = document.createElement("li");
li.className += user;

var senderForSenderForm = document.getElementById("senderInput").value;
var senderForReceiverForm = document.getElementById("receiverInput").value;
var receiverForSenderForm = document.getElementById("receiverInput").value;
var receiverForReceiverForm = document.getElementById("senderInput").value;

if (senderForSenderForm === li.className ) {
    li.className += " toRight";
}
if (receiverForSenderForm === li.className) {
    li.className += " toLeft";
}
if (senderForReceiverForm === li.className ) {
    li.className += " toRight";
}
if (receiverForReceiverForm === li.className) {
 li.className += " toLeft";
}

li.textContent = encodedMsg;
document.getElementById("messagesList").appendChild(li);

    });

    connection.start().catch(function (err) {
return console.error(err.toString());
    });

    document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("senderInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
    return console.error(err.toString());
});
event.preventDefault();
    });