В этом скрипте мы научимся создавать чат на AJAX (JavaScript), отправляя запросы POST и GET.
Для начала, нам понадобиться программа XAMPP. После установки, запустите её от имени администратора. И запустите Apache (1 сервис). Это программа послужит нам локальным сервером для нашего файла PHP. MySQL запускать не нужно. База данных нам не понадобится.
Теперь создадим все необходимые файлы.
Для начала зайдите в папку
В этой папке вы создадите папку с названием вашего "сайта"
Можно просто
Теперь внутри
мы создадим 3 необходимых файла:
ajax_chat.json - этот файл послужит нам массивом (списком) наших сообщений
handle.php - этот файл послужит нам массивом (списком) наших сообщений
index.php - этот файл послужит нам массивом (списком) наших сообщений
Для начала откройте ajax_chat.json
Впишите сюда только 2 квадратные скобки, так:
Так мы используем этот файл, как список сообщений.
Далее откройте ранее созданный файл handle.php. Здесь впишите следующий код.
Здесь мы принимаем входящие данные отправленного нам POST запроса с помощью
Теперь мы открываем для записи ("w") (write) наш файл функцией fopen , так мы открыли stream, то есть поток $myfile.
Вы заметили, что мы сначала декодируем, а потом снова кодируем $strInput (полученные данные) в JSON формат. Зачем? Когда мы кодируем его повторно, мы добавляем 2 аргумент JSON_PRETTY_PRINT чтобы был перенос строк и отступы в файле ajax_chat.json
Затем мы просто записываем эти данные в файл и закрываем Stream
Осталось заняться главным файлом, index.php.
Здесь мы создаем базовый каркас
В теле body создаём нашу форму с кнопкой и полем ввода.
Далее создаём список наших сообщений. Сюда будут добавляться сообщения
Осталось только написать скрипт обработки. Пишем тег:
Сначала перечислим переменные:
reading - отвечает за то, какой запрос был дан, GET - true, POST - false
msgs - это элемент список
myList - это список, в который будет записан ответ из файла JSON
Фокусируемся на поле ввода
Теперь мы создаем объект ключевогодля нас класса XMLHttpRequest() . Именно с помощью него мы сначала опишем обработку ответа на запрос, а далее и отправим сам запрос.
Метод onreadystatechange отвечает за обработку ответа на запрос
А далее настроим запрос и отправим его методом .send()
Далее мы пишем обновление чата
С обновлением чата у каждого пользователя чат будет регулярно обновляться с помощью GET запросов в интервале.
Каждые 3 секунды (3000 миллисекунд) чат будет обновляться.
Далее пишем функцию writeList для обновления чата в теге ul. Грубо говоря, мы сотрём все написанные ранее сообщения и заполним сообщениями из списка, переданного в качестве аргумента.
Осталось написать функцию sendDoc(), где мы будем отправлять данные в handle.php. Далее мы разберём подробнее эту функцию.
Для начала ставим reading=false так мы отправляем POST, а не GET запрос. Далее записываем в current_list актуальный список. В current_text - запишем содержимое поля ввода.
Если поле не пустое, то мы добавим в наш список новое значение, а так же переведём его строку JSON
Задаём запрос и отправляем его
Фокусируемся на поле ввода и очищаем его.
Отлично, теперь всё готово, но я добавлю код, чтобы по нажатию Enter работала функция отправки POST запроса.
Теперь всё готово. Если у вас всё ещё включен XAMPP Apache сервис, то достаточно зайти по адресу
в браузере.