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

Question

我正在构建一个基于 Microsoft 教程的 SignalR 和 JavaScript 的小型 ChatHub 应用程序。

简而言之：集线器消息被放入按需创建 (li)

出于样式目的，我希望为这些 (li) 添加类名，将它们区分为类别 "sender" 和 "receiver"

背景： ChatConnection 的每一侧都有不同的视图。我仍在构建短信的逻辑，所以这远非完美无缺。

我的 friendstable dbo 是 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>
            }
        }

ChatHub Class:

       public class ChatHub : Hub
{
    public async Task SendMessage(string user, string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

和 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();
    });

我正在尝试得到这种东西：

        if (user == reciever  ) {
    li.className = "receiver";
}
if (user == sender) {
    li.className = "sender";
}

借助此代码段

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

但是当一切都顺利进行时，我除了运行时错误什么也没有得到

这是两个浏览器中的视图windows

任何人都可以帮助我构建 chat.Js 中的 If 或有其他关于我将如何以不同方式设置 sendermessenges 和 receivermessages 样式的结构说明，将不胜感激！

Answer 1

我回到post我对这个问题的解决方案：

     @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>
            }

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

ChatHub 还是老样子..

简而言之，我将聊天窗口重构为一个范围，为消息生成 (li) 并向其添加 class 以最终基于此 className.

设置样式

所有朋友的样式都可以，只能和一个朋友聊天atm，修复后会更新！

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

SignalR Chat: Differentiating ListItem sender and receiver for Css

javascript

css

chat

signalr

asp.net-core-mvc