- План
В данной статье мы будем создавать простенький чат, который можно легко запустить на любом сервере, на котором есть поддержка PHP. Не требуется никаких баз данных, потому что вся информация о чате будет храниться в простом текстовом файлике. Применяемая технология:
PHP – будет управлять всеми сторонними материалами приложения
- Запись новых сообщений в текстовый файл
- Чтение новых сообщений из текстового файла
- Запрос состояния текстового файла
- Основная безопасность
jQuery/javascript – управление клиентской стороной приложения. Данное приложение разработано AJAX, что означает, что сообщения будут появляться во всплывающем окне (как ваши, так и собеседников), без требований перезагрузки страницы.
- Периодический запрос сервера на наличие новых сообщений
- Добавление новых сообщений в окно чата
- Прокрутка окна чата к новым сообщениям
- Запрос и установка имени пользователя
- Ограничение размера сообщений во избежание огромных сочинений в окне чата
- Основная безопасность
Текстовый файл – хранит историю чата
- Отойдем от плана
В данной статье мы охватим различные интересные вещи и технологии, и в конечном счете, получим чат. Правда, такой чат будет сложно назвать самым лучшим чатом с самым большим количеством возможностей. Вы не сможете кикать или банить людей. Несколько человек могут ставить себе одинаковое имя. Вы не сможете видеть всех активных участников чата. Другими словами, это вам не 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">
Your message: </p>
<textarea id="sendie" maxlength = '100'></textarea>
</form>
</div>лядите, немного драгоценной разметки. На самом деле, 50% того, на что вы смотрите, не имеет никакого отношения с направленностью данной статьи. Оформление страницы центрирует вещи. Двойные div’ы, примененные к разметке чата и окна сообщений используются лишь для прибавления (не очень-то и нужного) эффекта двойной границы окна сообщений.
Самыми важными областями являются textarea с идентификатором «sendie», и div окна сообщений. На этом будет указывать javascript.
- Часть движка на javascript
Мы собираемся добиться немного объектного ориентирования посредством javascript. Мы создадим функцию Чата, которая будет верхнем звеном в связке с остальными функциями, связанными с вещами, относящимися к чату.
Код:
function Chat () {
this.update = updateChat;
this.send = sendChat;
this.getState = getStateOfChat;
}UpdateChat будет давать запрос серверу о наличии новых линий в текстовом файле. Если же они присутствуют, то функция опубликует их в окне чата. 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] +"</p>"));
}
}
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();
},
});
}Все эти три функции используют возможности AJAX в jQuery, а также связывают их с PHP-файлом, который называется process.php. Его нам, конечно же, нам потребуется создать.
- Часть движка на PHP
Часть информации, которая передается с AJAX, являются произвольным значением, и называется «function». Это просто дает файлу PHP информацию о том, какие вещи требуется выполнить. Первым делом мы выставим значение и настроим переключатель оператора, который будет охватывать все возможные функции. Мы также установим чистый массив, в котором будет храниться значения, которые будут кодироваться в 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, '[url="'.$url[0].'"]'.$url[0].'[/url]', $message);
}
fwrite(fopen('chat.txt', 'a'), "". $nickname . "" . $message = str_replace("\n", " ", $message) . "\n");
}
break;
}
echo json_encode($log);
?>- Возьмемся за дело
Нам потребуется написать немного javascript, иначе праздник так и не начнется. Загрузите jQuery, подгрузите наш «движок», затем выполните несколько действий для того чтобы собрать несколько имен участников чата, чтобы получился разговор.
По ходу дела, давайте настроим ограничитель длины сообщений и присвоим функцию отправки сообщений кнопке return.
Код:
<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">
// 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: " + name + "");
// 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>- Периодическая проверка наличия новых сообщений
Нам потребуется использовать функцию «update» для того, чтобы опрашивать наш текстовый файл на наличие нового текста. Так как нам потребуется регулярный вызов функции update, мы используем javascript-функцию setInterval():
Код:
<body onload="setInterval('chat.update()', 1000)">