格式化用戶使用Javascript發送的聊天消息

Question

我用python創建了一個網絡套接字服務器，並且有一個使用該網絡服務器的網絡聊天，該網絡聊天框（顯示用戶發送的消息）的高度為83px，寬度為1176px。

我希望用戶的消息沿聊天框水平顯示（相應地取決於聊天框大小規格），而不是常規的列表類型的消息顯示，因此好像我的用戶似乎正在完成彼此的句子。

進一步闡明我的意思：

userA類型：“嗨，我叫詹姆斯”

userB類型：“當然是”

聊天框輸出：嗨，我叫詹姆斯，當然是

有沒有有效的方法來完成這項任務？ 到目前為止，這是我所收到的警告，數量不多！

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>

根據要求提供更多代碼

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

Answer 1

在您當前的函數log_msg ：

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

您正在創建“段落”元素，它們是塊級元素（與內聯元素相對）。

您可以為css中的p元素創建替代的樣式規則：

#messages p    { display: inline }

對於這些段落（您可能需要指定/替代其他特定於瀏覽器的默認樣式），

或（從邏輯上講），您可以對其進行更改以創建一個跨度元素（內聯）：

在您的函數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, '')+' '

希望這可以幫助！