格式化用户在Javascript中发送的聊天消息

Formatting chat messages sent by user in Javascript

本文关键字：聊天 消息 用户 Javascript 格式化      更新时间：2023-09-26

我已经在python中创建了一个websocket服务器，我有一个使用该web服务器的web聊天，web聊天框(显示用户发送的消息)的高度为83px，宽度为1176px。

我希望我的用户消息沿聊天框水平显示(与聊天框大小规格相应)，而不是传统的列表类型的消息显示，这样看起来好像我的用户正在完成彼此的句子。

进一步澄清我的意思:

userA types: "Hi my name is James"

userB类型:"当然是"

Chatbox输出:Hi my name is James当然是

是否有任何有效的方法来完成这项任务?这是我到目前为止所掌握的，需要注意的是，它并不多!

s = new WebSocket(host);
                    s.onopen = function (e) { log_msg("connected..."); };
                    s.onclose = function (e) { log_msg("connection closed."); };
                    s.onerror = function (e) { log_msg("connection error."); };
                    s.onmessage = function (e) { log_msg("message: " + e.data); };
                } catch (ex) {


<fieldset id="messages" class = "focus-actions""> </fieldset>

请求更多代码

var messages;
            var form;
            var inputBox;
            function log_msg(msg) {
                var p = document.createElement("p");
                p.innerHTML = msg;
                messages.appendChild(p);
            }
            function doInit() {
                inputBox = document.getElementById("message");
                messages = document.getElementById("messages");
                form = document.getElementById("message-form");
                var s;
                try {
                    var host = "ws://localhost:4545/";
                    if(window.location.hostname) {
                        host = "ws://" + window.location.hostname + ":4545/";
                    }
                    s = new WebSocket(host);
                    s.onopen = function (e) { log_msg("connected..."); };
                    s.onclose = function (e) { log_msg("connection closed."); };
                    s.onerror = function (e) { log_msg("connection error."); };
                    s.onmessage = function (e) { log_msg("message: " + e.data); };
                } catch (ex) {
                    log_msg("connection exception:" + ex);
                }
                form.addEventListener("submit", function (e) {
                    e.preventDefault();
                    s.send(inputBox.value);
                    inputBox.value = "";
                }, false);
            }

在您当前的功能log_msg:

function log_msg(msg) {
    var p = document.createElement("p");
    p.innerHTML = msg;
    messages.appendChild(p);
}

你正在创建"段落"元素，它是块级元素(与内联元素相反)。

您可以为css中的p元素创建替代样式规则:

#messages p    { display: inline }

对于那些段落(你可能需要指定/覆盖其他浏览器特定的默认样式)，

或者(更合乎逻辑地)将其更改为创建span-element(内联的):

在你的功能log_msg:

function log_msg(msg) {
    var p = document.createElement("span");
    p.innerHTML = msg;
    messages.appendChild(p);
}

或简化:

function log_msg(msg) {
    messages.appendChild(document.createElement("span")).innerHTML = msg;
}  //appendChild returns child, thats why you can set innerHTML directly

请注意，您可能希望将msg的前导和尾随空格(特别是缺少空格)考虑在内!例子:

msg.trim()+' '   // or for older browsers: msg.replace(/^'s+|'s+$/g, '')+' '

希望这对你有帮助!

相关文章：