Я создаю небольшое приложение ChatHub на основе Microsoft-Tutorial для SignalR и JavaScript.
Вкратце: сообщения-концентраторы помещаются в созданный по запросу (li)
В целях стилизации я хочу добавить к ним (li) имя класса, дифференцируя их накатегории «отправитель» и «получатель»
Фон: каждая сторона ChatConnection имеет свое представление.Я все еще основываюсь на логике текстовых сообщений, так что это далеко не безупречно.
Мой dbo для Friendstable - это UserFriends, в зависимости от того, с какой стороны дружбы вы находитесь, вы получаете другую (но зеркальную)chatwindow.
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, "&").replace(/</g, "<").replace(/>/g, ">");
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;
Но когда все сгладится, я получаю только ошибку времени выполнения
это представление в двух окнах браузера
Anybodyможет помочь мне с построением If в чате. JS или другие структурные заметки о том, как я по-разному описал бы стилизацию сообщений отправителей и сообщений получателей, был бы очень признателен!