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

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

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

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

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

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

Вроде даже все получилось и даже понравилось. (Хотя время от времени раздавались вопли мол Ну че за херня - файл нельзя отправить, голосовое сообщение тоже, и вообще какого хрена без 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#ответить
Всегда пожалуйста :)
Илья25.04.2018 22:06:56#ответить
спс наконец-то закончил соц сеть)))))
пользователь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?
Protocoder25.04.2018 14:18:21#ответить
Одной только конвертацией не обойтись.

Дело в том, что строковые функции в PHP отличаются для работы с UTF-8 или с WINDOWS-1251.

Поэтому для того, чтобы заработало в UTF-8 потребуется переписать весь PHP-код, работающий со строками.

Еще как вариант - оставить WINDOWS-1251 только для чата - создать отдельную папку для чата на хостинге и через .htaccess дать всему, что внутри кодировку WINDOWS-1251.
Владимир25.04.2018 22:28:49#ответить
Здравствуйте.

Создавал отдельную папку для чата на сайте, установил .htaccess (AddDefaultCharset windows-1251).
Все срабатывает, но... только после перезагрузки страницы чата и совсем нет заглавных букв.

Комбинация :

CharsetDisable on
CharsetDefault windows-1251
CharsetSourceEnc windows-1251
AddDefaultCharset windows-1251

Выдает ошибку 500.

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

Есть ли еще варианты?
Protocoder26.04.2018 01:52:37#ответить
Ошибка 500 выдается скорее всегоиз-за ограничений, который накладывает хостинг-провайдер на параметры в htaccess -это надо уточнять в тех. поддержке провайдера.

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

Варианты есть - можете переписать все под UTF-8 - там ничего сложного нет, исходник открыт - заодно другие страждущие Вам спасибо скажут.
Владимир26.04.2018 10:01:45#ответить
Эх... Если бы мог...
Я и так в свои 60 с лишком (пенсионер, да и еще с недавних пор инвалид 1 группы) стал, как пацан - более менее понял html и css.

Подскажите откуда плясать, буду вникать.

Будьте здоровы.
Protocoder26.04.2018 23:07:27#ответить
Если не знакомы с базовыми знаниями по PHP - то плясать с него и базовых знаний - без этого Вы в коде не разберетесь вообще - однако это все уже выходит за рамки данной статьи.

Что до моего вмешательство в чат и UTF-8 - может быть когда-нибудь у меня руки до него и дойдут, но ничего обещать не могу.
Написать комментарий