Главная
Друзья!
Мы находимся в процессе большой чистки!
Возможны ошибки и кривизна страниц
Просмотреть всё и быстро не возможно!
Если нашли какую-то ошибку, то если вам не трудно напишите здесь адрес...
Сейчас вы здесь :
http://dwweb.ru/page/js/jquery/002_prostoy_chat.html

Простой чат chat javascript на файлах

JS | JS_JQUERY | TASK |

Нам нужен простой чат, и мы сами хотим его написать без оглядки, на всякие другие чаты и скрипты.

Немного предыстории, когда-то я искал самый простой чат, который только можно себе придумать с точки зрения понимания, как это работает! И он до сих пор, где-то валяется на диске. И я специально не стал смотреть в тот код, чтобы самому с нуля написать свой собственный чат исходя из имеющихся знаний.

И никаких баз данных мы использовать не будем! Только файлы!

Ну и чтобы не искать по всей странице, а как же посмотреть в реале на этот чат, о котром идет речь на странице!? Жмем сюда!

Скачать чат

Первый вариант немного трансформировали, из-за причин.

Скачать исходники :

Скачать по ссылке Скрипт № 3.1.

Логика и описание чата

Когда вы подходите к рубежу наличия определенных знаний. То вы начинаете думать совершенно по-другому! Когда я видел, что, кто-то рассказывает о логике скрипта, то мне казалось, как это вообще возможно, если ты не знаешь, что будет дальше. И это все от того, что человек просто не видит всю картину.

1. У нас должен быть файл, на котором будет форма отправки и на этой же странице мы должны выводить результаты нашей отправки. Естественно, что без перезагрузки.
2. Отдельный файл – скрипт, который будет отправлять в исполнительный файл данные.
3. Исполнительный файл, будет записывать данные.

Можно конечно первые два объединить, но хочу, чтобы было все красиво!

Начнем:

Нам понадобится "div" в который будем складывать ниши отправленные сообщения в чат.

<div id="content"></div>

Далее скрипт, который будет обновлять с помощью метода "setInterval" полученные данные с файла, в котрый и будут записаны наши данные - через 0.1 секунды = 100.

Естественно, что ранее мы подключили библиотеку jQuery
<script>

setInterval(function(){

        $("#content").load('http://dwweb.ru/__a-data/_primer/js/chat/filename.txt' );

    } ,100);

</script>

Будем отправлять результат срабатывания функции записи в show_rezultю

<div class="show_rezult"></div>

И далее нам нужна форма:

У нас форма не будет иметь action и др. "атрибуты post php" - она у нас будет иметь единственное -идентификатор.
И на последний input повесим onClick и присвоим ей функцию "send".
<form id="first">

     <input type="text" size="30" name="name"><br>

     <input type="text" size="30" name="mess"><br>

     <input type="button" value="Отправить" onClick="send()">

</form>
И последним присоединем наш скрипт , который и будет обрабатывать весть наш чат!
<script src="send.js"></script> 

Итого у нас получилось:

1.

Главный файл простого чата

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Chat</title>        

<script type="text/javascript" src="http://dwweb.ru/__DATA/js/jquery.min.js"></script>

</head>

<body>

<div id="content"></div>

<script>

setInterval(function(){

        $("#content").load('http://dwweb.ru/__a-data/_primer/js/chat/filename.txt' );

    } ,100);

</script>

<div class="show_rezult"></div>

<form id="first">

     <input type="text" size="30" name="name"><br>

     <input type="text" size="30" name="mess"><br>

     <input type="button" value="Отправить" onClick="send()">

</form>

<script src="send.js"></script> 

</body>

</html>

Скрипт, который будет обрабатывать наш чат:

Здесь все просто!

При нажатии на кнопку input type=button будет срабатывать функция send(см.выше)

name и mess получаем, что у нас будет введено в одноименные поля формы(name="name", name="mess").

отправим с помощью "$.post" в наш исполнительный файл submit.php - наши данные.

"function( data )" - можно использовать, а можно убрать... - она будет выводить результат записи... в "show_rezult" в главный файл.

2.
function send() {  

  name =  document.forms["first"].elements["name"].value ;    

  mess =  document.forms["first"].elements["mess"].value ;  

  $.post( "http://dwweb.ru/__a-data/_primer/js/chat/submit.php",  { name,mess,}, 

   function( data ) { $( ".show_rezult" ).html(data); }

  );

  return false;

}

Файл записи результатов чата

Создадим переменные ($name, $mess), которые получат те данные, что bs только что отправили в выше идущем скрипте!

Здесь нужно уточнить! Если вы собираетесь получать данные с помощью "$_POST", то их нужно обрабатывать либо strip_tags либо htmlspecialchars

Содеем их в одно целое в переменной $data - все кроме переменных вы сможете отредактировать и изменить - это всего лишь пример...

Проверим если не пустые наши переменные,

if (!empty($name) AND !empty($mess))

то будем в перменную получать, что у нас уже есть в файле сохранения наших данных и в начале присоединив полученные данные из формы($data.)

Это делается для того, чтобы поставить полученные данные сверху страницы.

$data = $data.(@file_get_contents('filename.txt'));

И далее запишем наши данные в файл - закрыв(LOCK_EX) на момент записи его.

$write = @file_put_contents('filename.txt', $data ,  LOCK_EX);

Итого:

3.
<?

$name = $_POST['name'];

$mess = $_POST['mess'];

$data = '<div class=main><div class=mess>'.$mess.'</div><div class=name>'.$name."</div></div>\n";

if (!empty($name) AND !empty($mess))

{

$data = $data.(@file_get_contents('filename.txt'));    

$write = @file_put_contents('filename.txt', $data ,  LOCK_EX);

if($write){ echo '<b class=time>Записано'; } else{ echo 'Данные не записаны'; }

}

?>

P.S.

Возможно внесение дополнительных изменений!

И не описаны простые проверки - в файле submit.php - думаю, что сами сумеете разобраться!

Возникшие проблемы...

Пожа ты не испытал код, но вроде бы, тебе кажется, что он так и должен работать! И обнаруживается, что нет! И ты не можешь понять в чем проблема!

И поскольку мы только делаем первые шаги в javascript и jQuery, то все довольно туманно, не с точки зрения теории, а с точки зрения практики!

О чем я неоднократно говорю на своих страницах данного сайта! Что теория – это супер! Но бывает, что тория не работает так, как она должна работать, или/и/либо не работает так, как у тебя, все сложилось в голове…

И...

С какими проблемами мы столкнулись в первом варианте!7

1. Периодически вывод информации на странице конкретно задерживался, хотя это должно происходить практически мгновенно! А иногда тупо повисал без видимых дальнейших телодвижений!

Поскольку я еще в процессе поиска причин, то вот, что я предполагаю…, что возможно, что на страницы действует кэш браузера, и он не дает ему обновляться. Сейчас не буду в это углубляться!

Поэтому и в файле «index.php» - добавил несколько строк о том, чтобы запретить кеширование данной страницы.

2. Плюс – для файла «filename.txt» - заметно уменьшение скорости выдачи в чате! Это немного субъективно, но мне так показалось, поэтому расширение поменяли на «html» - filename.html.
3. Добавили файл .htaccess с записями с запретом кеширования всех файлов в данной папке.
4. Изменили в файле «index.php»
<script>     

    function show() {

        // выводим сообщения в блок #messages

        $.ajax({

            url: 'filename.html',

            timeout: 10000, // время ожидания загрузки сообщений 10 секунд (или 10000 миллисекунд)

            success: function(data) {

                $('#content').html(data);

            },

            error: function() {

                $('#content').html("Не удалось загрузить сообщения");

            }

        });

    }    

    var interval = 1000; // количество миллисекунд для авто-обновления сообщений (1 секунда = 1000 миллисекунд)

    show();

    setInterval('show()', interval);

</script>
Смотрим второй вариант

Посмотреть пример и скачать можно по ниже идущей ссылке

Скрипт № 3.1
Название скрипта и номер :Чат на файлах
Пример - Чат на файлах
Скачать - архив
Все скрипты на одной странице