Чат на JavaScript и Node.js
В этой статье вы прочитаете как сделать чат на JavaScript и HTML, ещё для сервера будем использовать Node.js.
Если у вас не установлен Node.js и вы не знаете как это сделать, то прочитайте эти статьи:
- Как установить Node.JS на Linux или на Ubuntu 19.04;
- Как установить Node.js на любую версию Windows;
Front-end:
Для начала разберём как сделать клиентскую часть сайта, создадим файл «chat.html», вот он:
Тут не чего сложного и особенного нет, единственное мы добавляем CSS bootstrap, чтобы всё чуть красивее стало и так же имеем два блока, первый куда будем выводить сообщения, второе для форм, куда будем вводить текст сообщения и кнопка отправить.
После создания HTML можете сделать отдельный JS файл или прямо внутри HTML писать код, я выберу второй вариант.
JavaScript
// Получаем элемент чата
let chat = document . querySelector ( «#divMessages» )
// Получаем строку ввода сообщения
let input = document . querySelector ( «#inputMessage» )
// Получаем кнопку для ввода сообщения
let btnSubmit = document . querySelector ( «#btnSend» )
// Подключаем WebSocket
const webSocket = new WebSocket ( ‘ws://localhost:8081’ ) ;
// Получаем сообщение от сервера
webSocket . onmessage = function ( e ) <
// Парсим полученные данные
const data = JSON . parse ( e . data ) ;
// Выводим в блог сообщение от сервера
chat . innerHTML += '
‘
// Отслеживаем нажатие мыши
btnSubmit . addEventListener ( «click» , ( ) = > <
// Получаем текст из формы для ввода сообщения
message = input . value ;
// Отправка сообщения через WS
webSocket . send ( JSON . stringify ( <
'message' : message
// Очищаем поле для ввода текста
input . value = '' ;
Как видите кода не так уж много, в начале мы берём все нужные нам HTML элементы, это блог чата, куда будем выводить все сообщения, поле для ввода сообщений и кнопка для их отправки.
Потом подключаем к серверу через WebSocket, дальше начинаем грубо говоря прослушивать сообщения которые на отправляет сервер, мы парсим данные от сервера и выводим полученное сообщение в блок чата.
Последние отслеживаем нажатие кнопки отправить сообщение, при клики на неё берём строку из формы и отправляем сообщение предварительно из JSON сделав строку и чистим форму.
На этом мы закончили делать клиентскую часть.
Back-end:
Теперь будем делать чат для сайт на Node.js, то есть сделаем серверную часть, для этого создадим файл «App.js».
Примечание:
Если вы не хотите использовать Node.js для вашего чата, не знаете его, или предпочитаете Python Django, то почитайте эту статью «Как сделать чат на Python Django»
JavaScript
// Подключаем библиотеку для работы с WebSocket
const WebSocket = require ( ‘ws’ ) ;
// Создаём подключение к WS
let wsServer = new WebSocket . Server ( <
port : 8081
// Создаём массив для хранения всех подключенных пользователей
// Проверяем подключение
wsServer . on ( 'connection' , function ( ws ) <
Делаем подключение пользователя
connection : ws
// Добавляем нового пользователя ко всем остальным
users . push ( user )
// Получаем сообщение от клиента
ws . on ( 'message' , function ( message ) <
// Перебираем всех подключенных клиентов
for ( let u of users ) <
// Отправляем им полученное сообщения
u . connection . send ( message )
// Делаем действие при выходе пользователя из чата
ws . on ( 'close' , function ( ) <
// Получаем ID этого пользователя
let id = users . indexOf ( user )
// Убираем этого пользователя
users . splice ( id , 1 )
Как можете заметить код на Node.js тоже очень простой, в начале подключаем библиотеку «ws» для работы с WebSocket, потом создаём подключение к серверу через этот протокол, и делаем массив в котором будут хранится все пользователи.
Потом создаём подключение пользователя, сразу там назначаем тип конекта, и добавляем его в массив всех пользователей, дальше идёт функция которая будет срабатывать при получение сообщения от клиента, его мы отправляем всем остальным, для этого проходимся по всем подключенным пользователям.
Последние это отслеживаем отключение клиента, если такое произошло, то просто убираем его из массива.
На этом разработка серверной части закончилась и как видите тоже не чего особо сложного нет, для запуска видите эту команду:
Готовый чат на JavaScript для сайта — chat плагин
Реализовать чат на html без серверной стороны конечно не возможно. Но не обязательно для каждого чата писать chat server самому, можно воспользоваться готовым решением. И не смотря на то что это казалось бы очевидно набирается почти 800 запросов «html chat» в месяц и это только к Яндексу.
В конце статьи прилагается файл на javascript реализующий простой чат, его достаточно вставить в html код страницы, и чат готов. Вся серверная сторона уже реализована.
Готовый движок чата на JavaScript для любого сайта.
Как говорилось выше реализовать html чат без серверной части работать не будет. Для работы чата требуется комет сервер который будет отправлять push уведомления всем участникам чата. Но для этого чата комет сервер предоставляется бесплатно, вам даже регистрироваться там не обязательно. В таком случаи чат будет общий для всех сайтов которые его вставят. Это даже не плохо, особенно для сайтов с небольшой посещаемостью. А те кто хотят иметь чат только для своего сайта или своей группы сайтов должны зарегистрироваться и бесплатно получить идентификатор разработчика на comet-server.ru а затем его указать в коде инициализации чата ( вместо dev_id: 15 указать свой полученный id).
Встраиваем чат в html вашего сайта.
В HTML код вставляем вот такой скрипт.
.html-chat-history < max-width: 600px; overflow: auto;max-height: 900px; border: 1px solid #ccc;padding: 5px;>.html-chat-js-name < margin-top:10px; >.html-chat-js-input < max-width: 600px;max-height: 100px;width: 600px;margin-top:10px; >.html-chat-js-button-holder < margin-bottom: 0px;margin-top: 10px; >.html-chat-js-button-holder input < width: 220px; >.html-chat-js-answer < float:right; >.html-chat-js-answer a < color: #777;font-size: 12px; font-family: cursive;>.html-chat-js-answer a:hover < color: #338;font-size: 12px; font-family: cursive;>.html-chat-msg
Если вы хотите вставить этот чат себе на сайт но не «как есть», а с некоторыми изменениями то вероятно вам будет полезна статья-пример чата похожего на этот чат
История сообщений для чата
Можно до 99 последних сообщений чата загружать из истории комет сервера. Для включения сохранения истории сообщений в канале чата надо выполнить CometQL запрос в online командной строке для CometQL на странице в разделе Real time monitor.
INSERT INTO pipes_settings ('name', 'length') VALUES ('web_chat_pipe', 10);
Очищение истории сообщений чата
Для очищения истории сообщений в чате надо выполнить CometQL запрос в online командной строке для CometQL на странице в разделе Real time monitor.
DELETE FROM pipes_messages WHERE name = 'web_chat_pipe';
Обратите внимание на разницу в командной строке CometQL: на страницах с документацией демо доступ для dev_id = 15 а в разделе Real time monitor командная строка для управления вашим личным dev_id
Другие реализации чатов
В данной статье рассмотрели публичный чат без регистрации.
- Готовый виджет чата для социальной сети
- Если вам нужен чат для личного общения пользователей между собой (общение в диалогах один на один) то вам больше подойдёт чат плагин личной переписки между пользователями
- Есть так же учебный пример скрипта чата с авторизацией
- Ещё один простой пример чата похожего на этот чат
Если вы не собираетесь сами разрабатывать уникальный чат с каким то необычным функционалом а хотите просто вставить на свой сайт готовый виджет чата то рекомендуем вам ознакомится с сервисом чатов позволяющим всё сделать без программирования.
Как реализовать групповой голосовой чат в браузере?
Хотелось бы понять принцип реализации группового голосового чата по типу дискорда или google hangouts. В моём представлении это должен быть формат клент-сервер-клиент, чтобы на клиенты была минимально возможная нагрузка. По WebRTC я нашёл много информации про то как передавать данные в формате клиент-клиент и вытекающие сетки клиентов, где все друг другу должны передавать потоки, но это, естественно не подходит, т.к. клиенту придётся работать с огромной кучей медиа. Другой вариант, который я нашёл, это нарезка потока на куски с помощью MediaRecorder и отправка этих кусков на сервер по websocket, который в свою очередь может рассылать их всем желающим клиентам. Этот вариант я и попробовал сделать. Но, если Chrome делает всё как и ожидалось, т.е. отправляет, получает части потока и воспроизводит их, то Firefox имеет своё мнение по минимально возможной длительности этих кусков. Т.е. если указать
mediarecorder.start(100); то Firefox будет вызывать mediarecorder.ondataavailable раз в 100мс, но только примерно раз в 1с туда придут данные длинной в 1с. Плюс ко всему в Firefox autoplay на audio элементе с привязанным буфером срабатывает с большой задержкой, что в совокупности даёт громадное отставание в звуке. И вот после многих дней моих приключений у меня есть браузерный JS для реализации клиента, PHP с вебсокетами для сервера и вопрос, что с этим всем можно сделать для реализации основной функции передачи-получения звука с микрофона с минимально возможной задержкой на большинстве основных браузерах. PHP в связке потому что наиболее доступен для меня сейчас, а проект для теста, чтобы понять принцип. Главное алгоритм работы клиента.
Мини-чатик в один файл на PHP, HTML, CSS и JS
Ну добили они меня — составил я список подарков, нужных мне, чтоб не пылились потом на полочке. И дальше встал вопрос — а как сделать, чтобы народ (много народа), не знающий или плохо знающий друг-друга, все это мог обсудить и скооперироваться?
Отправить всем емейлы? А если люди не хотят чтобы кто-то еще знал их емейл? Тоже и про телефоны. Экзотические вещи вроде гуглспредщитов и всякой другой онлайн-ахинеи мне были не сильно интересны — все-таки конфиденциальная информация 🙂
И вообще, программист я или где?
За час с небольшим был написан мини-чатик с пасьянсом и дурными феями, еще час на доделывания хотелок от народа и час на дебаг.
Вроде даже все получилось и даже понравилось. (Хотя время от времени раздавались вопли мол: «Ну че за херня — файл нельзя отправить, голосовое сообщение тоже, и вообще какого хрена без 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!» — это приятно и полезно для мозгов 🙂
P.P.S. Не забудьте на хостинге правильно настроить кодировку и проверить наличие расширения mbstring у PHP — иначе будут проблемы с работой чата
Скачать chat.php , версия от 09.09.21 (utf8)
Скачать chatWin.php , версия от 09.09.21 (последняя с win1251 от 10.04.18, исправлена XSS)
- исправлена уязвимость XSS в нике, спасибо name за фидбэк
- поправлена бага с копированием всего чата при клике за границей сообщения, спасибо Mike за фидбэк
- добавлено опциональное авторастягивание ввода сообщения под размер введенного текста
- закомментированы строчки с content-length заголовком, т.к. браузеры выкидывают на них исключение безопасности, спасибо Виктору за фидбэк
- поправлена бага с экранированием переноса строк из-за чего вместо переносов писалось «
«, спасибо Сергею за фидбэк
- по многочисленным просьбам чат переделан в UTF-8
- добавлен звук отправки и получения сообщения (отключаемо)
- пофикшены мелкие баги
- добавлена подсветка URL в сообщениях
- исправлена ошибка с незапоминанием имени
- изменен дизайн всплывающих подсказок
- изменен цвет даты и IP
- изменен дизайн ввода имени
- пофикшены мелкие баги
- первый публичный релиз