这是我们之前发布在 CSS-Tricks 上的原始 聊天室 的更新。在某些方面，技术是一样的。我们将使用 PHP 与服务器通信，使用 jQuery 使聊天继续进行，聊天内容将像第一个版本一样存储在 .txt 文件中。
变化的是添加了一些新功能
- 用户名对当前聊天的用户是唯一的
- 您可以看到一个“当前聊天”用户列表
- 有多个聊天室
一点点 MySQL
虽然第一个版本根本没有使用数据库，但我们将在这个版本中使用一点 MySQL。下载中有一个名为 Setup.sql 的文件，用于构建初始数据库。MySQL 不用于聊天本身，而是用于其他两件事
- 跟踪活跃用户
- 聊天室
当有人进入聊天时，他们会选择一个用户名。使用一些 jQuery，它会发出一个 AJAX 请求来查看该用户名是否当前在数据库中使用。如果正在使用，您将收到警告
否则，它表示没问题
如果没问题，并且您点击加入聊天，该用户名将被放入数据库，因此对该名称的进一步检查将告诉其他人该名称不可用。闲置用户将从数据库中删除。
添加/编辑/删除聊天室
聊天室的名称保存在数据库中。要添加一个新的聊天室，只需在数据库中添加一个新的行，其中包含聊天室的名称和您要存储聊天的文本文件的名称
然后只需要确保文本文件在服务器上的正确位置，并具有正确的服务器写入权限（请参阅下载以获取正确的位置）。
jQuery
我相信您现在已经注意到我们还没有看任何实际代码。这是有意的。所有代码都可以在下载中获得（见下文）。它不是那么多，以至于会让人不知所措，但我认为它对于标准的书面教程/概述来说太多了。相反，让我们概述它所负责的内容
用户名检查：在聊天主页上，当您选择用户名时，jQuery 会在那里监视该文本输入。当您键入一个字符（在 keyup 上）时，它会询问一个特定的 PHP 文件（通过 AJAX）该用户名是否正在使用。PHP 文件会以是或否进行回复，并相应地将一条消息附加到屏幕上。
消息框：当用户在发送消息的 textarea 中键入时，jQuery 会监视该框并确保文本少于一定数量的字符（通过 textarea 上的 maxlength 属性设置）。
发送消息：当在聊天框中按下回车/Enter 键时，它的值将被发送进行处理。PHP 将文本写入文本文件。
更新聊天：每隔几秒钟，jQuery 就会询问一个 PHP 文件轮询文本文件，以查看是否有任何新行，如果有，则将它们显示出来。
它没有的功能
- 您无法踢人出去
- 它不支持特殊字符
你想添加那些东西吗？我很乐意，我会更新它。
演示和下载
更新：事实证明，它在一个特定方面存在一个安全问题，这会导致授予对服务器上任何文件的访问权限。一位读者向我展示了他们如何公开访问我的 wp-config.php WordPress 文件，这当然非常敏感。漏洞在于 update.php 文件，该文件接受“state”和“file”参数。直接访问，并使用相对文件路径，您可以通过这种方式访问受保护的文件。修复后，我会更新可下载的代码。
更新：Jason Gradwell 建议对 PHP 端进行一些保护，这将要求该文件仅通过 Ajax 调用，并且只能从特定来源调用。
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_REFERER']!="http://your-site.com/path/to/chat.js") {
die();
} ?>致谢
特别感谢 Kenrick Beckett，他创建了最初支持此代码的代码，以及 Jason Lengstorf，感谢他查看并安全地整理了一些内容。
未来展望
以下是一些人们在评论中提出的建议，或者我个人认为很酷的建议
- 上面提到的安全问题已修复
- 防洪控制（例如，您每 5 秒只能提交 1 条消息）
- 注销链接（删除 PHP 会话）
- 允许一些 HTML，但不允许其他 HTML（标签白名单）。例如，允许 <a href=””>，但仍然删除 javascript。可能还有一些用于 HTML 的按钮（WYSIWYG？）。对 <code> 标签中的内容进行代码突出显示。
- 允许注册，以便能够永久拥有一个特定的用户名（以及随之而来的所有内容，例如“忘记密码”）。
- 防止不存在的聊天室名称，例如 /Chat2/room/?name=LOL
- 支持所有特殊字符（UTF-8）
- 私人消息（@）（只有与该用户名匹配的人才能看到）
- 踢人出去/禁止 IP 地址（仅作为管理员用户，或者可能只是 IP 地址黑名单）
- 更多表情符号
- 有一个实际的提交按钮（对于支持 JavaScript 但没有常规键事件的移动设备）
- 自动过滤不良词汇
- 使用外部登录系统，例如 Twitter oAuth、Google 登录或 Facebook Connect
- 用户名作为电子邮件地址，然后使用 Gravatars
- 具有 4 个字母扩展名的链接不起作用（例如 .info）
- 长轮询，而不是每隔几秒钟就进行请求
太棒了！简直是棒极了。
不过这里有一些关于未来版本的建议
1. 注销链接
2. 消息中的字符数不限
3. 一个 WYSIWYG 工具栏（HTML 格式化）
4. 代码突出显示（PHP、Java…）
5. 注册选项
6. 可能有一个管理面板
除此之外，它简直是最好的聊天应用！
.
“太棒了！这里有 6 种方法我认为你应该改变它：”… #客户
太棒了，你应该完全编码那些东西并将它提交到这里。
棒极了！
Chris，
你应该使用 flock() 来处理 txt 文件。
这里有一些建议，可以在不增强功能的情况下改进目前的聊天应用。
添加一个“退出”按钮。
对用户名字段添加验证（目前如果提交表单时为空值，你就会被重定向到空的 jumpin.php）。
不过这个小应用很酷。你保留文本文件的时间有多长？它是否限制了特定行数？
Rich
其他功能
编码 utf-8
使用“@”发送私信
Chris 干得漂亮！
如果你用 fiebug 在 js 代码中编辑一些内容，就会搞乱整个地方……
太棒了！我已经等了两个月了。问问 Kenrick，他会告诉你我总是烦他这件事：D。很高兴它终于出来了，期待在我的网站上实施它。
不错，看起来很棒。虽然匿名聊天并不总是好主意……
我认为你应该检查一下
不存在的聊天名称
顺便说一句，干得漂亮！
如果你正在应用程序的一部分中使用 MySQL，为什么不将其用于实际的对话呢？这似乎有点奇怪。
仅仅为了链接到平面文件而使用 MySQL 数据库，是不是有点笨拙？
也许吧，也许不。我喜欢文本文件的想法。你可以直接获取文件，从而获得对话的即时记录，以便在任何地方重新使用。清除它就像选择所有文本并删除它一样简单。处理数据库要麻烦得多。尽管我会说，如果数据存储在真正的数据库中，你可能可以做更多的事情。
这些文件可以有多大？如果它们太大，会影响响应时间吗？
我理解使用完整的平面文件聊天脚本是为了方便管理，正如你所描述的那样。
同样地，我理解将所有内容都使用 MySQL，因为它让你对数据有更多控制和操作能力。
我不理解同时依赖这两个系统的原因。个人认为，同时使用这两个系统既笨拙又非常低效。
如果所有内容都存储在 SQL 中，你就可以通过一个查询返回你的聊天记录，而在当前的设置中，你需要两个查询；其中一个还需要访问文件系统的 I/O。
我只是感觉不到它有多“低效”。我们又不是在加载两个不同的框架……你写入文本文件，你写入数据库，本质上事件的“重量”是一样的。
打开一个 MySQL 连接（或访问文件）效率低下。你想要尽可能减少它的使用。
老实说，对于你 SQL 中的数据量，你完全可以将它们直接存储在文件本身的 PHP 数组中。
去掉 SQL 数据库，用可爱的平面文件。
另外，如果你真的要扩展这个（就像你列出的未来改进），而且你仍然要使用平面文件，那就使用 SQLite。它比使用你自己的系统更易于管理。
我必须同意 Chris 的观点。能够直接从那个文本文件中获取数据真的很棒。此外，写入并重写那个文件似乎比为聊天中的每一行创建一个新的数据库行更有效。此外，他存储在数据库中的内容显然应该存储在数据库中。我不同意使用 SQLite 的建议。除了实际聊天和聊天文本文件之外，其他所有内容都使用 MySQL。我认为这是一个不错的系统。不过我并不是一个 SQL 专家。
你为什么这么反对 SQLite。它是一个很棒的系统，速度几乎与纯粹添加行一样快。
它基本上是平面文件中 MySQL 的强大功能。它只有几个（不常见）的命令无法很好地执行。
我认为 Benjamin Mayo 给出了一个非常好的建议！
我的想法也一样。
在我看来，要么完全使用数据库，要么完全使用文本文件。通常，我会选择数据库，但在这种情况下，能够完全摆脱对数据库连接的任何需求，并在自己的文件中存储配置，会非常不错。
这样看起来要干净得多。
在 sql 上运行聊天室会毁掉你的 sql 服务器，情况会变得很糟。相信我，如果你有大量访问者，那将是最糟糕的决定。
实际上最好的方法是什么？你能分别列出它们的优缺点吗？
你需要在你的 PHP 中检查一些东西；）。可以使用 PHP 脚本直接写入文本文件。
兄弟，你做得棒极了……
继续加油
我希望看到以下内容被整合
* UTF8 / 特殊字符（这非常重要）
* 私信（@）
* 踢人/封禁人员/IP
* “退出”按钮
* 注册你的昵称/姓名选项（需要密码和电子邮件 - 帐户验证）
*（管理面板会很棒）
从这个应用中创建一个 WP 插件怎么样？（并将它与用户数据库和管理面板整合……）
感谢你开发这个很棒的网络应用；）
真的很棒。
有一个退出按钮，能够将人踢出去会很有用。
还有一点要考虑的是，你可能需要更频繁地检查新消息，因为它似乎有点慢。
感谢 Chris……很棒的脚本…！:)
我认为极简主义非常重要（例如，没有关于主持人、管理员、颜色、字体等的访问列表）。
然而，我认为以下内容**应该在应用程序中**
* 加入或离开的用户名提示（闪烁红色，然后淡出表示离开） - 加入的昵称用黄色显示，几秒钟后使用 setTimeout 淡出为白色，与其他内容保持一致）
* 收到消息的时间戳（我喜欢查看加入房间时所说的最后几行功能，但它可能已经超过 3 个小时了，谁知道呢）
我喜欢的东西:
* 查看用户列表
* 有多个房间
* 可用昵称的实时类型检查
* 加入房间时查看日志的最后几行
我不喜欢的东西:
* 表情符号在白色背景上有灰色背景
* 水平滚动
* 按下回车键后，我看到它跳转到下一行，然后提交。它应该在按下这个键时返回 false（鼠标光标 | - 符号只显示一秒钟）
* HTML 标签被剥离（转换为 htmlentities？）
表情符号对我来说没有灰色背景，只有阴影。你在使用 IE 6 吗？
没事了……它们确实有灰色背景。不过对我来说颜色太浅了，我没看到。
我认为并非所有表情符号都有灰色背景 - 例如微笑就有一个灰色背景
https://css-tricks.cn/examples/Chat2/room/smiles/smile.gif
但是大微笑没有
https://css-tricks.cn/examples/Chat2/room/smiles/bigsmile.png
我猜想所有 .gif 仍然有灰色背景，而 PNG 是透明的。
这太棒了！
所以你不介意人们尝试向其中添加东西，对吧？
滥用确实很难控制。也许可以添加一些功能来查找某些词语，并在他们使用这些词语时将他们踢出……
我之前确实见过类似的脚本。非常酷。它不会显示 F**K，而是显示“不要再这样做”。你又做了一次，它就自动踢了你。与其他聊天相比，这可是高科技啊。
如果你修改 “process.php” 文件中的 “preg_replace”，就可以过滤掉脏话。我已经更新了文件，你可以在这里下载它：http://tmg33.com/misc/process.php.zip
我更新了 process.php.zip 文件，现在它不再区分大小写了。
谢谢 Justin！我把它加到实时聊天中，它在过滤掉我为了过滤而输入的一些传统诅咒方面效果很好。
那里有个傻瓜用你的名字在上面用“cum”和其他东西刷屏。
我个人会在 MySQL 表格中添加一个 IP 地址字段。
找到他，并禁止他访问 css-tricks.com，他显然不欣赏你的辛勤工作或演示。
在表单提交时用 php 添加一个隐藏的 IP 字段 :)
我同意……但如果是一百个人这样做呢？我认为他仅仅为了撤下演示做得很好。
很棒的开始，并且潜力巨大。我很想看看它的下一个版本。
Freddy Gonzalez 说，那里有个傻瓜用你的名字在上面用“cum”和其他东西刷屏。
???
http://www.gravatar.com/avatar/79ca93c8b5871f0fbeee4b8c9d35cbaf?s=32
有一点让我困扰的是，聊天框在您第一次加载页面时只显示 5 行。这使得很难跳入对话的中间。
我通过更新 chat.js 文件中的这段代码，将其更改为显示最近的 50 行
"...
success: function(data){
state = data.state-50;
updateChat();
..."
还有一些**其他错误**
* 当发布扩展名为 4 个字符（例如 *.info 或 *.name）的链接时，它在第 3 个字符后被截断。在 proces.php 中，正则表达式只检查 {2,3}，应该允许 4 个字符。
* 不存在的聊天室。虽然无法聊天，但用户列表仍然有效。我认为不要浪费资源。要么屏蔽它，要么完全允许非官方房间。
* 再一次，我不确定你为什么要使用 htmlentities(strip_tags())，我认为 htmlentities() 就足够了，尤其是在一个 HTML/CSS 聊天室中 ;) – 甚至可以使用反引号来使它预留空白（一个简单的 [span] 包裹在带有空白预留的反引号文本周围即可）。
—
TeMc
不错的应用，它非常简单，功能齐全。
这是一个很棒的示例，谢谢。
嘿 Chris，这是一个很棒的网络应用。例如，如果你想在你自己的网站上托管它，你怎么创建一个私人房间，以便奇怪的人无法访问聊天？这样只有被邀请的用户才能加入对话。
我对聊天感到惊讶，事实上，在测试聊天室中，我们根本没有看到任何脏话，事实上它非常国际化，所有人都非常友好 ;-)
我可能会在一个私人页面上尝试一下这个聊天……
哇，很棒的聊天……用户可以创建自己的群组吗？……
非常酷的聊天室应用。ajax 功能运行良好。感谢你创建它。
这真是一个很棒的聊天应用程序.. :) 我很喜欢它..
正如每个人所建议的那样，退出将是一个不错的选择，除此之外……
如果你能提供一个类似于一对一聊天应用程序的应用程序，那也很不错，这意味着两个用户之间的私人聊天。
我之前修改过 Kenrick Beckett 的原始脚本，添加了诸如当前用户列表和类似 Facebook 的“时间前”消息、带有表情符号选择器的情感表情支持，以及基于昵称哈希的前 6 个字符的彩色昵称（并略微变暗），这样它对同一个昵称就可以保持一致。我把脚本上传到这里，查看一下：http://stagas.com/chat/
哇，太酷了。你应该把它做成视频广播，这样我们这些初学者才能更好地理解。
这是我几年前（ajax 热潮刚开始的时候）编写的一个聊天室脚本（最后一次修改是在 2007 年初）。
http://www.christophdum.com/_dev/chat/
它的工作原理如下
当用户提交一条消息时，它会被保存到一个 mysql 数据库中（用于保存记录），同时，还会创建一个新文本文件，其中只包含该消息以及用户名和其他参数（例如，是否是发给特定用户的私人消息）– 文件名是一个数字（最后一个帖子 ID）。
因此，当你进入聊天室时，它基本上会从服务器请求最后一个消息 ID（例如，1000），然后尝试从服务器拉取名为 1001.txt 的文本文件 – 如果文件存在，则显示内容（消息）并请求 1002.txt – 如果文件不存在，则意味着没有新的帖子，因此它会尝试在半秒（或一秒）后再次从服务器拉取 1001.txt。
聊天文件夹中大约有 20 个这样的文件，每次创建新消息时，都会删除第 21 个文件（因此它会自动清理）。
因此，除非用户实际输入消息，否则不会调用 PHP 解析器或 mysql。
我在早期版本中尝试过使用单个 txt 文件，但 flock() 非常令人讨厌 – 为每条消息创建一个单独的文件解决了我的问题。
使用这种技术，我在 NFL 选秀期间处理过大约 100 个同时用户（我认为这对基于 http 的应用程序来说已经很不错了 – 而且可以更多，如果你稍微增加一下超时时间（使其响应速度稍微慢一点））。
它有用户列表、私人消息、管理员功能、忽略功能、多个房间，以及一个非常酷的功能：如果你聊天了很长时间，并且想找到之前记录的某些内容，只需向上滚动并查找它 – 如果收到新消息，脚本不会自动滚动（让你在记录中找到要查找的内容）– 如果你随后滚动回记录的底部，脚本将继续自动滚动。
PS：抱歉我的英语不好。
安全问题已经解决了吗？
看起来很棒！
好问题……我想知道。
来吧，伙计们！你可以自己下载代码并检查一下……别懒。
我真的很喜欢新功能。也许 ChatV3 会激发一个新的项目？
我和 Chris Coyier 的访谈
我想告诉你，我在 Google Chrome（运行 Windows XP）中查看了你的访谈，文本太淡了，我几乎看不清。我在 Firefox 中打开它，看起来很正常。
我不确定 Chrome 中是否有什么东西渲染不同。
非常感谢 Jason。
我们如何插入 utf-8 昵称？
一如既往的好教程。这是一个很有趣的想法，我已经尝试过了，到目前为止只做了有限的测试，但它很有希望！
再次干得好。
你可以使用这个方法允许用户退出：http://tmg33.com/misc/logOut.php.zip。
哈哈！因安全原因被撤下。
当我刚开始阅读这篇文章时，我认为可能存在安全风险。对数据进行清理是否有帮助，或者这是不可能的？
muchas gracias……
呵呵！太酷了！我喜欢它！
是否有可能将完整的聊天内容保留在聊天室中？现在，在你离开几分钟后，只有最后 5 行左右的内容会保留在那里。我该怎么做？似乎没有找到任何选项……
[2] 安全问题已经解决了吗？
嘿，克里斯，这太棒了。感谢你制作并发布它 - 我想知道安全问题是否也已修复。
你能详细说明一下安全问题吗？我不明白知道文件路径如何让你打开文件。我只是想知道，这样有助于确保未来的项目更安全。
不错，我想我会把它变成一个WordPress插件。
这在本地主机上运行良好，
但如果我上传到Web服务器，聊天和用户聊天列表无法显示...但记录到txt文件成功了...
我该怎么办？
是的，没问题。但IE有一些问题。如果我没记错的话。
请澄清一下。
很棒！我们允许自定义聊天的外观，移除“chat v2”，使用我们自己的表情符号等吗？
克里斯，干得好，我想知道是否有人可以帮助我安装它并创建一个房间。
谢谢
奇怪的是它在IE中运行，但在FireFox中却不行。我想知道它是否与某些浏览器不兼容。
如何在用户名和聊天中使用中文？
首先感谢你提供如此棒的产品！
我正在运行Chat2的第二个版本，但我输入信息并按下回车键时什么也没发生！我可以继续输入，文本区域每次点击回车键都会越来越大...可能是什么问题？
非常感谢你的答复...谢谢
更新：我让它运行起来了！我认为这是因为我在尝试添加私信功能时弄乱了一些函数！
我有一个简单的建议！
如果包中有一个简短的教程，这对像我这样的用户来说会非常有帮助！
非常感谢！它运行良好！
关于“**README for Whispering.txt**”文件
后来我在尝试添加私信功能时遇到了很多问题！我后来发现，有很多错误和文本完全不在它们正确的格式和行中。请检查私信文本，因为我遇到了很多问题，无法解决！私信的更详细的说明和新的代码是需要的，其余部分运行完美！
很遗憾我无法修复私信代码。
祝你好运
嗨，
你用来删除JS和其他危险代码的算法还不够。你应该使用名为HTMLPurifier的预写解决方案。就我个人而言，我不会安装这个... 如果我有更多时间，我会自己为这个解决方案做出贡献。
从积极的角度来看，如果你仔细研究，修复起来并不需要很长时间。
此外，虽然我理解出于配置文件的目的，最好将该文件完全保密。
除此之外，界面很好，但一些按钮的CSS可以真正完善它。
总体来说，干得好
@Christoph Dum
我可以测试你的代码吗？
很棒的代码...
仅供参考 - 你应该检查你包含的文件... 某些人在测试聊天中使用了一些带有颜色的词语，这些词语应该在有人生气之前被移除。
否则脚本不错 - 糟糕的是它使用的是旧版本的jQuery，滚动在iPhone Safari中不起作用。
Shervin Sardari 写道