聊天HTML页面建议

Question

我仍然在学习HTML/CSS，所以请期待下面一个天真的问题。尽管如此，我想创建一个网页(而不是弹出聊天框或移动聊天接口)来模拟一个简单的聊天界面。

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

Q2:假设我使用overflow-y: scroll，那么如何使最新的聊天实例始终是重新加载后显示的实例呢？我假设，如果我添加了一个新的聊天<div>，它将不会获得焦点，除非我做了一些特殊的事情叫它的焦点？

Q3:是否有任何人推荐的开放源码网页聊天界面？

谢谢你所有的回答！

Answer 1

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

A1:是的，“溢出-y:滚动”是要走的路。

<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:用于聊天实例的--如果您计划在同一网页上生成多个实例--考虑使用类而不是ids，因为ids用于标识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>

您可以看到两个唯一的元素，这些元素是使用ids (#chatbox和#last)在DOM中标识的。也没有唯一的元素，比如消息，这些元素存在于整个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>

如果你只想阻止网页变大，那么溢出-y:滚动就可以了。只需认真考虑用于分隔chatbox、em、%、px等的单位。

Q2:在纯HTML/CSS世界中，您的选项是有限的，最简单的一个IMHO是使用命名锚，使用磅标记可以指定要访问的网页的哪一部分。在chatbox情况下，可以将“最后”id添加到最后一个消息元素中，然后只需调用yourdomain.com\chatbox.html#last.这个会呈现出这样的东西。

​

Q3: --我推荐的是JQuery UI，非常容易使用，还有几个用于聊天框的插件。

备注:由于您正在学习HTML/，所以我的答案集中在那些主题上，如果您没有时间设置服务器来运行这类应用程序，练习一下，我建议您查看一下Firebase --这个服务将为您抽象存储和异步行为。学习JS是必须的，JQuery是最流行的库之一，可能是一个很好的起点。不要过多地关注从Jquery中学习记忆东西，而是更多地学习它背后的过程，以及这些不同部分HTML/CSS/JS是如何协同工作的。