javascript - WebChat 如何为发送者/接收者设置 css 颜色

Question

我正在努力实现网络聊天，并提出了一个我希望可以轻松解决的问题。

如何更改发件人/收件人的颜色以区分它们？我试图将颜色保存到我的数据库中，但问题是我如何确定我是发送者，接收者的颜色需要不同。

这就是我实现聊天的方式:

聊天.js

connection.on("SessionNotification", function (user, message) {
    var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    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.log(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.log(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.log(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>

Answer 1

作为 JSON 返回的 AJAX 调用似乎有一些字段，如 Name 和 CreatedOn。您可以为 SessionId 添加一个额外的现场服务器端，无论如何您都将服务器端注入(inject)到您的 HTML 中。然后您可以比较消息的 session 是否与您的匹配。如果是这样，那么是你而不是接收者。所以你可能有这样的东西:

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