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

我用python创建了一个websocket服务器，我有一个使用该web服务器的web聊天室，web聊天室（显示用户发送的消息）的高度为83px，宽度为1176px

我希望我的用户消息能够沿着聊天框水平显示（与聊天框大小规格相应），而不是传统的列表类型的消息显示，因此我的用户似乎在完成彼此的句子

进一步澄清我的意思：

userA键入：“嗨，我叫詹姆斯”

用户B类型：“当然是”

聊天室输出：嗨，我的名字是詹姆斯，当然是

有什么有效的方法来完成这项任务吗？这是我到目前为止所做的，请注意，这并不多

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) {

HTML

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

---

在当前函数中

log\u msg

：

函数日志\u msg（msg）{
var p=document.createElement（“p”）；
p、 innerHTML=msg；
儿童（p）；
}

您正在创建“段落”元素，这些元素是元素（与元素相对）

您可以为css中的

p

元素创建备用样式规则：

#消息p{display:inline}

对于这些段落（您可能需要指定/替代其他特定于浏览器的默认样式）

或者（更符合逻辑）将其更改为创建一个跨度元素（内联）：

在您的函数

log\u msg

中：

函数日志\u msg（msg）{
var p=document.createElement（“span”）；
p、 innerHTML=msg；
儿童（p）；
}

或简化：

函数日志\u msg（msg）{
messages.appendChild（document.createElement（“span”））.innerHTML=msg；
}//appendChild返回child，这就是为什么可以直接设置innerHTML

请注意，您可能希望在

msg

中考虑前导和尾随空格（尤其是缺少空格）！例如：

msg.trim（）++'//或对于较旧的浏览器：msg.replace（/^\s++\s++$/g'，）+''

---

希望这有帮助

你是在问HTM/CSS布局吗？我想这更多的是关于实际的javascript而不是html，我现在就添加我的html源代码。那么，字段集中有什么？是否需要单独的输入和输出字段？另外，

log\u msg

的代码是什么？消息显示在字段集内。消息显示在字段集内，没有任何内容，因为组元素仅此而已。

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