Пишем свой чат


Пишем чат на РНР

Здравствуйте, уважаемые web-мастера! Я уверен, что вы хотите, чтобы ваш сайт активно посещался, чтобы посетителям был интересен материал, размещенный на вашем сайте, чтобы они возвращались вновь и вновь. Скорее всего, у вас на сайте уже работает форум и гостевая книга. Но чего-то все же не хватает… Чего? Чата! Чата, в котором можно было бы пообщаться, из-за которого посетители будут возвращаться вновь и вновь…

Что для этого нужно?

Так в чем же дело?! Давайте напишем свой собственный чат, который будет отвечать всем вашим требованиям, будет быстрым и компактным.
Теперь давайте определимся, что должен уметь наш чат.
Во-первых, он должен регистрировать новых посетителей и обеспечивать вход уже зарегистрированным.
Во-вторых, он должен уметь вставлять смайлики – эти веселые маленькие картинки, без которых сегодня не обходится большинство чатов.
В-третьих, пользователи должны иметь возможность общаться в привате, т.е. лично друг с другом, чтобы остальные посетители не видели их разговора (естественно, кроме администратора J )

Теперь определимся, какие технологии мы будем использовать при разработке чата. Писать будем на PHP, а для регистрации пользователей информацию о них будем хранить в базе данных MySQL. Сам же текст болталки (болталкой назовем информацию, которой обмениваются посетители) будет находиться в текстовом файле.

Для начала напишем простенький чат, без привата и администраторских функций, в котором посетители могут регистрироваться, общаться друг с другом, вставлять смайлики.

Выглядеть он будет примерно так.

Теперь я уточню еще несколько деталей, которые необходимо обсудить еще до написания кода.

В текстовом файле chat.txt (в нем будет храниться наша «болталка») должно находиться не более 20 последних сообщений (для уменьшения трафика и ускорения загрузки чата).

При входе в чат посетитель должен будет ввести логин (он же ник) и пароль, причем если такой логин уже хранится в нашей таблице базы данных, то скрипт должен проверить, верен ли пароль, и если верен, то перенаправить посетителя в чат, а если неверен – вернуть на главную страницу для повторного ввода логина и пароля и сообщить ему, что пароль неверен. Если же такого логина в таблице нет, то нужно зарегистрировать посетителя, т.е. добавить в таблицу данные о нем (логин и пароль). Но отдельной страницы для регистрации нового посетителя (далее будем называть посетителей «чатниками» J) делать не нужно, иначе необходимость производить какие-то дополнительные действия для входа в чат отпугнет довольно значительную часть посетителей.

Кроме того, если вы планируете создать небольшой чат, к примеру, для общения с друзьями, то было бы неплохо записывать все, что произносилось в чате, в отдельный файл (назовем его history.txt). В дальнейшем можно будет произвести некоторые действия над этим файлом (к примеру, каждый день в 12.00 отсылать содержимое этого файла вам на e-mail, а после этого очищать его). Но это будем делать после того, как наш чат уже будет работать.

Какие файлы нужны для создания чата?

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

index.php – главная страница чата. Выводит на экран форму для ввода логина и пароля, а также информацию, скоько сейчас человек в чате (и возможно, последние 20 реплик)

chat.php – ну, а это наш самый главный и важный файл. Что он только не делает: проверяет посетителей на верность пары логин-пароль, регистрирует посетителе, а кроме того, подключает к себе довольно большое количество описанных ниже РНР-файлов.

chat.inc.php – это РНР-файл содержит в себе HTML-документ с фреймами, без которых не обходится не один уважающий себя чат, а также небольшой кусок РНР-кода.

send.php – этот файл выводит на экран форму с текстовыми полями для ввода реплик, вставки смайликов и прочих полезных вещей, а также поле для выбора собеседника (либо для обения в «болталке», либо для общения в «привате»).

smiles.php – тут и так все понятно. Этот файл будет в цикле выводить смайлики на экран и генерировать JavaScript-код для вставки кода смайлика в строку реплики чатника.

add.php – этот файл будет оформлять реплики чатников и вставлять их в файл chat.txt.

del.php – при выходе чатника из чата удаляет чатника из списка активных (т.е. в данный момент обсуждающих свои важные проблемы и находящихся в чате).

includer.php – содержит в себе 3 переменных: $myserver, $mylogin, $mypassword. Переменная $myserver указывает сервер, на котором находится БД (обычно это — localhost), $mylogin и $mypassword – логин и пароль для подключения к БД.

text.php – РНР-файл, отвечающий за обновление информации в «болталке».

users.php – РНР-файл, который выводит на экран список находящихся в данный момент в чате посетителей, а также генерирует JavaScript-код для вставки ника выбранного чатника в окошко ввода реплики.

logo.html – файл, выводящий логотип чата на экран.

chat.txt – а это «болталка» чата, в ней хранятся последние 20 реплик.

history.txt – его назначение уже было описано выше.

chat_users.sql – SQL-файл, содержащий структуру таблицы chat_users

logo_chat.jpg – логотип чата.

style.css – таблица стилей, используемая в чате.

1…7.gif – 7 рисунков-смайликов, используемых в чате.

А теперь нужно упомянуть один момент, без объяснения которого никак нельзя обойтись.

Как обычно люди уходят из чата? Правильно, редко кто нажимает на кнопку выход, обычно просто закрывают окно с чатом. Нам нужно отслеживать эти моменты, чтобы вовремя убрать ушедших чатников из списка находящихся в чате. А, допустим, у человека что-то случилось и он обновляет страницу. Вплне реальная ситуация. Так вот, в обоих этих случаях происходит событие Unload. Его можно отследить при помощи JavaScript-обработчика onUnload. Это событие происходит в текущем окне непосредственно перед выгрузкой документа. Так вот, при каждом из вышеупомянутых действий посетителя надо должным образом отреагировать: если чатник выходит из чата, то удаляем его из списка активных посетителей, а если просто обновляет — то ничего не делаем. Но у нас же на разные действия реагирует один и тот же обработчик! Как же решить эту проблему? Об этом я подробнее расскажу при описании работы файлов chat.inc.php, send.php и del.php.
Если Вы хотите посмотреть, как работает описанный в статье чат, можете зайти на https://chat.micro.org.ua и убедиться, что все описанное в этой статье работает J.

Ну, а теперь, когда вроде бы все вопросы выяснены, можно приступать к непосредственному набору кода. начала я буду писать полный код файла, а потом буду подробно описывать, что он делает. А перед набором кода создайте пустые файлы chat.txt и history.txt.
Кроме того, в тот же каталог, в котором у вас находится чат, положите 7 gif-файлов – это наши смайлики. Я думаю, что вы сможете найти 7 смайликов в Интернете J, но все же если у вас нет смайликов, можете взять их с https://chat.micro.org.ua.
Теперь создайте таблицу стилей style.css, она понадобится нам в дальнейшем для оформления чата, хотя если вы не хотите использовать CSS, можете не создавать ее. Если вы все же решили использовать CSS, создайте два класса: normal и title, они нам еще пригодятся J.
Теперь нам нужен логотип чата. У меня логотипом является слово «MICRO»,написанное на синем фоне золотыми буквами высотой 55 и шириной 195 пикселей. Этот момент оставляю на Ваше усмотрение.
Ну, а теперь – открывайте свой любимый РНР-редактор (надеюсь, что это не блокнот J) и начинайте… Я начну со второстепенных по своей важности файлов. Чтобы потом не отвлекаться на их описание во время объяснения работы основных файлов.

Для начала нужно создать таблицу «chat_users» в базе данных. Итак, вот ее код:

CREATE TABLE chat_users (
id int(10) NOT NULL auto_increment,
login text NOT NULL,
password text NOT NULL,
privat text NOT NULL,
active tinyint(2) NOT NULL default ‘0’,
PRIMARY KEY (id)
) TYPE=MyISAM;

Мы создали таблицу, в которой находится пять столбцов:
1. id – идентификатор чатника.
2. login – логин (ник) чатника
3. password – пароль чатника
4. privat – это задел на будущее, когда мы будем работать над «пиватом»
5. active – тут будет храниться лишь одна цифра: 1 – если чатник в данный момент находится в чате, и 0, если чатник в данный момент не в чате.
Тут нет ничего сложного.

Это – ваши данные для подключения к базе данных.

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

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

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

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

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

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

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

Имя Сообщение Дата
Имя Сообщение Дата

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

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

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

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

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


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

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

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

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

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

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

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

Она выглядит вот так:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Узнайте, как создать чат с помощью CSS.

    Chat Messages

    Hello. How are you today?

    Hey! I’m fine. Thanks for asking!

    Sweet! So, what do you wanna do today?

    Nah, I dunno. Play soccer.. or learn more coding perhaps?

    Создание чата

    Шаг 1) добавить HTML:

    Пример

    Hello. How are you today?

    Hey! I’m fine. Thanks for asking!

    Sweet! So, what do you wanna do today?

    Nah, I dunno. Play soccer.. or learn more coding perhaps?

    Шаг 2) добавить CSS:

    Пример

    /* Chat containers */
    .container <
    border: 2px solid #dedede;
    background-color: #f1f1f1;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
    >

    /* Darker chat container */
    .darker <
    border-color: #ccc;
    background-color: #ddd;
    >

    /* Clear floats */
    .container::after <
    content: «»;
    clear: both;
    display: table;
    >


    /* Style images */
    .container img <
    float: left;
    max-width: 60px;
    width: 100%;
    margin-right: 20px;
    border-radius: 50%;
    >

    /* Style the right image */
    .container img.right <
    float: right;
    margin-left: 20px;
    margin-right:0;
    >

    /* Style time text */
    .time-right <
    float: right;
    color: #aaa;
    >

    /* Style time text */
    .time-left <
    float: left;
    color: #999;
    >

    Создание чата на основе jQuery/PHP

    План

    В сегодняшнем уроке мы рассмотрим создание небольшой чатовой программы, которая очень проста в написании и поддерживается на всех серверах, работающих с PHP. Никакой базы данных не требуется – вся программа чата будет храниться в простом текстовом файле. Программа создается с применением следующих технологий:

    • PHP – для хранения серверной информации
    — Написание новых сообщений в текстовом файле
    — Чтение новых сообщений из текстового файла
    — Обновление сведений о файле
    — Обеспечение безопасности

    • jQuery/JavaScript – управление клиентской информацией. Это приложение AJAX-y, которое обеспечивает появление сообщений на экране (как на вашем, так и у других пользователей) без необходимости обновления страницы.
    — Периодический запрос сервера насчет новых сообщений
    — Доставление в чат новых сообщений
    — Прокрутка окна таким образом, чтобы отображались только самые последние сообщение
    — Запрос и установка имени пользователя
    — Ограничение длины сообщения во избежание громоздких посланий в чате
    — Обеспечение безопасности

    • Text File () – хранение программы чата

    СВЕРХ запланированного

    В этом уроке вы узнаете о некоторых интересных методиках и технологиях, в результате чего у вас получится настоящий чат. Конечно, его нельзя будет назвать самым продвинутым чатом в мире. Вы не сможете выгонять пользователей из чата или банить их. Пользователи не смогут менять свой ник. Вам не будет доступен список всех, кто в данный момент находится в чате. Другими словами, это не IRC – просто забавная демонстрационная программка, которая, тем не менее, исправно работает. Если вы хотите узнать, как ее сделать (а затем вы сможете модернизировать программу по своему усмотрению), тогда вперед!

    Базовая HTML-структура

    То, с чем вы только что ознакомились, даже наполовину не является основным функционалом программы. Функция page-wrap применяется для центрирования. Функции double-div, chat-wrap и chat-area отвечают за совершенно необязательную, но при этом весьма эффектную двойную рамку окна чата.

    Самое важное здесь – это функция textarea, которой присваивается значение sendie, а также дивергенция окна чата, с которым будет работать JavaScript.

    Использование методики JavaScript в программе

    Итак, воспользуемся возможностями JavaScript – создадим функцию “Chat”, которая будет отвечать за все остальные функции, так или иначе связанные с работой чата.

    Функция updateChat посылает на сервер запрос о наличии новых строчек в текстовом файле. Если они есть, то функция помечает их как JSON и добавляет в чат. Функция sendChat активируется, когда сообщение уже написано в поле ввода и нажата кнопка «Enter» — она передает введенную информацию на сервер. Функция getStateOfChat запрашивает сервер о количестве строчек в текущем текстовом файле, чтобы выяснить, есть новые строки или нет. Эта информация также заносится в JSON, а вот так выглядят все эти функции:

    Все эти функции пользуются технологиями jQuery’s AJAX, а также используют в процессе коммуникации файл process.php, который нам, сами понимаете, придется создать.

    Использование технологий PHP в программе

    Часть информации, которая передается с помощью запросов AJAX, является (произвольной) величиной, которая носит название “function”. Это нужно для того, чтобы уведомить файл PHP о том, какие действия следует выполнить. Таким образом, прежде всего нам нужно связать эту величину и с переключением функций. Также мы создаем пустой массив, в котором будут храниться переменные, которые затем будут записаны как JSON и переданы обратно.

    Когда мы обращаемся к функции getState, считывается текстовый файл, в том числе и количество строк в нем. Когда мы запускаем функцию update, файл опять же считывается, но теперь в него добавляются новые строки. Функция send обрабатывает сообщение и затем вписывает его в текстовый файл новой строчкой.

    Приступим к организации отправки

    А теперь – еще немного техники JavaScript для того, чтобы все заработало. Загружаем jQuery, берем “engine”, а затем добавляем несколько функций, которые обеспечат пользователям возможность выбрать себе ник для входа в чат.

    Когда с этим закончено, займемся ограничением количества символов в сообщении и обеспечением отправки сообщения нажатием клавиши Enter.

    Периодическая проверка наличия новых сообщений

    Необходимо использование функции «обновить» для того, чтобы следить за появлением новых сообщений и при наличии добавлять их в файл. Функцию «обновление» следует применять на регулярной основе, так что воспользуемся функцией JavaScript setInterval()

    Необходимые дополнения

    Примечание: Не забывайте, что программа основана на технологиях PHP, так что если вы не используете локальный PHP-сервер, простой загрузки файлов и их открытия будет недостаточно для того, чтобы запустить демо-версию. Также не забудьте сменить разрешение файла chat.txt для возможности записи его на сервер, когда вы займетесь собственной тестовой загрузкой.

    Данный урок подготовлен для вас командой сайта ruseller.com
    Источник урока: www.css-tricks.com
    Перевел: Максим Шкурупий
    Урок создан: 16 Ноября 2009
    Просмотров: 61629
    Правила перепечатки

    5 последних уроков рубрики «Разное»

    Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

    Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

    Разработка веб-сайтов с помощью онлайн платформы Wrike

    Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

    20 ресурсов для прототипирования

    Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

    Топ 10 бесплатных хостингов

    Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

    Быстрая заметка: массовый UPDATE в MySQL

    Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

    Делаем своего первого чат-бота

    Уровень: начинающий

    Мате­ри­ал рас­счи­тан на тех, кто в жиз­ни не напи­сал ни строч­ки кода. Если вы уже в кур­се основ про­грам­ми­ро­ва­ния, про­чи­тай­те луч­ше о чистых функ­ци­ях.

    Мно­гие слы­ша­ли про чат-ботов и робо­тов для обще­ния: им пишешь, они отве­ча­ют, полу­ча­ет­ся диа­лог с маши­ной. Чат-бот может рас­ска­зать анек­дот, поис­кать за вас в интер­не­те, забро­ни­ро­вать сто­лик в ресто­ране и что угод­но ещё, чему его обу­чат созда­те­ли.

    Ино­гда такое обще­ние выгля­дит как обще­ние с чело­ве­ком. Может даже пока­зать­ся, что там рабо­та­ет искус­ствен­ный интел­лект — и ино­гда так дей­стви­тель­но быва­ет. Но часто всё про­ще: это алго­ритм, кото­рый уме­ет рас­по­зна­вать неко­то­рые ваши сло­ва и давать отве­ты по зара­нее заго­тов­лен­ным шаб­ло­нам. Чем алго­ритм более раз­ветв­лён­ный, тем есте­ствен­нее и полез­нее бот.

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

    Обыч­но, что­бы создать какую-то про­грам­му, нуж­но выпол­нить несколь­ко дей­ствий: напри­мер, ска­чать программу-обработчик язы­ка, заве­сти про­ект, напи­сать заду­ман­ную про­грам­му, ском­пи­ли­ро­вать. И толь­ко потом ей мож­но поль­зо­вать­ся. Но мы пой­дём по более про­сто­му пути: напи­шем про­грам­му, рабо­та­ю­щую пря­мо в бра­у­зе­ре, через кото­рый вы чита­е­те эту ста­тью. Сде­лать это мож­но лишь на ком­пью­те­ре, на теле­фоне при­дёт­ся поль­зо­вать­ся ботом.

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

    Что­бы сде­лать что-то на JavaScript, нуж­но открыть кон­соль. Почти во всех совре­мен­ных бра­у­зе­рах это дела­ет­ся соче­та­ни­ем кла­виш Shift + Ctrl + J или Cmd + Alt + J. Спра­ва или сни­зу появит­ся допол­ни­тель­ное окно, в кото­ром уже будет что-то про­ис­хо­дить:

    Если у вас не откры­лась кон­соль, зай­ди­те в верх­нее меню и поищи­те сло­во «Кон­соль». Обыч­но этот пункт пря­чет­ся в раз­де­ле «Инстру­мен­ты раз­ра­бот­чи­ка».


    Когда вы откры­ва­е­те кон­соль, она сра­зу гото­ва выпол­нять ваши коман­ды. Если в неё вста­вить про­грам­му, напи­сан­ную на JavaScript, и нажать Enter, ваш бра­у­зер её реа­ли­зу­ет. Если в коде есть ошиб­ки, кон­соль сама под­све­тит их. Мож­но отправ­лять в неё про­грам­му кус­ка­ми или даже построч­но: бра­у­зер будет пом­нить всё, что про­ис­хо­ди­ло в вашей про­грам­ме, пока вы не пере­за­гру­зи­те стра­ни­цу.

    Первая строка

    В кон­со­ли мож­но не толь­ко писать код, но и выво­дить туда резуль­та­ты. Давай­те для нача­ла сде­ла­ем самую про­стую про­грам­му, кото­рая отоб­ра­зит в кон­со­ли сло­во «При­вет!». Для это­го исполь­зу­ем коман­ду console.log(‘Привет!’);

    Вста­вим её в кон­соль и нажмём Enter:

    Поздрав­ля­ем, вы толь­ко что напи­са­ли свою первую про­грам­му для ком­пью­те­ра! Она очень про­стая: ком­пью­тер все­го лишь гово­рит «При­вет!». Но оце­ни­те момент: это вы его научи­ли так гово­рить. Попро­буй­те научить его и дру­гим сло­вам.

    Если напи­сать несколь­ко команд, полу­чим сооб­ще­ние из несколь­ких строк:

    Вот мы и нача­ли созда­вать сво­е­го чат-бота, кото­рый нас уже попри­вет­ство­вал в кон­со­ли. Теперь сде­ла­ем так, что­бы мы тоже мог­ли ему что-нибудь отве­тить. Для это­го нам пона­до­бят­ся пере­мен­ные.

    Переменные

    Пере­мен­ная — это ячей­ка в памя­ти ком­пью­те­ра, где мож­но что-то хра­нить и менять. Дело в том, что ком­пью­те­ру для вычис­ле­ний нуж­но ска­зать: «Вот тут дан­ные у нас менять­ся не будут, а вот тут будут, выде­ли память». И систе­ма выде­лит доста­точ­но памя­ти, что­бы хра­нить всё, что будет лежать внут­ри пере­мен­ной. В послед­нюю мож­но запи­сать новое зна­че­ние, а мож­но узнать, что уже лежит внут­ри неё.

    Что­бы дать понять ком­пью­те­ру, что у нас сей­час будет пере­мен­ная, нуж­но ска­зать ему сло­во var, после кото­ро­го впи­сать назва­ние пере­мен­ной — так нам про­ще к ней обра­щать­ся. Напри­мер, сле­ду­ю­щая стро­ка создаст пере­мен­ную name и поло­жит в неё сло­во «Код»:

    Назва­ние тут может быть прак­ти­че­ски любым, глав­ное, что­бы оно начи­на­лось с бук­вы. По-русски пере­мен­ные назы­вать нель­зя, толь­ко бук­ва­ми латин­ско­го алфа­ви­та. Мож­но было бы исполь­зо­вать вари­ант imya или zovut, но про­грам­ми­сты счи­та­ют, что чем про­ще назва­ние пере­мен­ной, тем луч­ше.

    Теперь посмот­рим содер­жи­мое эле­мен­та. Сле­ду­ю­щая коман­да выве­дет то, что сей­час запи­са­но в пере­мен­ной name:

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

    Но это мы всё смот­рим во внут­рен­но­сти ком­пью­те­ра. А нам нуж­но спро­сить что-то у поль­зо­ва­те­ля. Что­бы мы мог­ли вве­сти новые дан­ные в нашу про­грам­му, исполь­зу­ем коман­ду prompt()

    Вставь­те в кон­соль коман­ду var name = prompt(‘Как вас зовут?’); и посмот­ри­те, что про­изой­дёт. Ком­пью­тер выве­дет окно и будет ждать, пока вы вне­сё­те туда своё имя. Интер­фейс выгля­дит кра­си­во: давай­те в диа­ло­ге общать­ся с ком­пью­те­ром не через кон­соль, а через такие появ­ля­ю­щи­е­ся окош­ки. Для это­го напи­шем новые коман­ды:

    Пусть ком­пью­тер про­явит веж­ли­вость и ска­жет, что ему при­ят­но с нами позна­ко­мить­ся. Что­бы он смог обра­тить­ся к нам по име­ни, исполь­зу­ем пере­мен­ную name — в ней как раз хра­нит­ся то, что мы отве­ти­ли ком­пью­те­ру:

    Что­бы выве­сти осмыс­лен­ную фра­зу, мы взя­ли нача­ло ‘При­вет, ‘, затем с помо­щью плю­си­ка соеди­ни­ли со зна­че­ни­ем пере­мен­ной name , кото­рая хра­нит наше имя, а потом ещё одним плю­си­ком доба­ви­ли к фра­зе кон­цов­ку. Что­бы ком­пью­тер знал, что мы хотим выве­сти на экран текст, а не чис­ла, исполь­зу­ют­ся кавыч­ки. Ком­пью­тер вос­при­ни­ма­ет как текст то, что внут­ри кавы­чек. И выво­дит точ­но в том виде, в кото­ром напи­са­но.

    Расчёт дня рождения

    Давай­те соеди­ним все наши коман­ды в одну про­грам­му и допи­шем несколь­ко новых фраз:

    Обра­ти­те вни­ма­ние: у нас появил­ся новый вопрос и новая пере­мен­ная hobby, в кото­рой хра­нит­ся инфор­ма­ция об увле­че­нии. А ещё — ком­мен­та­рии, кото­рых мож­но добав­лять сколь­ко угод­но. JavaScript не обра­ща­ет вни­ма­ния на то, что напи­са­но после двух косых черт:

    Теперь у вас есть всё, что нуж­но, что­бы напи­сать свою вер­сию чат-бота для обще­ния. Если про­дол­жи­те решать наши задач­ки, то смо­же­те научить ком­пью­тер по-разному реа­ги­ро­вать на ваши отве­ты и даже вести осмыс­лен­ный диа­лог.

    Что ещё посмотреть

    Вот кое-что, что может вам при­го­дить­ся при созда­нии пер­во­го чат-бота.

    performance.now() — эта коман­да воз­вра­ща­ет вре­мя в мил­ли­се­кун­дах с момен­та откры­тия теку­щей стра­ни­цы. Мож­но поде­лить на 1 000, и вы узна­е­те, сколь­ко секунд вы сиди­те на какой-то стра­ни­це. Если поде­лить на 60 000 — сколь­ко минут.

    setTimeout() — поз­во­ля­ет выпол­нить любой код через опре­де­лён­ное вре­мя. Напри­мер, вы може­те задать вопрос и предо­ста­вить ров­но мину­ту на раз­мыш­ле­ние, после чего появит­ся окно для отве­та.

    setInterval() — то же самое, что и преды­ду­щее, но выпол­не­ние кода повто­ря­ет­ся с рав­но­мер­ным интер­ва­лом, напри­мер раз в 5 минут. Если вы хоти­те научить чат-бота, что­бы он раз в час напо­ми­нал попить воды, эта коман­да — то, что нуж­но.

    Как поль­зо­вать­ся эти­ми шту­ка­ми, мы рас­ска­жем в одной из буду­щих ста­тей, но вы все­гда може­те само­сто­я­тель­но поис­кать в интер­не­те, как они рабо­та­ют. Поль­зу­ясь эти­ми тре­мя воз­мож­но­стя­ми JavaScript, полу­чит­ся создать непло­хо­го бота, кото­рый будет сле­дить за вашей про­дук­тив­но­стью и интер­ва­ла­ми рабо­ты. Под­пи­сы­вай­тесь на «Код», что­бы не про­пу­стить новые раз­бо­ры.

    Создание чата на PHP

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

    Что понадобится?

    • PHP 5.5.x
    • Composer — менеджер зависимостей.

    Кстати, если вы работаете на Windows, то вам для разработки на PHP не нужно ничего больше (никаких “денверов”). PHP имеет встроенный сервер, который отлично подходит для разработки.

    Архитектура

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

    Создадим файл app.php — это и будет нашей единой точкой входа. Если вы используете сервер Apache, то его нужно сконфигурировать так, чтобы он перенаправлял все запросы к нашему скрипту. Это можно сделать при помощи файла .htaccess :

    Как настроить другие серверы (в том числе и встроенный в PHP), можно почитать тут.

    Наш чат будет состоять из трех частей: приложения на Silex и демона на Ratchet и клиента на JavaScript.

    Приложение

    Начнем с инициализации. Выполните команду composer init в терминале. Composer задаст вам несколько вопросов, после чего сгенерирует файл composer.json , в котором и будут описываться наши зависимости. Также нам понадобятся следующие компоненты:

    Все PHP файлы демона и приложения мы будем хранить в папке src . Настроим автозагрузку по PSR-4. В файле composer.json добавьте следующее:

    и выполните composer update .

    В файле app.php подключите файл autoload.php , сгенерированный composer-ом:

    Создадим класс нашего приложения Application.php и добавим в app.php следующее:

    Создаём экземпляр нашего приложения и передаём в него массив с настройками нашего приложения (Оператор include возвращает то, что возвращает файл при помощи оператора return. Файл config.php). При помощи функции $app->get() описываем то, что вернёт приложение при обращении к адресу / . Мы вернём код клиента чата chat.phtml. Мы не будем использовать никаких шаблонизаторов. Вместо этого мы создадим следующий метод $app->render() . Файл Application.php:

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

    Аутентификация

    Для входа в чат мы не будем создавать никаких специальных форм и баз пользователей. Воспользуемся аутентификацией через Facebook. Для этого вам нужно зарегистрировать свое приложение на developers.facebook.com и получить app_id и secret .


    Подключите Facebook PHP-SDK:

    Информацию о пользователе мы будем хранить в сессии, так как эту же сессию мы будем использовать в демоне, то саму сессию будем хранить в Memcached.

    Для получения пользователя из сессии создадим следующую функцию.

    Мы будем проверять авторизацию перед каждым запросом от браузера к нашему приложению

    Теперь при обращении к любому пути $app->get(‘/’, . ) будет проверена авторизация.

    Демон

    Создадим файл server.php и инициализируем в нём Event Loop:

    Также нам нужен Http Server и WebSocket Server:

    Ratchet предоставляет удобный механизм для использования сессий Symfony.

    Теперь создадим класс Server. Для работы с Ratchet мы должны имплементировать MessageComponentInterface интерфейс.

    При подключении пользователя получаем информацию о пользователе из сессии и заносим пользователя в список подключенных клиентов.

    При отключении пользователя удаляем его из списка клиентов:

    При получении сообщения от одного клиента рассылаем его всем.

    Теперь мы можем запустить нашего демона командой:

    Клиент

    Создадим файл chat.phtml, в котором опишем структуру нашего чата, подключим библиотеки: jQuery и Handlebars (будем использовать для шаблона сообщения).

    Код полностью готового чата выложен на GitHub: antonmedv/chat.

    Он немного отличается от этого: в нём реализованы дополнительные функции:

    • Хранение истории сообщений
    • Вставка изображений
    • Разделение сообщений на свои/чужие
    • Мобильная версия чата
    • Вынесенные настройки

    Ссылки

    Share
    If you found a typo edit post on GitHub.

    Простой чат на PHP

    Здравствуйте, уважаемые читатели блога LifeExample, в этой статье я хотел бы привести пример скрипта реализующего простой чат на php. Это простой скрипт чата сделан на основе PHP и JavaScript, с использованием OOP и AJAX.

    Для работы с этим скриптом чата на php не нужна база данных.

    Скрипт работает с текстовыми файлами, сохраненными на сервере, поэтому очень быстрый и не занимает много ресурсов сервера. Пользователь может добавить в чат смайлы и применять форматирование шрифтов текстовых сообщений: «жирный», «курсив», «подчеркивание». Имеется поддержка смайлов.

    В чате имеется поддержка никнеймов, разделение по комнатам, настройки ВКЛ/ВЫКЛ для звукового сигнала сохраняются в cookies (на один день). Поэтому, при следующем визите их можно прочитать и воспользоваться с помощью файлов cookie. Скрипт был успешно протестирован на Mozilla Firefox, Internet Explorer, Google Chrome и Opera.

    Минимальные требования для нашего чата на PHP следующие:

    • PHP 5+
    • Браузер с подключенным JavaScript (желательно с поддержкой для CSS3).

    Как установить чат на PHP

    После распаковки архива script_chat_simple.zip , скопируйте на сервер файл chat.php , папки: chatfiles, chattxt и chatex (со всеми файлами, в ту же самую директорию, в которой у вас находится файл, куда вы хотите включить чат). Файл test.php для теста.

    Установите разрешения на чтение — запись — распаковку на директорию chattxt, CHMOD 0777 (или 0755). В этой директории PHP сохранит TXT файлы с чатом для каждой комнаты чата.

    Добавьте следующий код в PHP файл, в который вы хотите включить этот скрипт чата:

    Для надлежащей работы HTML страницы, возьмите эту строку кода (для CSS свойств) сначала файла chat.php:

    Затем перенесите его в основной раздел страницы, куда вы вставили скрипт.

    Этот скрипт также можно вставить в «.html» файлы, с помощью тегов или (но на сервере должен запускаться PHP). Поэтому для того чтобы добавить скрипт чата в «.html» файл (блог, форум), используйте один из следующих кодов:

    dir/chat.php — путь к директории или файлу, где находится ваш скрипт. Если в той же папке, напишите только «chat.php».

    Админские настройки

    В файле setchat.php (в chatfiles/ директория) вы можете изменить настройки чата на php по умолчанию.

    По умолчанию скрипт сохраняет и показывает последние 30 строк чата. Вы можете изменить этот номер в строке кода:

    С помощью этого скрипта пользователи могут добавлять ссылки в чат (с атрибутом rel=»nofollow»), но, если вы хотите удалить эту опцию, замените 1 на 0 в строке кода:

    В следующей строке кода вы можете установить пароль, который вы будете использовать для очистки истории чата (замените «adminpass» на желаемый вами пароль):

    Для очистки истории чата обратитесь через браузерер в файл chatfiles/setchat.php с ?mod=admin в URL-ле. Например:

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

    Если у вас на сайте установлен скрипт регистрации и авторизации и вы хотите чтобы функция чата была доступна только зарегистрированным пользователям, установите константу CHATADD в значение 0. Затем установите $_SESSION[‘username’] в сессию используемую вашим скриптом для удержания авторизированных пользователей на следующий код в «setchat.php».

    В этом случае вам необходимо добавить session_start(); в начало PHP файла, по примеру файла «test.php».

    Смена звуков для чата на PHP

    В директории «chatex/» представлены два дополнительных WAV файла: beep2.wav и beep3.wav. По умолчанию в скрипте используется beep1.wav. Если вы хотите изменить звуковой файл, который проигрывается при добавлении нового текстового сообщения в чате, измените в файле chatfunctions.js (строка 13) значение переменной:


    Первоначально в скрипте «Чат на PHP» содержится две чат комнаты: на английском языке и языке по умолчанию. Если вам нужна только одна чат комната удалите строку кода, которая содержит переменную $chatrooms[] после названия чат комнаты. Для изменения названия комнаты измените число соответствующих переменных.

    Если вам нужно больше чат комнат добавьте переменные $chatrooms[] со следующим синтаксисом:

    В этом скрипте, реализующим чат на PHP, предусмотрена функция автоматического создания текстовых файлов для каждой чат комнаты, но обязательно должно быть установлено разрешение на запись (CHMOD 0777, или 0755) в директории chattxt. Скрипт можно легко изменить для использования на других языках. Достаточно перевести текст в файле texts.php (в папке chatfiles/). Если вы хотите изменить цвет и дизайн чата, отредактируйте CSS свойства в chatstyle.css ( или chatstyle_mini.css, в мини версии), в папке chatfiles/. Файл chatstyle_mini.css может быть использован в целях экономии трафика пользователей чата.

    На этом я завершаю обзор скрипта чата, надеюсь данная статья поможет вам создать чат на PHP. Приятной работы!

    Что написать в онлайн-чате, чтобы в него хотелось обратиться? 53 примера

    Время чтения: 11 минут Нет времени читать? Нет времени?

    Онлайн-консультанты полезны для бизнеса. Это подтверждается не только кейсом Texterra, но и глобальным исследованием компании Zendesk, разработчика программного обеспечения для служб поддержки клиентов.

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

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

    Что раздражает пользователей в онлайн-чатах

    На вопросы: «Пользовались ли вы хоть раз онлайн-чатом? Если да, был ли разговор с оператором полезным? Или вы отключаете окно сразу, как только оно всплывает перед вами?» мне ответили 82 человека. Это люди, которые регулярно покупают товары и заказывают услуги через интернет. Из них онлайн-чатом один раз и более пользовались 67 человек (81,7 %), ни разу не пользовались – 15 человек (18,3 %).

    У каждого (!) из тех, кто давал развернутый ответ по опыту общения в онлайн-чате, есть хотя бы одна претензия к реализации этой функции, а у некоторых – сразу две или три.

    Больше всего негатива вызывает неожиданное выскакивание окна, которое отвлекает от просмотра контента и загораживает пол-экрана:

    Еще один нервирующий элемент – навязчивый звук «тынц!»:

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

    Посетитель, все-таки решивший задать вопрос, сталкивается с новой проблемой – отсутствием адекватного ответа. Зато есть все шансы получить обратную связь от службы поддержки через несколько часов, дней или никогда.

    Негатив «словит» и сайт, где консультанта заменяет робот, который вместо общения с клиентом запрашивает у него адрес электронной почты или телефон.

    Даже реальные операторы иногда напоминают ботов: действуют строго по скрипту, не дают никакой информации сверх стандартной, не могут принимать решения без одобрения вышестоящего лица.

    Чаты с такими настройками вызывают у посетителей ассоциацию с навязчивым продавцом, который лезет с предложением помощи без спроса:

    По итогам опроса нарисовалось 5 признаков онлайн-чата, который понравится пользователям:

    1. Разворачивается только после того, как посетитель сайта нажмет на соответствующую кнопку. До этого скромно ждет своего часа, не мигает и не дергается.
    2. Открывается беззвучно.
    3. Занимает небольшую часть экрана, на которой нет важного контента.
    4. Оператор, но ни в коем случае не робот, отвечает в течение первых 30 секунд.
    5. Работает грамотный и компетентный специалист, который может самостоятельно принимать решения. Он нацелен на выявление реальной потребности, а не на бездумную работу по скрипту.

    Как поиск примеров превратился в мини-исследование

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

    В процессе поиска я просмотрела 695 сайтов компаний, предлагающих свои услуги и товары, и собрала «говорящую» статистику по использованию онлайн-консультантов. Просматривала первые пять страниц поиска по популярным запросам, например, «сделать контрольную на заказ» или «бухгалтерские услуги». Тематика самая разная: от юридических услуг до организации праздников. Ситуация везде примерно одинаковая.

    70–80 % сайтов не используют чат для общения с клиентами. Обходятся призывом позвонить в виде скачущей телефонной трубки или формой обратной связи на первом экране.

    10–12 % сайтов установили сервис для чата, но используют его как форму обратной связи. По крайней мере, это честно. Если бюджет не позволяет нанять персонал для круглосуточных онлайн-консультаций, не нужно вводить клиентов в заблуждение, заставляя их часами ждать ответа в окне чата.

    5–10 % приходится на окна, в которых с клиентами даже не здороваются. Нет фотографии и имени специалиста службы поддержки. Создается впечатление, что онлайн-чат установили «для галочки».

    2–3 % – чат со стандартным приветствием: «Здравствуйте! У вас есть вопросы?» Вежливо, но банально.

    1–2 % – чат с «человеческим лицом». Специалист службы поддержки представлен по имени, в большинстве случаев есть фотография (даже если она не настоящая). Текст доброжелательный, располагающий клиента к общению на интересующую его тему.

    Компания-разработчик онлайн-чата Jivosite утверждает, что текст, придуманный специально для конкретной ниши, работает лучше, чем универсальная фраза «Чем я могу вам помочь?».

    Посмотрите, что еще пишут в своих чатах российские и зарубежные компании. Возможно, моя подборка вдохновит вас на собственный креатив.

    Примеры распространенных ошибок

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

      Зачем три раза писать одно и то же разными словами?

    Чем «зацепить» клиента в онлайн-чате

    1. Поблагодарите посетителя за внимание к вашему продукту:

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

    Чат на php, mysql, ajax

    В этой теме 9 ответов, 2 участника, последнее обновление 4 мес. назад.

    Сегодня хочу рассказать и показать как написать чат на php используя технологию ajax и базу данных mysql. Ajax будем использовать для того, чтобы страница при отправке сообщений не перезагружалась [заметка про Ajax].

    Ну для начала вам нужно написать регистрацию для будущего чата. Кто не читал статью как это делать, то вот она «Система регистрации на сайте«. Внимание: при создании регистрации сделайте БД с именем chat .

    Теперь когда пользователи могут регистрироваться у нас в чате, приступим к написанию самого скрипта для обмена сообщениями на сайте. У нас есть страница index.php , то есть главная. Там после строки:
    echo «Выход»;
    Вставьте такую строчку:
    include(«chat.php»);
    Этим мы будем подключать файл chat.php на главную. Теперь создайте рядом со всеми файлами ( login.php , register.php и т.д. ) файл chat.php .

    Там у нас будет храниться html-код (то есть каркас) и javascript (JQuery) код, которым мы будем отправлять данные на сервер и каждые 5 секунд подгружать сообщения в div .

    В базу данных, помимо таблицы с пользователями ( users ), добавьте еще такой дамп (это таблица messages в которой мы будем хранить сообщения пользователей):

    Теперь приведу хорошо закомментрированный код файла chat.php :

    Как вы заметили, в функции добавления сообщений в базу отправляет Ajax запрос файлу add_mess.php , который уже добавит его в таблицу messages . Вот код этого файла:

    Теперь последний код нашего чата, это php скрипт, который достает данные из БД и отдает их функции load_messes() на вывод. Вот он:

    Вот и все скрипты закончены. Теперь осталось лишь все собрать. А для особо ленивых, выложу архив со всеми скриптами и дампом базы данных. Исходники чата на php+mysql+ajax.

    Останется лишь создать БД с именем chat , залить дамп и скрипты. Но, хотел сказать, что такая версия чата очень простая, без наворотов и без защиты от флудеров и т.д.

    Как написать чат на asp.net?

    Грубо говоря, я только начал изучать ASP.NET. До этого я изучал C# по Шилдту. Читаю я книгу по ASP.NET Мэтью Макдональда. Прочитал я пока только 6 глав этой книги. Как все известно, лучший способ что то освоить, это написать небольшей проект. Я хочу попробовать написать свой чат. Я поискал в интернете, как должен выглядить чат. Как написать чат. Для себя определился, как именно он будет выглядить, согласно указанных способов по данной статье. Пока без AJAX. Но у меня ступор, с чего начать. Прошу меня натолкнуть в этом направление. Конкретно, я не знаю что писать в коде, какие классы использовать и т.д.

    Для чата я буду использовать фреймы. Одно окно сообщения, другое с текстбоксом и кнопкой для отправки сообщений. Все сообщения я буду хранить в XML. Чат я реализую с авторизацией пользователя.

    1 ответ 1

    Вот и начните с авторизации, потом добавьте регистрацию. После этого сделайте скелет страницы, которая бы, в теории, могла отправлять/получать сообщения. То, что он будет выглядеть ужасно — не важно. Напишите серверную часть и проверьте работает ли ваша страница на практике. Если нет — исправляйте. Затем делайте ajax, красивый дизайн и прочией радости.

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

    Ссылки же есть и посолиднее, чем та, которую вы привели:

    Мастер Йода рекомендует:  Представлена бета-версия Webpack 4
    Добавить комментарий