Chat HTML 页面建议

Question

我还在学习HTML/CSS，所以请期待下面的幼稚问题。话虽如此，我想创建一个网页（不是弹出式聊天框或移动式聊天界面）来模拟一个简单的聊天界面。

Q1: 我想知道使用哪个 HTML 元素来插入聊天实例。如果我把它全部放在 <div id='chats'> 中，每次我添加新实例（新的传入聊天）时，页面只会变得更长。我想限制 window 在一个框架中显示这些聊天实例，因此网页的长度保持不变。然后用户可以在 window 中上下滚动以阅读聊天记录。我如何做到这一点？我认为 Whosebug 这样做是为了推荐可能对我的问题有答案的问题，它使用 overflow-y: scroll。这是要走的路吗？

Q2:假设我使用overflow-y: scroll，我如何保持最新的聊天实例在重新加载后总是显示？我假设如果我添加一个新聊天 <div>，它不会获得焦点，除非我做一些特别的事情来调用它的焦点？

Q3:有没有任何人会推荐的网页的开源聊天UI？

谢谢大家的回答！

Answer 1

在回答任何问题之前，您缺少两件事：第一，您没有在任何地方提到 javascript，这将是该项目的要求。第二，如果您希望多人能够使用此聊天，您将需要某种服务器技术来中继消息。

A1：是的 "overflow-y: scroll" 是要走的路

<div id="chats" style="width: 400px; height: 400px; overflow-y: scroll;">

A2：好吧，可能我没看懂这个问题。您只想在页面重新加载时滚动到聊天的底部（最新消息）吗？

如果是这样，那么在页面加载时调用这样的东西就可以了：

var chatDiv = document.getElementById("chats");
chatDiv.scrollTop = chatDiv.scrollHeight;

A3：在不了解您将要使用的服务器端框架技术的情况下(Node.js、PHP、ASP.NET)。不可能向您指出特定的开源解决方案，但这并不是一件很难的事情，所以我假设它们对于每个服务器端框架都是多种多样的。

这是一个简单的单用户实现。如上所述，要使其与多个用户一起使用，您必须通过服务器中继它，或者至少使用服务器来发送每个聊天者连接信息。

https://jsfiddle.net/3yvzp93m/4/

function writeMessage(form){
    var now = new Date().toLocaleString()
    var user = form.username.value;
    var message = form.msg.value;
    document.getElementById("chat").innerHTML = document.getElementById("chat").innerHTML + now  + " | " + user + " said: " + message + "<br />";
}

<div id="chat" style="width: 100%; height: 150px; overflow-y: scroll;">
</div>
<form name="message" method="POST">
  <label for="username">Username</label>
  <input type="text" name="username" />
  <label for="msg">Message</label>
  <input type="text" name="msg" />
  <input type="button" name="button" value="Submit" onClick="writeMessage(this.form)" />
</form>

Answer 2

Q1: 对于聊天实例，如果您计划在同一网页上生成多个实例，请考虑使用类而不是 id，因为 id 旨在用于识别 DOM 中的唯一元素。

例如：

<h1>Chat Box</h1>
<div id = "chatbox">
    <div class="message">
        <span class="user">User says:</span>
        <span>first message</span>
    </div>
    <div class="message">
        <span class="user">User says:</span>
        <span>first message</span>
    </div>
    <div id ="last" class="message">
        <span class="user">User says:</span>
        <span>last message</span>
    </div>
</div>

您可以看到有两个独特的元素，这些元素在 DOM 中使用 ID （#chatbox 和 #last） 进行标识。还有一些非唯一元素，如消息，它们存在于整个 DOM 中，应该使用类 （.message 和 .user） 来识别这些元素。

Css 代码可能类似于：

<style>
    #chatbox {
        height: 2em;
        overflow-y:scroll;
        border: 1px solid black;
    }
    #chatbox>.message{
        border: 1px dotted black;
    }
    #chatbox>.message>.user{
        font-weight: bold;
    }
</style>

如果你只想防止网页变大，那么overflow-y:scroll就可以了。请注意您用于分隔聊天框高度的单位，em、%、px 等。

Q2: 在纯粹的 HTML/CSS 世界中，您的选择是有限的，恕我直言，最简单的方法是使用命名锚点，使用井号可以指定要转到网页的哪一部分。在聊天框的情况下，您可以将 "last" id 添加到最后一个消息元素，然后只需调用 yourdomain.com\chatbox.html#last 。这将呈现这样的东西。

Q3:我会推荐JQuery UI，非常好用，而且有几个聊天框插件。

注意事项：既然你在学习HTML/CSS我就把我的回答集中在这些主题上，如果你没有时间设置服务器到运行这种应用程序，练习，我建议看看 Firebase 这个服务会为你抽象存储和异步行为。学习 JS 是必须的，JQuery 作为最受欢迎的库之一可能是一个很好的起点。不要太专注于从 Jquery 学习 Memorizing 东西，而是更多地关注学习它背后的过程以及所有这些不同部分 HTML/CSS/JS 如何协同工作。

Chat HTML 页面建议

Chat HTML page suggestion

html

css

chat

livechat