Мини-чатик в один файл на PHP, HTML, CSS и JS

01.05.2014 18:24
12
Вобщем дело было так - собрался с праздновать свой ДР, народ мол "давай список подарков и все такое, а то подарим тебе надувную бабу по умолчанию" :)

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

Отправить всем емейлы? А если люди не хотят чтобы кто-то еще знал их емейл? То же и про телефоны. Экзотические вещи вроде гуглспредщитов и всякой другой онлайн-ахинеи мне были не сильно интересны - все-таки конфиденциальная информация :)

И вообще, программист я или где?

За час с небольшим был написан мини-чатик с пасьянсом и дурными феями, еще час на доделывания хотелок от народа и час на дебаг.

Вроде даже все получилось и даже понравилось. (Хотя время от времени раздавались вопли мол Ну че за херня - файл нельзя отправить, голосовое сообщение тоже, и вообще какого хрена без 3D?)

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

Фишки:

  • Весь чат одним файлом на PHP + HTML + CSS + JS
  • Никакой БД, вся история хранится в HTML файлике, куда засовываются уже оформленные в HTML сообщения
  • Авторизации тоже не предусмотрено - все свои
  • Никаких WebSockets и long polling-ов - старый добрый хардкорный "А есть чо?"
  • Запоминание выбранного ника в куках
  • Вырезание всякого "ге" из текста и ника при постинге и ограничение их по длине
  • Обрезка подгружаемого куска чата
  • Отправка данных только в случае, если они были изменены (но отправляется весь кусок)
  • Отключаемый автоскролл
  • Возможность задать время опроса, путь до файла с чатом, длину пересылаемого куска, оформление сообщений
  • Блокирование диалогов при загрузке и постинге, если скорость низкая
  • Подсказки в случае всяких фейлов
  • Кросс-браузерная работа - традиционно WebKit-ы (Chrome, Safari и др.), Firefox.
    IE браузером не считаю - это программа типа WGET для скачивания файлов (в том числе нормальных браузеров) просто с GUI - но и в нем должно работать, пусть и не так красиво
  • Без каких-либо jQuery и других фреймворков - только чистый JS, только хардкор
  • Все максимально просто, коротко, понятно и со вкусом
  • Огромное пространство для творчества и модификаций

Пользуйтесь на здоровье!

P.S. Иногда вот так покодить на чистом JS, вспомнить как сделать анимацию вручную, как работают стандартные селекторы и написанная с нуля обвязка XMLHttpRequest - это просто клево.

Вообще, чистый JS и когда ты сам себе в коде хозяин, а не лениво просишь "Эй, jQuery дай-ка мне тот DIV и отправь его содержимое по AJAX на воон тот URL!" - это приятно и полезно для мозгов :)

Скачать chat.php, версия от 10.04.18

скачать
История версий:

10.04.18
  • добавлена подсветка URL в сообщениях
  • исправлена ошибка с незапоминанием имени
  • изменен дизайн всплывающих подсказок
  • изменен цвет даты и IP
  • изменен дизайн ввода имени
  • пофикшены мелкие баги
08.05.14
  • первый публичный релиз

01.05.2014, Protocoder
Борис21.11.2014 22:52:55#ответить
Отличный Мини-чатик... ОГРОМНОЕ СПАСИБО!!!
Protocoder22.11.2014 22:52:05#ответить
Всегда пожалуйста :)
пользователь18.07.2016 14:51:26#ответить
Спасибо!
Kent25.03.2018 19:34:34#ответить
Здравствуйте ! Чат отличный ! но не хочет отображать русский язык и постоянно пишет ошибка сервера !
Protocoder25.03.2018 19:49:29#ответить
Чат точно работает - проверено неоднократно.

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

Как вариант - если сервер Apache - добавьте в каталог с чатом файл .htaccess (или добавьте строчку к существующему .htaccess):
AddDefaultCharset windows-1251

Должно помочь.
Kent25.03.2018 20:38:34#ответить
В место "привет" отображает вот так "(п?иве?" с англ работает не проблема .
Я попробовал то , что вы мне описали , результатов не дало. Да , сервер Apache.
Protocoder26.03.2018 19:39:25#ответить
Проверьте в инструментах разработчика в браузере заголовки - если там все в порядке с content-type и его кодировкой - смотрите что с кодировкой на сервере (хостинге) - может быть на сервере не встает 1251 локаль - что запросто может быть.
Посмотреть это элементарно - в самом начале PHP-файла с чатом идет установка локали - вот после нее и вывести текущую локаль - будет ли она 1251?

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

Кстати, для Apache и .htaccess можно попробовать еще вот такой вариант:
CharsetDisable on
CharsetDefault windows-1251
CharsetSourceEnc windows-1251
AddDefaultCharset windows-1251
Влад08.04.2018 19:58:33#ответить
Добрый день.
Как очистить чат от ненужных записей?
Protocoder10.04.2018 00:59:14#ответить
Чат пишется в файл chat.db - это по сути обычный html-файл и там можно подправить все, что надо, открыв его обычным текстовым редактором.
Либо вообще удалить этот файл - тогда чат пересоздаст его и будет полностью чист.
Fendibober09.04.2018 13:40:52#ответить
Добавил функцию подсветки гиперссылок

function parse_links( $str ) {
$str = str_replace( 'www.', 'http://www.', $str );
$str = preg_replace( '|http://([a -zA-Z0-9-._()/]+)|', '<a href="http://$1">$1</a>', $str );
$str = preg_replace( '|https://([ a-zA-Z0-9-._()/]+)|', '<a href="https://$1">$1</a>' , $str );
$str = preg_replace( '/(([a-z0-9+ _-]+)(.[a-z0-9+_-]+)*@([a -z0-9-]+.)+[a-z]{2,6})/', '<a href="mailto:$1">$1</a>', $str );
return $str;
}

if ( $text ) $text = parse_links( $text );
Protocoder10.04.2018 21:55:52#ответить
В новой версии по многочисленным просьбам добавлена подсветка URL (емейлов - нет), правда по гораздо более простому алгоритму.
Владимир22.04.2018 17:40:26#ответить
Чатик отличный! Сайт у меня на utf-8, у чата кодировка win1251. В файле изменил все записи на utf-8 и сохранил в utf-8, но не тут-то было. В чем моя ошибка? Как перевести чат на utf-8?
Написать комментарий