<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру 2.0

PHP и MySQL с Нуля до Гуру 2.0

Данный курс научит Вас программировать на самом популярном Web-языке в мире - PHP. Курс состоит из 11 разделов, в которых с нуля рассказывается и показывается процесс написания различных скриптов на PHP.

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

Почти к каждому уроку идут упражнения.

Просмотрев данный курс, Вы сможете создавать абсолютно любые PHP-сайты любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как сделать чат

Как сделать чат

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

Ключевая особенность чата в том, что его содержимое обновляется автоматически. Отсюда и возникают все трудности.

Для начала разберём с Вами структуру таблицы в базе данных. Вот те поля, которые обязательно потребуются:

  • id - уникальный идентификатор.
  • name - имя, оставившего сообщение. Здесь также может быть, например, user_id, означающий id пользователя из другой таблицы.
  • message - сам текст сообщения.
  • date - дата отправления сообщения.

Безусловно, это только пример. Вы можете добавлять ещё массу других полей, тем самым, расширяя возможности Вашего чата.

Теперь необходимо вывести HTML-код:

<div id="chat">
  <table>
    <tr>
      <td>Имя</td>
      <td>Сообщение</td>
      <td>Дата</td>
    </tr>
    <tr>
      <td>Имя</td>
      <td>Сообщение</td>
      <td>Дата</td>
    </tr>
  </table>
</div>
<p>
  <input type="text" name="message" id="message" />
  <input type="button" value="Отправить" onclick="send()" />
</p>

В данном коде опять же всё как пример. Можно всё смело менять, но принцип должен быть тем же: есть место, где выводятся сообщения, причём они выводятся в одинаковом виде. Вместе с полем, где выводятся сообщения, есть текстовое поле и кнопка "Отправить".

Обязательно для блока chat поставьте фиксированную высоту, чтобы при добавлении новых сообщений, у Вас этот блок не вырастал, также поставьте полосу прокрутки у него, чтобы можно было просмотреть все сообщения. Всё это делается с помощью CSS.

Теперь займёмся JavaScript:

<script type="text/javascript">
  function send() {
    var message = document.getElementById("message").value;
    var name = "Гость";
    /* Здесь блок отправки POST-запроса с данными (например, через Ajax) */
  }
  function update() {
    /* Здесь отправка запроса на получение всех сообщений (например, через Ajax) */
    /* Здесь вывод сообщений в определённом формате прямо в HTML-код с использованием DOM, либо JQuery. */
  }
  setInterval("update()", 1000); // Обновление окна чата каждую секунду
</script>

И, наконец, PHP-код (добавление новых сообщений):

<?php
  /* Получаем данные, полученные из JavaScript */
  $message = $_POST["message"];
  $name = $_POST["name"];
  $date = date(); // Узнаём текущее время и дату
  /* Здесь добавляем в таблицу новую запись */
?>

И последний файл, которые потребуется - это получение всех сообщений из таблицы:

<?php
  /* Вытаскиваем все записи из таблицы */
  /* Получаем двумерный массив из полученных данных */
  /* Преобразуем массив в json-формат и возвращаем его в javascript, где он уже будет выводиться */
?>

Всё, круг замкнулся, и чат заработал. Как видите, сделать чат достаточно сложно и нужно обладать большим багажом знаний. Но я надеюсь, что данная статья здорово облегчит Вам эту задачу. Абсолютно любой чат, какой бы он сложный ни был, основан на принципах, описанных в данной статье, поэтому смело можете его использовать как каркас.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (23):

Arthur Arthur 16.04.2012 15:02:51

Спасибо за статью, Михаил! Но ведь можно сделать и без применения js?

Ответить

Admin Admin 16.04.2012 15:04:43

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

Ответить

Inferno Inferno 18.04.2012 15:42:13

Spasiba za statiu Mixail..Vapros: Shtob Sozdat Chatik na znat PHP ? i JavScript? obizatelna ? a mojna li vot suda postavit http://remzi.mail2k.ru/ ? Zarane spasiba ..

Ответить

Admin Admin 18.04.2012 18:40:22

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

Ответить

wanderer wanderer 16.08.2012 14:38:09

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

Ответить

Admin Admin 16.08.2012 19:01:05

Отправлять вместе с запросом id последнего сообщения, например. Если новое появилось, то возвращать результат.

Ответить

wanderer wanderer 16.08.2012 22:03:49

А лучше ли будет передавать хэш id ? или лучше будет сделать специально отдельно колонку в таблице, с рандомным значением (и сделать и его хэш)чтоб исключить подстановку?!

Ответить

Admin Admin 17.08.2012 11:27:36

Если беспокоитесь о безопасности, то можете и так сделать. Как альтернатива, можете передавать не id, а время последнего обновления. Тогда выводить только сообщения, отправленные позже этого времени.

Ответить

malina95 malina95 16.01.2013 18:45:04

Можно сделать асинхронную подгрузку сообщений если не беспокоетесь о нагрузке

Ответить

aidarbek aidarbek 21.08.2012 19:56:08

Я сделал чат по такому же принципу, только я не знал как обновлять и узнал здесь. Спасибо.

Ответить

Alexei Alexei 02.04.2013 21:05:43

Михаил, а как сделать так, чтобы при обновлении страницы все сообщения из окна чата исчезали? Т.е. каждый новый пользователь не видел сообщений старых. И если это вообще возможно, то где хранить сообщения в БД или в файлах… Спасибо

Ответить

Admin Admin 02.04.2013 21:08:04

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

Ответить

q3ta q3ta 04.06.2013 22:57:22

у меня вопрос) я не разбирал код честно говоря, просмотрел поверхностно) но как быть в случае когда нужно показывать 100 сообщений, тогда контент страницы требует прокрутку) и вид вовсе не компактный, как решить эту проблему? просто не хочу курить форумы))

Ответить

Admin Admin 05.06.2013 04:19:15

Через CSS у блока можно поставить максимальную высоту и прокрутку.

Ответить

q3ta q3ta 05.06.2013 17:23:20

спасибо) просто не сталкивался с прокруткой) обязательно попробую)

Ответить

AntDant AntDant 16.06.2013 06:01:03

Михаил, вы пишите статьи для людей или для поисковиков?

Ответить

Admin Admin 16.06.2013 11:13:27

В первую очередь, для людей. Для поисковиков только <b> ставлю.

Ответить

tan tan 09.01.2014 14:21:52

Михаил, спасибо за статью. Вопрос: мне нужно установить, уже готовый чат Mibew Messenger.Все понятно, но там нужно создать БД MySQL и БД пользователя, где это создавать и как? управление сайта через самописную cms. В примере БД создаются в phpMyAdmin.

Ответить

tikkiwiki tikkiwiki 09.01.2014 15:24:48

Для создания пользователя и БД используйте все тот же phpMyAdmin

Ответить

tan tan 09.01.2014 16:59:27

Спасибо.

Ответить

Great Great 07.06.2015 15:36:50

Как можно реализовать без постоянного автообновления?

Ответить

sanda sanda 18.11.2015 17:46:46

А можно ли сделать без AJAX, DOM, JQuery и т.д. и т.п.?

Ответить

Mirkom64 Mirkom64 17.03.2017 15:32:01

Фигня статья. Лучше бы подетальней описание код и работу. А от этого куска теории толку никакого. Равноценно, что написать "Просто делайте ajax-запросы каждую секунду и выводите новые сообщения"

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.