首先还是贡献一波下载地址:
（访问密码：7054）
在本教程中，我们将构建一个非常容易在任何运行 PHP 的服务器上启动和运行的小聊天程序。 不需要数据库 ——因为聊天将自己存储在一个简单的 文本文件 中。使用的技术：
- PHP – 将处理所有服务器端的东西将新消息写入文本文件从文本文件中读出新消息检索文本文件的“状态”基本安全
- jQuery /Java script —— 将处理客户端的东西。这是一个 AJAX-y 应用程序，这意味着消息会弹出到屏幕上（包括您的和其他人的），而无需任何页面刷新。定期询问服务器是否有新消息已发布在聊天中添加新消息将聊天向下滚动到最新消息询问和设置用户名限制文本输入以防止出现巨大的荒谬消息基本安全
- 文本文件 – 存储聊天
不是计划
本教程涵盖了各种有趣的事物和有趣的技术，最终的结果绝对是一个聊天室。它不是世界上功能最全的聊天室。你不能踢人或禁止人。人们可能有相同的名字。您无法查看聊天的所有当前成员。换句话说，这不是 IRC 。这只是一个有趣的演示，在多种情况下完全可行。如果您想使用它并运行它并使其功能更全面，请成为我们的客人！
基本 HTML 结构
<div id="page-wrap">
<h2>jQuery/PHP Chat</h2>
<p id="name-area"></p>
<div id="chat-wrap"><div id="chat-area"></div></div>
<form id="send-message-area">
<p>Your message: </p>
<textarea id="sendie" maxlength = '100'></textarea>
</form>
</div>
伙计们，这里有宝贵的小标记。即使您在上面看到的内容也有 50% 与本教程的特定功能无关。换页是为了使事物居中。聊天包装和聊天区域的双 div 只是为了在聊天区域中实现完全不必要（但很酷）的双边框效果。
两个最重要的区域是 id 为“sendie”的文本区域和聊天区域 div。JavaScript 将针对这些。
JavaScript 引擎的一半
我们将使用 JavaScript 获得一点面向对象的知识。我们将创建一个“聊天”函数，它是一系列其他函数的父函数，用于处理与聊天相关的内容。
function Chat () {
this.update = updateChat;
this.send = sendChat;
this.getState = getStateOfChat;
}
updateChat 将询问服务器文本文件中是否有新行。如果有，它会将它们作为 JSON 返回，然后此函数会将这些新行附加到聊天中。 当消息输入到文本区域并按下返回时，将调用 sendChat 。 该函数会将这些数据传递给服务器以对其进行处理。 getStateOfChat 基本上询问服务器当前文本文件有多少行，因此它可以比较并知道行何时是“新的”或不是。此信息也以 JSON 形式返回。这些功能看起来像：
//gets the state of the chat
function getStateOfChat() {
if (!instanse){
instanse = true;
$.ajax({
type: "POST",
url: "process.php",
data: {'function': 'getState', 'file': file},
dataType: "json",
success: function(data) {state = data.state;instanse = false;}
});
}
}
//Updates the chat
function updateChat() {
if(!instanse){
instanse = true;
$.ajax({
type: "POST",
url: "process.php",
data: {'function': 'update','state': state,'file': file},
dataType: "json",
success: function(data) {
if(data.text){
for (var i = 0; i < data.text.length; i++) {
$('#chat-area').append($("
"+ data.text[i] +"
"));
}
}
document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight;
instanse = false;
state = data.state;
}
});
}
else {
setTimeout(updateChat, 1500);
}
}
//send the message
function sendChat(message, nickname) {
updateChat();
$.ajax({
type: "POST",
url: "process.php",
data: {'function': 'send','message': message,'nickname': nickname,'file': file},
dataType: "json",
success: function(data){
updateChat();
}
});
}
所有这三个函数都利用了 jQuery 的 AJAX 功能，并与一个名为 process.php 的 PHP 文件进行通信，当然我们需要构建这个文件！
引擎的 PHP 一半
通过 AJAX 调用传递的部分数据是一个名为“函数”的（任意）值。这只是为了让 PHP 文件知道我们需要做什么样的事情。因此，我们要做的第一件事就是获取该值并设置一个涵盖每个可能功能的 switch 语句。我们还设置了一个空白数组来存储值，最终将在最后编码为 JSON 并传回。
当我们尝试 getState 时，会读取文本文件并返回行数。当我们 更新 时，文件被读取并重新调整任何新行。当我们发送时，消息被处理，然后作为新行写入文本文件。
<?php
$function = $_POST['function'];
$log = array();
switch($function) {
case('getState'):
if (file_exists('chat.txt')) {
$lines = file('chat.txt');
}
$log['state'] = count($lines);
break;
case('update'):
$state = $_POST['state'];
if (file_exists('chat.txt')) {
$lines = file('chat.txt');
}
$count = count($lines);
if ($state == $count){
$log['state'] = $state;
$log['text'] = false;
} else {
$text= array();
$log['state'] = $state + count($lines) - $state;
foreach ($lines as $line_num => $line) {
if ($line_num >= $state){
$text[] = $line = str_replace("\n", "", $line);
}
}
$log['text'] = $text;
}
break;
case('send'):
$nickname = htmlentities(strip_tags($_POST['nickname']));
$reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/";
$message = htmlentities(strip_tags($_POST['message']));
if (($message) != "\n") {
if (preg_match($reg_exUrl, $message, $url)) {
$message = preg_replace($reg_exUrl, '<a href="'.$url[0].'" target="_blank">'.$url[0].'</a>', $message);
}
fwrite(fopen('chat.txt', 'a'), "<span>". $nickname . "</span>" . $message = str_replace("\n", " ", $message) . "\n");
}
break;
}
echo json_encode($log);
?>
开始一切
我们需要做一些 JavaScript 的东西来让这个派对开始。我们需要加载 jQuery，加载“引擎”，然后执行一些快速函数来收集聊天参与者的姓名以加入聊天。
当我们这样做的时候，让我们把这些东西放进来限制输入文本的长度并通过按下返回键来发送文本。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="chat.js"></script>
<script>
// ask user for name with popup prompt
var name = prompt("Enter your chat name:", "Guest");
// default name is 'Guest'
if (!name || name === ' ') {
name = "Guest";
}
// strip tags
name = name.replace(/(<([^>]+)>)/ig,"");
// display name on page
$("#name-area").html("You are: <span>" + name + "</span>");
// kick off chat
var chat = new Chat();
$(function() {
chat.getState();
// watch textarea for key presses
$("#sendie"). keydown (function(event) {
var key = event.which;
//all keys including return.
if (key >= 33) {
var maxLength = $(this).attr("maxlength");
var length = this.value.length;
// don't allow new content if length is maxed out
if (length >= maxLength) {
event.preventDefault();
}
}
});
// watch textarea for release of key press
$('#sendie').keyup(function(e) {
if (e.keyCode == 13) {
var text = $(this).val();
var maxLength = $(this).attr("maxlength");
var length = text.length;
// send
if (length <= maxLength + 1) {
chat.send(text, name);
$(this).val("");
} else {
$(this).val(text.substring(0, maxLength));
}
}
});
});
</script>
定期检查新消息
我们需要使用聊天的“更新”功能来轮询文本文件中的新消息，并在必要时附加它们。所以我们需要定期调用更新函数，为此我们将使用 JavaScript 的 setInterval () 函数：
<body onload="setInterval('chat.update()', 1000)">
