我正在寻找一个HTML / CSS模板，它为实时聊天应用程序提供接口shell。我打算填写功能，但想要一个很好的起点。
答案 0 :(得分：4)
<div id="chat"></div>
无法更简单。一些javascript和很多服务器端编码，你们都已经完成了。
答案 1 :(得分：1)
<!DOCTYPE html>
<title>Simple chat</title>
<meta charset=utf-8>
<div>
<b>bob</b>: hello world<br>
<b>alice</b>: hello bob
</div>
答案 2 :(得分：0)
在这里，看看：精彩 stackoverflow聊天室的来源
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>C# | chat.stackoverflow.com</title>
<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico?v=89068f9546cd"><link rel="apple-touch-icon" href="http://sstatic.net/stackoverflow/img/apple-touch-icon.png?v=89068f9546cd"><link rel="search" type="application/opensearchdescription+xml" title="Chat for chat.stackoverflow.com" href="/opensearch.xml"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://or.sstatic.net/chat/Js/master-chat.js?v=89068f9546cd"></script>
<link rel="stylesheet" href="http://or.sstatic.net/chat/css/chat.stackoverflow.com.css?v=89068f9546cd">
<base target="_blank">
<script type="text/javascript">
function IMAGE(f) { return ("http://or.sstatic.net/chat/img/" + f); }
</script> </head>
<body id="chat-body">
<div id="jplayer"></div>
<div id="overlay-header"></div>
<div id="container">
<div id="feed-ticker" style="display: none;">
<div id="feed-ticker-icon"><img src="http://or.sstatic.net/chat/Img/feed-icon128.png?v=89068f9546cd" /></div>
<div id="dismiss-ticker">dismiss</div>
<h2><a href="/rooms/info/7/c?tab=feeds">New feed items</a></h2>
<div id="ticker-items"></div>
</div>
<span id="getmore" class="button" title="load a few more earlier chat messages">load older messages</span>
<span id="getmore-mine" class="button" title="load all chat messages up to the last time I talked in this room">load to my last message</span>
<a class="button" href="/transcript/7" title="view the complete archived chat history for this room">full transcript</a>
<a class="button" title="Only show starred messages, and messages to the current user" href="?highlights=true" target="_self">highlights</a>
<br /><br />
<div id="main">
<div id="chat"></div>
<div id="input-area">
<table width="100%" id="input-table"><tbody>
<tr>
<td rowspan="2" width="64">
<div id="active-user" class="user-container user-568371">
<div class="avatar user-gravatar64">
<img height="64" width="64" title="Chimoo" alt="Chimoo" src="http://www.gravatar.com/avatar/1341cd6dd9ff8c45b52d5f9d7b0d71af?s=64&d=identicon&r=PG">
</div>
</div>
<div title="You have a reply/mention" id="reply-count" style="visibility:hidden"></div>
</td>
<td class="chat-input" rowspan="2">
<div id="bubble">
<ul id="tabcomplete"></ul>
<div id="inputerror"></div>
<textarea id="input"></textarea>
</div>
</td>
<td id="chat-buttons">
<button class="button" id="sayit-button">send</button>
<button class="button" id="upload-file">upload…</button>
<button class="button" id="cancel-editing-button" style="display: none;">cancel editing</button>
<button class="button" id="codify-button" title="Toggle fixed-width formatting (ctrl+k)">fixed font</button>
</td>
<td id="footer-logo">
<a href="http://stackoverflow.com" title="Stack Overflow"><img style="max-width:150px" src="http://sstatic.net/stackoverflow/img/logo.png?v=89068f9546cd" alt="Stack Overflow"/></a>
</td>
</tr>
<tr>
<td id="footer-legal" colspan="2" style="vertical-align: bottom; padding-top: 0px;">
<a id="mini-help" href="/faq#formatting">help</a> | <a href="/faq">faq</a> | <a href="http://stackoverflow.com/legal">legal</a>
</td>
</tr>
</tbody></table>
</div>
<div id="bottom"></div>
<div id="sidebar"><div id="sidebar-content">
<div id="info">
<div id="sound" title="set audio notification level"></div>
<div class="fl">
<a id="allrooms" class="button" href="/">all rooms</a>
</div>
<form method="get" action="/search">
<input type="text" id="searchbox" name="q"/>
<input type="hidden" name="room" value="7" />
</form>
<div style="height:0" class="clear-both"> </div>
<h1 id="roomtitle">
<span id="roomname">C#</span>
<span id="toggle-favorite" title="Toggle this as a favorite room" class="favorite-room-vote"> </span>
</h1>
<div id="roomdesc">var future = await new CSharp5();</div>
<div id="sidebar-menu">
<a title="leave this room" target="_self" id="leave" href="/chats/leave/7">leave</a>
(<a title="leave all rooms" id="leaveall" target="_self" href="/chats/leave/all">all</a>) |
<a id="room-menu" title="more options for this room" href="/transcript/7/c">room▼</a> |
<a id="about-room" title="about this room" href="/rooms/info/7/c">info</a>
</div>
</div>
<div id="widgets">
<div class="sidebar-widget">
<div class="fr msg-small"><span class="more"></span></div>
<ul id="present-users" class="collapsible fixed-max clear-both">
<div class="clear-both"></div>
</ul>
</div>
<div class="sidebar-widget" id="room-ad">
<div class="fr msg-small">not the room you are looking for?</div>
<br class="cboth" />
<br class="cboth" />
<div><a href="/">There are other rooms</a>, with 24 users currently talking in 10 rooms.</div>
</div>
<div class="sidebar-widget">
<div class="fr msg-small">other rooms you're in <span class="more"></span></div>
<br class="cboth" />
<ul id="my-rooms" class="collapsible">
</ul>
</div>
<div class="sidebar-widget">
<div class="fr msg-small">
<a href="/feeds/rooms/starred/7"><span class="feed-icon"> </span></a>
starred <span class="more"></span>
<span id="show-all-starred"> / <a href="/rooms/info/7/c/?tab=stars">show all</a></span>
</div>
<br class="cboth" />
<div id="starred-posts">
<div class="votesummary">
<ul class="collapsible"></ul>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
<div id="loading"><div id="loading-message">
Loading C#<br />
Just a second…
</div></div>
<script type="text/javascript">
SERVER_TIME_OFFSET = 1299616872 - (new Date()).getTime() / 1000;
$(function() {
var chat = StartChat({
sound: {
file: "http://or.sstatic.net/chat/so.mp3",
vol: 65,
swfPath: "http://or.sstatic.net/chat"
},
may_bookmark: true,
egg: "Cthulu",
desktopNotify: false
},
568371,
{
id: 7,
host: '',
deleted: false,
frozen: false
},
null,
false,
false,
{});
update_user({id: 1314, name: ("akmad"), email_hash: "e4511b40499f076b090fa6fc8b9a8f84", reputation: 2181, last_post: 1299615057});
chat.sidebar.loadUser(1314, ("akmad"), 1299615057, 'e4511b40499f076b090fa6fc8b9a8f84');
update_user({id: 109749, name: ("drachenstern"), email_hash: "c4cca9bfec5d5e77f625d9fbe8e37a41", reputation: 3877, last_post: 1299518520});
chat.sidebar.loadUser(109749, ("drachenstern"), 1299518520, 'c4cca9bfec5d5e77f625d9fbe8e37a41');
update_user({id: 451383, name: ("Dr TJ"), email_hash: "5daee118cdbdcc3f777d6565e5b29a01", reputation: 504, last_post: 1299366562});
chat.sidebar.loadUser(451383, ("Dr TJ"), 1299366562, '5daee118cdbdcc3f777d6565e5b29a01');
update_user({id: 181481, name: ("Rebecca Chernoff"), email_hash: "d8c43bb4c449d8054aebdd4ad98c6f6c", reputation: 1950, is_moderator: true, is_owner: true, last_post: 1299285715});
chat.sidebar.loadUser(181481, ("Rebecca Chernoff"), 1299285715, 'd8c43bb4c449d8054aebdd4ad98c6f6c');
update_user({id: 47401, name: ("Diadistis"), email_hash: "dcc1f0ceeb6e0bdef4c4774005941ad1", reputation: 3795, last_post: 1287190243});
chat.sidebar.loadUser(47401, ("Diadistis"), 1287190243, 'dcc1f0ceeb6e0bdef4c4774005941ad1');
update_user({id: 561570, name: ("donkz"), email_hash: "2b11586ee1fda319b9ba8afea024a172", reputation: 3, last_post: 0});
chat.sidebar.loadUser(561570, ("donkz"), 0, '2b11586ee1fda319b9ba8afea024a172');
update_user({id: 205110, name: ("Reza M."), email_hash: "2b1ad65d162d234207b2a70658837ce4", reputation: 21, last_post: 0});
chat.sidebar.loadUser(205110, ("Reza M."), 0, '2b1ad65d162d234207b2a70658837ce4');
update_user({id: 466224, name: ("Yarx"), email_hash: "383b31276adfcd2a4410680852e58c79", reputation: 23, last_post: 0});
chat.sidebar.loadUser(466224, ("Yarx"), 0, '383b31276adfcd2a4410680852e58c79');
update_user({id: 568371, name: ("Chimoo"), email_hash: "1341cd6dd9ff8c45b52d5f9d7b0d71af", reputation: 494});
chat.sidebar.loadingFinished();
});
</script>
<noscript>
<div class="notification">
Welcome to the chat! Unfortunately, you have JavaScript disabled, and thus this chat will not work.
If you would like to participate, please enable JavaScript in your browser and reload this page.
</div>
</noscript>
<input id="fkey" name="fkey" type="hidden" value="39eed73f04c18e8dbb01b1bd1d9bf848" />
</body>
</html>
答案 3 :(得分：0)
我不希望你对这个问题有一个好的答案，因为“实时聊天”的功能将根据你想要包含的功能而有很大不同。这是1-1聊天吗？小组聊天？ Gmail风格的聊天？你支持纯文本以外的任何东西吗？您需要丰富的格式工具栏吗？好友列表？你明白了。
真的你不能在这里作弊。相反，你不能欺骗问题的这一部分。没有功能，实时聊天界面没有任何意义。这与你没有提供钉锤服务的企业的原因相同 - 如果你要自己建造它，锤击钉子真的不是那么多额外的努力。同样，如果您要从头开始编写自己的实时聊天代码，那么界面的外壳代表了复杂性的一小部分。
然而，确实存在完整的解决方案。查看these XMPP clients，其中一个可能会提供您正在寻找的内容。
如果没有，我建议您花一小时用您想要的组件创建自己的shell。比试图找出模板花费的时间更少，您将获得更多控制权。查看您喜欢的其他实时聊天界面的示例，花半小时在纸上绘制您的聊天。然后只标记组件并创建一个HTML shell。您可以随后以任何方式使用CSS为该shell设置外观。