WebChat, как установить цвет CSS для отправителя/получателя
Я работаю над внедрением веб-чата и столкнулся с проблемой, которую, надеюсь, легко решить.
Как изменить цвет отправителя/получателя, чтобы различать их? Я попытался сохранить цвета в своей базе данных, но проблема в том, как я могу определить, что я отправитель, а цвет получателей должен быть другим.
Вот как я реализовал свой чат:
Чат.js
connection.on("SessionNotification", function (user, message) {
var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
var p = document.createElement("span");
var q = document.createElement("li");
p.setAttribute("class", "Sender");
q.setAttribute("class", "Message");
p.textContent = user + " - " + moment(datetime).format("DD-MM-YYYY HH:mm:ss");
q.textContent = msg;
document.getElementById("MessageList").appendChild(p);
document.getElementById("MessageList").appendChild(q);
});
HTML
<script>
$(document).ready(function () {
$('#MessageList').stop().animate({
scrollTop: $('#MessageList')[0].scrollHeight
}, 2000);
var SessionId = document.getElementById("Id").value;
console.info(SessionId);
var form_data = {
"SessionId": SessionId
};
$.ajax({
url: "@Url.Action("GetHistory", @ViewContext.RouteData.Values["controller"].ToString())",
method: "POST",
data: JSON.stringify(form_data),
contentType: "application/json",
success: function (result) {
console.info(result);
var output = JSON.parse(result);
for (var i = 0; i < output.length; i++) {
var p = document.createElement("span");
var q = document.createElement("li");
p.setAttribute("class", "Sender");
q.setAttribute("class", "Message");
p.textContent = output[i].Name + " - " + moment(output[i].CreatedOn).format("DD-MM-YYYY HH:mm:ss");
q.textContent = output[i].Message;
document.getElementById("MessageList").appendChild(p);
document.getElementById("MessageList").appendChild(q);
}
},
error: function (error) {
console.info(error);
}
});
return false;
});
</script>
<div class = "col-sm-12">
<h2>Session</h2>
<hr />
</div>
<div class = "col-sm-12">
<div class = "row">
<div class = "col-sm-12">
<div class = "form-group">
<div id = "MessageListContainer">
<ul id = "MessageList">
</ul>
</div>
</div>
</div>
</div>
<div class = "row">
<div class = "col-sm-12">
<div class = "form-group">
@Html.HiddenFor(m => m.Id)
@Html.HiddenFor(m => m.CurrentUser)
<input class = "form-control col-sm-12" id = "Message" type = "text" />
</div>
</div>
</div>
<div class = "row">
<div class = "col-sm-12">
<div class = "form-group">
<div class = "clearfix">
<div class = "pull-right">
<input id = "Send" type = "button" value = "Send" class = "btn btn-primary" />
</div>
</div>
</div>
</div>
</div>
<div class = "col-sm-12">
<hr />
</div>
</div>
<script src = "~/aspnet/signalr/dist/browser/signalr.js"></script>
<script src = "~/js/chat.js"></script>
да. Отправитель — это имя отправителя, которое находится в верхней части сообщения.
Если вывод класса соответствует вашим ожиданиям, я думаю, вы можете добавить .Sender{ /*your css styling*/} в свой css. И для приемника на основе класса приемника.
Но проблема в том, что класс Sender применяется повсеместно, и я не различаю то, что отправляю я, и то, что отправляет Получатель.
Ясно, вы можете отличить пользователя (отправителя) от партнера (получателя)? Основываясь на запросе, я полагаю, что если вы используете базу данных, добавьте класс в зависимости от результата.
Я могу попытаться сравнить и посмотреть, совпадает ли имя пользователя с именем в httpcontext, тогда установите css. Хотя выглядит немного странно.
Если вы можете это сделать, вы можете добавить ifelse, чтобы разделить их. Пример: если пользователь, то p.setAttribute("class", "Sender"); еще p.setAttribute("класс", "Получатель");
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ваш вызов AJAX, который возвращается как JSON, имеет несколько полей, таких как Name и CreatedOn. Вы можете добавить дополнительную сторону полевого сервера для SessionId, которую вы все равно внедряете на стороне сервера в свой HTML. Затем вы можете сравнить, соответствует ли сеанс сообщения вашему сеансу. Если да, то это вы, а не получатель. Итак, у вас может быть что-то вроде:
JS
// You set this earlier on
var SessionId = document.getElementById("Id").value;
// ........ OTHER CODE IN BETWEEN
for (var i = 0; i < output.length; i++) {
var p = document.createElement("span");
var q = document.createElement("li");
// If session ID matches current session (i.e. you) then add different class
if (output[i].SessionId === SessionId) {
// It is you
p.setAttribute("class", "Sender");
} else {
// It is other person
p.setAttribute("class", "Receiver");
}
q.setAttribute("class", "Message");
p.textContent = output[i].Name + " - " + moment(output[i].CreatedOn).format("DD-MM-YYYY HH:mm:ss");
q.textContent = output[i].Message;
document.getElementById("MessageList").appendChild(p);
document.getElementById("MessageList").appendChild(q);
}
CSS
.Sender {
color: blue;
}
.Receiver {
color: green;
}
Я попробую это. В настоящее время использование ajax заключается в том, что когда я обновляю страницу, она сразу же получает историю чата. Мне нужен способ реализовать то, что вы упомянули, когда я набираю новые сообщения.
Вместо SessionID можно использовать UserID. Это было бы лучшим решением в долгосрочной перспективе, если сеанс прервется и вы получите новый идентификатор.
Вывод класса вашего отправителя и получателя:
p.setAttribute("class", "Sender");иq.setAttribute("class", "Message");?