javascript - SignalR 聊天 : Differentiating ListItem sender and receiver for Css

Question

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

简而言之:hub-messages 放在按需创建的 (li) 中

出于样式目的，我希望为这些 (li) 添加一个类名，将它们区分为类别“发送方”和“接收方”

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

我的 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 类:

       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;

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

这是两个浏览器窗口中的 View

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

Answer 1

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

     @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) 的消息并向其添加类以最终基于此类名的样式。

所有 friend 的样式都可以，只能与一个 friend 聊天 atm，修复后会更新!