План
В сегодняшнем уроке мы рассмотрим создание небольшой чатовой программы, которая очень проста в написании и поддерживается на всех серверах, работающих с PHP. Никакой базы данных не требуется – вся программа чата будет храниться в простом текстовом файле. Программа создается с применением следующих технологий:
• PHP – для хранения серверной информации
- Написание новых сообщений в текстовом файле
- Чтение новых сообщений из текстового файла
- Обновление сведений о файле
- Обеспечение безопасности
• jQuery/JavaScript – управление клиентской информацией. Это приложение AJAX-y, которое обеспечивает появление сообщений на экране (как на вашем, так и у других пользователей) без необходимости обновления страницы.
- Периодический запрос сервера насчет новых сообщений
- Доставление в чат новых сообщений
- Прокрутка окна таким образом, чтобы отображались только самые последние сообщение
- Запрос и установка имени пользователя
- Ограничение длины сообщения во избежание громоздких посланий в чате
- Обеспечение безопасности
• Text File () – хранение программы чата
СВЕРХ запланированного
В этом уроке вы узнаете о некоторых интересных методиках и технологиях, в результате чего у вас получится настоящий чат. Конечно, его нельзя будет назвать самым продвинутым чатом в мире. Вы не сможете выгонять пользователей из чата или банить их. Пользователи не смогут менять свой ник. Вам не будет доступен список всех, кто в данный момент находится в чате. Другими словами, это не 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>
То, с чем вы только что ознакомились, даже наполовину не является основным функционалом программы. Функция page-wrap применяется для центрирования. Функции double-div, chat-wrap и chat-area отвечают за совершенно необязательную, но при этом весьма эффектную двойную рамку окна чата.
Самое важное здесь – это функция textarea, которой присваивается значение sendie, а также дивергенция окна чата, с которым будет работать JavaScript.
Использование методики JavaScript в программе
Итак, воспользуемся возможностями JavaScript – создадим функцию “Chat”, которая будет отвечать за все остальные функции, так или иначе связанные с работой чата.
function Chat () {
this.update = updateChat;
this.send = sendChat;
this.getState = getStateOfChat;
}
Функция updateChat посылает на сервер запрос о наличии новых строчек в текстовом файле. Если они есть, то функция помечает их как JSON и добавляет в чат. Функция sendChat активируется, когда сообщение уже написано в поле ввода и нажата кнопка «Enter» - она передает введенную информацию на сервер. Функция getStateOfChat запрашивает сервер о количестве строчек в текущем текстовом файле, чтобы выяснить, есть новые строки или нет. Эта информация также заносится в JSON, а вот так выглядят все эти функции:
//проверка состояния чата
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;
},
});
}
}
//обновление чата
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($("<p>"+ data.text[i] +"</p>"));
}
}
document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight;
instanse = false;
state = data.state;
},
});
}
else {
setTimeout(updateChat, 1500);
}
}
//отправка сообщения
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’s AJAX, а также используют в процессе коммуникации файл process.php, который нам, сами понимаете, придется создать.
Использование технологий PHP в программе
Часть информации, которая передается с помощью запросов AJAX, является (произвольной) величиной, которая носит название “function”. Это нужно для того, чтобы уведомить файл PHP о том, какие действия следует выполнить. Таким образом, прежде всего нам нужно связать эту величину и с переключением функций. Также мы создаем пустой массив, в котором будут храниться переменные, которые затем будут записаны как JSON и переданы обратно.
Когда мы обращаемся к функции getState, считывается текстовый файл, в том числе и количество строк в нем. Когда мы запускаем функцию update, файл опять же считывается, но теперь в него добавляются новые строки. Функция send обрабатывает сообщение и затем вписывает его в текстовый файл новой строчкой.
<?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, берем “engine”, а затем добавляем несколько функций, которые обеспечат пользователям возможность выбрать себе ник для входа в чат.
Когда с этим закончено, займемся ограничением количества символов в сообщении и обеспечением отправки сообщения нажатием клавиши Enter.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="chat.js"></script>
<script type="text/javascript">
// запрашиваем имя пользователя
var name = prompt("Enter your chat name:", "Guest");
// если имя не указано, ник пользователя – 'Guest'
if (!name || name === ' ') {
name = "Guest";
}
// полоса тэгов
name = name.replace(/(<([^>]+)>)/ig,"");
// отображение имени на странице
$("#name-area").html("You are: <span>" + name + "</span>");
// вход в чат
var chat = new Chat();
$(function() {
chat.getState();
// отслеживаем ввод текста в окне чата
$("#sendie").keydown(function(event) {
var key = event.which;
//отслеживаем нажатие всех клавиш, в том числе Enter.
if (key >= 33) {
var maxLength = $(this).attr("maxlength");
var length = this.value.length;
// не позволяем продолжить набор сообщения, если превышен лимит длины
if (length >= maxLength) {
event.preventDefault();
}
}
});
// отслеживаем нажатие клавиш в поле ввода текста
$('#sendie').keyup(function(e) {
if (e.keyCode == 13) {
var text = $(this).val();
var maxLength = $(this).attr("maxlength");
var length = text.length;
// отправляем
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)">
Необходимые дополнения
Примечание: Не забывайте, что программа основана на технологиях PHP, так что если вы не используете локальный PHP-сервер, простой загрузки файлов и их открытия будет недостаточно для того, чтобы запустить демо-версию. Также не забудьте сменить разрешение файла chat.txt для возможности записи его на сервер, когда вы займетесь собственной тестовой загрузкой.