Цвет

Чат на AJAX (JavaScript + PHP)

129₽ 169₽

Категории:

ajaxjsjavascriptphp

В этом скрипте мы научимся создавать чат на AJAX (JavaScript), отправляя запросы POST и GET.

Для начала, нам понадобиться программа XAMPP. После установки, запустите её от имени администратора. И запустите Apache (1 сервис). Это программа послужит нам локальным сервером для нашего файла PHP. MySQL запускать не нужно. База данных нам не понадобится.

Теперь создадим все необходимые файлы.

Для начала зайдите в папку

xampp\htdocs\

В этой папке вы создадите папку с названием вашего "сайта"

Можно просто

ajax

Теперь внутри

xampp\htdocs\ajax\

мы создадим 3 необходимых файла:

ajax_chat.json
handle.php
index.php

ajax_chat.json - этот файл послужит нам массивом (списком) наших сообщений

handle.php - этот файл послужит нам массивом (списком) наших сообщений

index.php - этот файл послужит нам массивом (списком) наших сообщений

Для начала откройте ajax_chat.json

Впишите сюда только 2 квадратные скобки, так:

[]

Так мы используем этот файл, как список сообщений.

Далее откройте ранее созданный файл handle.php. Здесь впишите следующий код.

<?php
$strInput = file_get_contents("php://input");

$myfile = fopen("ajax_chat.json", "w");
$data = json_encode(json_decode($strInput), JSON_PRETTY_PRINT);
fwrite($myfile, $data);
fclose($myfile);

Здесь мы принимаем входящие данные отправленного нам POST запроса с помощью

file_get_contents("php://input")

Теперь мы открываем для записи ("w") (write) наш файл функцией fopen , так мы открыли stream, то есть поток $myfile.

Вы заметили, что мы сначала декодируем, а потом снова кодируем $strInput (полученные данные) в JSON формат. Зачем? Когда мы кодируем его повторно, мы добавляем 2 аргумент JSON_PRETTY_PRINT чтобы был перенос строк и отступы в файле ajax_chat.json

Затем мы просто записываем эти данные в файл и закрываем Stream

fwrite($myfile, $data);
fclose($myfile)

Осталось заняться главным файлом, index.php.

Здесь мы создаем базовый каркас

<html>
   <head>
   </head>
   <body>
   </body>
</html>

В теле body создаём нашу форму с кнопкой и полем ввода.

<div id="main" style="display: flex;justify-content: center;">
   <div id="demo">
     <h2>Ajax чат</h2>
     <input id="new_msg" type="text" placeholder="Новое сообщение">
     <button id="btn" onclick="sendDoc()">Отправить</button>
   </div>
</div>

Далее создаём список наших сообщений. Сюда будут добавляться сообщения

<ul id="msgs" style="text-align: center; list-style:none;">
</ul>

Осталось только написать скрипт обработки. Пишем тег:

<script>
</script>

Сначала перечислим переменные:

let reading = true; const msgs = document.getElementById("msgs"); let myList = [];

reading - отвечает за то, какой запрос был дан, GET - true, POST - false

msgs - это элемент список

myList - это список, в который будет записан ответ из файла JSON

Фокусируемся на поле ввода

msgs.focus();

Теперь мы создаем объект ключевогодля нас класса XMLHttpRequest() . Именно с помощью него мы сначала опишем обработку ответа на запрос, а далее и отправим сам запрос.

Метод onreadystatechange отвечает за обработку ответа на запрос

let xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { if(reading == true){ myList = JSON.parse(this.responseText); writeList(myList); }else{ reading = true; xhttp.open("GET", "ajax_chat.json", true); xhttp.send(); } } };

А далее настроим запрос и отправим его методом .send()

xhttp.open("GET", "ajax_chat.json", true); xhttp.send();

Далее мы пишем обновление чата

С обновлением чата у каждого пользователя чат будет регулярно обновляться с помощью GET запросов в интервале.

setInterval(()=>{
   reading = true;
   xhttp.open("GET", "ajax_chat.json", true);
   xhttp.send();
   //console.log("Tick");
}, 3000);

Каждые 3 секунды (3000 миллисекунд) чат будет обновляться.

Далее пишем функцию writeList для обновления чата в теге ul. Грубо говоря, мы сотрём все написанные ранее сообщения и заполним сообщениями из списка, переданного в качестве аргумента.

function writeList(someList){
   while(msgs.firstChild) {msgs.removeChild(msgs.firstChild)};
   for(let i=0; i < someList.length; i++){
     let li = document.createElement("li");
     li.appendChild(document.createTextNode(someList[i]));
     msgs.appendChild(li);
   }
}

Осталось написать функцию sendDoc(), где мы будем отправлять данные в handle.php. Далее мы разберём подробнее эту функцию.

function sendDoc(){
   reading = false;
   let current_list = myList;
   let current_text = document.getElementById("new_msg").value;
   if(current_text != ""){
     console.log(current_text);
     current_list.push(current_text);
     let someStr = JSON.stringify(current_list);
     console.log(someStr);
     xhttp.open("POST", "handle.php", true);
     xhttp.send(someStr);
     document.getElementById("new_msg").focus();
     document.getElementById("new_msg").value = "";
   }
}

Для начала ставим reading=false так мы отправляем POST, а не GET запрос. Далее записываем в current_list актуальный список. В current_text - запишем содержимое поля ввода.

Если поле не пустое, то мы добавим в наш список новое значение, а так же переведём его строку JSON

current_list.push(current_text);
let someStr = JSON.stringify(current_list);

Задаём запрос и отправляем его

xhttp.open("POST", "handle.php", true);
xhttp.send(someStr);

Фокусируемся на поле ввода и очищаем его.

document.getElementById("new_msg").focus();
document.getElementById("new_msg").value = "";

Отлично, теперь всё готово, но я добавлю код, чтобы по нажатию Enter работала функция отправки POST запроса.

document.body.addEventListener("keypress", function(e){
   if(e.key == "Enter"){
     sendDoc();
   }
});

Теперь всё готово. Если у вас всё ещё включен XAMPP Apache сервис, то достаточно зайти по адресу

localhost/ajax

в браузере.