用于渲染聊天记录的HTML构造

Question

我正在研究一个演示Web套接字应用程序。我已经在客户端和服务器之间建立了通信，并且它们能够在它们之间交换信息。我有兴趣以可滚动的，颜色不同的UI形式表示聊天记录。我最初使用的是完美的TextArea。唯一的问题是我无法对服务器和用户响应进行不同的颜色编码。然后，我从Bootstrap退回到LI元素。但是它们看起来很肿，我注意到的另一件事是因为它们是UL的一部分，所以我没有滚动条。因此，当客户端和服务器之间进行更多通信时，用户输入文本框将被推至页面底部。

请求您向我建议我可以探索的替代HTML构造。

HTML：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>A WebSocket Example!</title>
  </head>
  <body>
    <h1>Lets Chat!</h1>
    <small id="subtextMessage" class="form-text text-muted">Great conversations happen over a socket!.</small>
    <BR><BR>

    <!-- Building the Form -->
    <form class="" id="chatform" onsubmit="clearTextInput();return false">
        <div class="form-group">
            <label for="conversationHistory">Conversation History</label>
            <ul class="list-group" id="conversationList">
            </ul>
            <textarea class="form-control" id="conversationHistoryTextArea" rows="10" readonly></textarea>
        </div>
        <div class="form-group">
            <label for="labelMessage">Type your message</label>
            <input type="text" class="form-control" id="inputMessageTextBox" aria-describedby="inputMessage">
        </div>
        <button type="submit" class="btn btn-primary" onclick="sendMessage()">Send Message</button>
    </form>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="js/chatscript.js">    
    </script>

</body>
</html>

Javascript：

function clearTextInput()
{
    $("#inputMessageTextBox").val("");
    console.log( "Reached Here" )
}

function sendMessage() {
    ws.send( $("#inputMessageTextBox").val() );   
    $("#conversationHistoryTextArea").val( $("#conversationHistoryTextArea").val() + "\n" + "YOU: " + $("#inputMessageTextBox").val() );

    let li = document.createElement('li');
    li.innerText =  $("#inputMessageTextBox").val();
    li.classList.add("list-group-item");
    li.classList.add("list-group-item-info");
    document.getElementById('conversationList').appendChild(li);
}

let ws = new WebSocket("ws://localhost:8000");
ws.onopen = function(event) {
    console.log("Client: WebSocket request accepted.");
};

ws.onmessage = function(event) {
    console.log("Received from the server" + event.data);

    if( $("#conversationHistoryTextArea").val().trim().length > 0 )
        $("#conversationHistoryTextArea").val( $("#conversationHistoryTextArea").val() + "\n" + "SERVER: " + event.data );
    else
        $("#conversationHistoryTextArea").val( "SERVER: " + event.data );

    let li = document.createElement('li');
    li.innerText =  event.data;
    li.classList.add("list-group-item");
    li.classList.add("list-group-item-primary");
    document.getElementById('conversationList').appendChild(li);
};

[如果有任何建议，请告诉我。

Answer 1

您可以使用HTML <p>元素，并为每个不同的参与者使用CSS类。

您也可以使用<span>，但您必须处理换行符。

我确定有很多其他解决方案。

用于渲染聊天记录的HTML构造

问题描述投票：0回答：1

1个回答

最新问题

用于渲染聊天记录的HTML构造

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1